Как правильно установить значение текстового поля с помощью javaScript?

Question

Как правильно установить значение текстового поля с помощью javaScript?

0

Я пытаюсь получить среднее значение 4 класса и передать его в текстовое поле.

Он получает среднее значение, единственная часть, которая не работает, - grade.value = grade; часть

Вот мой код:

<!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>

Snubber 12 нояб. 2013, в 03:06

Источник

0

Вы должны использовать объявления var для объявления локальных переменных, а не использовать глобальные переменные для всего.
Barmar 12 нояб. 2013, в 02:09

Теги:

javascript

html

4 ответа

2

вам нужно получить элемент в javascript

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

ManZzup 11 нояб. 2013, в 23:45

1

Должен быть:

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

Barmar 12 нояб. 2013, в 00:31

1

Вы пытаетесь повторно использовать grade для двух разных значений, но он может содержать только один из них.

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

Вы либо захотите использовать другую переменную:

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

Или вы можете пропустить его полностью:

grade.value = sum / 4;

Хотя, обратите внимание, что автоматические глобальные переменные для id не всегда гарантированы и обычно не рекомендуется зависеть от них.

Вместо этого, вы можете получить доступ к любому name d формы элементов из <form> и наоборот.

<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;
}

Или, используйте getElementById() чтобы найти каждый из них:

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

Jonathan Lonowski 11 нояб. 2013, в 23:09

2

Он никогда не устанавливал grade элементу.
Barmar 12 нояб. 2013, в 02:08
0

@ Бармар Не обязательно должен. jsfiddle.net/YHFxN (записывает в журнал false или DIV ?) Автоматические глобальные переменные поддерживаются во многих современных браузерах и в настоящее время документированы в черновиках WHATWG. stackoverflow.com/a/6381766
Jonathan Lonowski 12 нояб. 2013, в 02:34

Ещё вопросы

Вы должны использовать объявления var для объявления локальных переменных, а не использовать глобальные переменные для всего.
Он никогда не устанавливал grade элементу.
@ Бармар Не обязательно должен. jsfiddle.net/YHFxN (записывает в журнал false или DIV ?) Автоматические глобальные переменные поддерживаются во многих современных браузерах и в настоящее время документированы в черновиках WHATWG. stackoverflow.com/a/6381766

Vicky Gonsalves · Accepted Answer · 2013-11-12T00-38-00.000Z

использование
document.getElementById('grade').value=grade;