获取值并根据用户在 Javascript 上的选择显示
Get value and display according to user selection on Javascript
问题是如何从表单的用户输入中获取值并计算值并通过单选框在选择中显示它。用户可以选择提交选择或清除表单。
这是 HTML 代码:
<body>
<form name="frm">
<table bordercolor="black" width="500">
<td colspan="4" align="center"><b>TBB1033/TCB1033 Coursework Marks Calculator</br></b>
</br>Please enter marks for the following coursework components.</br>The mark for each component is between 0 and 100 inclusive.</br>
</br>
<tr>
<td></td>
<td>Test 1:</td>
<td>
<input type="text" id="test1">
</th>
</td>
<td></td>
</tr>
</br>
<tr>
<td></td>
<td>Test 2:</td>
<td>
<input type="text" id="test2">
</th>
</td>
<td></td>
</tr>
</br>
<tr>
<td></td>
<td>Assignment:</td>
<td>
<input type="text" id="assignment">
</th>
</td>
<td></td>
</tr>
</br>
<tr>
<td></td>
<td>Quiz:</td>
<td>
<input type="text" id="quiz">
</th>
</td>
<td></td>
</tr>
</br>
<tr>
<td></td>
<td>Lab Work:</td>
<td>
<input type="text" id="labwork">
</th>
</td>
<td></td>
</tr>
</br>
<tr>
<td></td>
<td>
<input type="radio" name="a" checked="checked">Coursework Marks</td>
<td>
<input type="radio" name="a">Coursework Grade</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Submit" onclick="calculate()" />
</td>
<td>
<input type="button" value="Clear" onclick="clear()" />
</td>
</tr>
<tr>
<td></td>
<td>Result:</td>
<td>
<input class="text" type="text" name="total" value="0" id="total">
</th>
</td>
<td></td>
</tr>
</form>
</table>
</body>
</html>
这是javascript:
function calculate() {
var a = document.getElementById("test1").value;
var b = document.getElementById("test2").value;
var c = document.getElementById("assignment").value;
var d = document.getElementById("quiz").value;
var e = document.getElementById("labwork").value;
var document.getElementById("total").value = parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d + parseInt(e);
}
function clear() {
document.frm.getElementById("test1").value = '';
document.frm.getElementById("test2").value = '';
document.frm.getElementById("assignment").value = '';
document.frm.getElementById("quiz").value = '';
document.frm.getElementById("labwork").value = '';
}
结果显示如下:
https://i.stack.imgur.com/n8aBQ.jpg https://i.stack.imgur.com/O4sFz.jpg
试试这个
function calculate() {
var a = document.getElementById("test1").value;
var b = document.getElementById("test2").value;
var c = document.getElementById("assignment").value;
var d = document.getElementById("quiz").value;
var e = document.getElementById("labwork").value;
document.getElementById("total").value = (parseInt(a) + parseInt(b) + parseInt(c) + parseInt(d) + parseInt(e));
}
function cclear() {
document.getElementById("test1").value = '';
document.getElementById("test2").value = '';
document.getElementById("assignment").value = '';
document.getElementById("quiz").value = '';
document.getElementById("labwork").value = '';
}
小提琴演示
为了清除您可以使用的表单type="reset"
它将清除表单
<input type="reset">
演示
您可以替换:
var document.getElementById("total").value = parseInt(a) + parseInt(b) + parseInt(c) +
parseInt(d + parseInt(e);
由:
document.getElementById("total").value = parseInt(a) + parseInt(b) + parseInt(c) +
parseInt(d + parseInt(e);
相关文章:
- 如何使用javascript选择字符串的部分,添加html标记或删除部分
- JavaScript选择器:查找包含具有特定属性的子体的节点
- 如何利用多链接延迟检查并显示ping结果,然后使用JavaScript选择最快的URL
- 在类JavaScript选择的另一个元素中选择一个标记元素
- 使用Ajax或JavaScript选择下拉列表选项后,在同一页面上执行PHP脚本
- 当使用jQuery/Javascript选择一个多选时,如何使所有值都不被选中:
- Javascript选择元素到字符串的比较
- Javascript选择周围的所有元素
- Javascript 选择本机 N:N 关系实体 crm 2011
- 更新 url 而不重新加载,具体取决于使用 jquery/javascript 选择的复选框
- Javascript 选择,从名称中获取值
- 使用ajax/javascript选择项目并将其添加回mysql
- 网站范围内jQuery/javascript选择器的最佳实践
- 用于检查未使用的CSS/JavaScript选择器的NetBeans插件
- javascript选择td´s并计数重复项
- Javascript选择更改提交表单
- 如何使用javascript选择javascript对象中的第一项
- 在请求成功时使用javascript选择一个选项
- 使用Regex Javascript选择第一个目录
- JavaScript选择功能