How do I properly set the value of a text field with javaScript?

Question

I'm trying to get the average of 4 grades and pass it in a text field.

It does get the average, the only part that doesn't work is the grade.value = grade; part

Here's my code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Week #10 JavaScript Assignment: Problem #1</title>
<script type = "text/javascript">
function calcgrade(one,two,three,four){
    sum = parseInt(one.value) + parseInt(two.value) + parseInt(three.value) + parseInt(four.value);
    grade = sum / 4;
    grade.value = grade;
}
</script>
</head>
<body>
<h1>Calculate Grade</h1>
<form>
    <table>
        <tr>
            <th>Assignment #</th>
            <th>Grade</th>
        </tr>
        <tr>
            <td>1</td> 
            <td><input type="text" id="one" name="one"></td>
        </tr>
        <tr>
            <td>2</td>
            <td><input type="text" id="two" name="two"></td>
        </tr>
        <tr>
            <td>3</td>
            <td><input type="text" id="three" name="three"></td>
        </tr>
        <tr>
            <td>4</td>
        <td><input type="text" id="four" name="four"></td>
        </tr>
        <tr><td colspan="2"><input type="button" onclick="calcgrade(one, two, three, four)" value="Calculate Grade"></td></tr>
        <tr>
            <td>Grade:</td>
            <td><input type="text" id="grade" name="grade"></td>
        </tr>
    </td>
</form>
</body>
</html>

You should use `var` declarations to declare local variables, not use global variables for everything. — Barmar, Nov 12 '13 at 02:09

score 2 · Answer 1 · answered Nov 12 '13 at 02:07

2

you need to get the element in javascript

gradeEle = document.getElementById("grade");
gradeEle.value = grade;

answered Nov 12 '13 at 02:07

ManZzup

526
4
12

Vicky Gonsalves · Accepted Answer · 2013-11-12T02:08:53.180

2

Use
document.getElementById('grade').value=grade;

edited Nov 12 '13 at 02:08

answered Nov 12 '13 at 02:07

Vicky Gonsalves

11,593
2
37
58

score 1 · Answer 3 · answered Nov 12 '13 at 02:07

1

It should be:

document.getElementById('grade').value = grade;

answered Nov 12 '13 at 02:07

Barmar

741,623
53
500
612

Jonathan Lonowski · Answer 4 · 2013-11-12T12:38:53.387

You're trying to reuse grade for 2 different values, but it can only keep one of them.

   grade.value = grade;
// ^ element
//               ^ division result

You'll either want to use a different variable:

var result = sum / 4;
grade.value = result;

Or, you can skip it entirely:

grade.value = sum / 4;

Though, do note that automatic globals for ids aren't always guaranteed and it's not usually recommended to depend on them.

You can instead access any named form items from the <form> and vice versa.

<input type="button" onclick="calcgrade(this.form)" ...>

function calcgrade(form){
    var sum = parseInt(form.one.value) + parseInt(form.two.value) + parseInt(form.three.value) + parseInt(form.four.value);
    form.grade.value = sum / 4;
}

Or, use getElementById() to find each specifically:

function calcgrade() {
    var grade = document.getElementById('grade');
    var one = document.getElementById('one');
    // etc.
}

@Barmar Doesn't necessarily have to. http://jsfiddle.net/YHFxN/ (Does it log `false` or `DIV`?) Automatic globals are supported in many current browsers and are currently documented in drafts from WHATWG. http://stackoverflow.com/a/6381766 — Jonathan Lonowski, Nov 12 '13 at 02:34

How do I properly set the value of a text field with javaScript?

4 Answers4