如何使用javaScript正确设置文本字段的值
How do I properly set the value of a text field with javaScript?
我正在尝试获得 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>
使用
document.getElementById('grade').value=grade;
你需要在javascript中获取元素
gradeEle = document.getElementById("grade");
gradeEle.value = grade;
它应该是:
document.getElementById('grade').value = grade;
您正在尝试将grade
重用于 2 个不同的值,但它只能保留其中一个。
grade.value = grade;
// ^ element
// ^ division result
您需要使用其他变量:
var result = sum / 4;
grade.value = result;
或者,您可以完全跳过它:
grade.value = sum / 4;
但是,请注意,id
的自动全局变量并不总是得到保证,通常不建议依赖它们。
相反,您可以从<form>
访问任何name
d 表单项,反之亦然。
<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.
}
相关文章:
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 当设置addFromAutocompleteOnly时,剩余文本将保留在输入字段中
- 使用jquery将输入字段转换为文本
- 如何从查询字符串中的输入字段发回文本
- 在Reactjs中添加和删除值未重置的输入字段
- 表单输入字段随着溢出的文本而增长
- 使用单个文本框向多个字段添加严格搜索
- 编辑不起作用的表单的特定行和重置特定字段
- 提交表单时如何重置某些字段
- 重置时输入字段文本css
- 为什么 react 将输入[类型=“文本”] 字段设为只读,除非我提供 onChange 回调
- 如何重置输入字段?jQuery.
- 使用SAPUI5中的“文本”字段显示正确的“日期”
- Kendo,如何将MVVM文本:字段绑定到远程DataSource
- 使用<重置所有字段(复选框、文本、选择);body onload()">
- 动态添加新字段将重置先前字段中的值
- 在元素外部单击时重置输入字段
- jquery如果选择器更改重置或清除文本输入字段问题
- 重置HTML5“;数字“;包含在Google Chrome中使用AngularJS的文本的字段
- 重置搜索字段或使用退格字符重置字段(CasperJS)