gpt4 book ai didi

javascript - 在Javascript上根据用户选择获取值并显示

转载 作者:行者123 更新时间:2023-11-28 03:28:06 24 4
gpt4 key购买 nike

问题是如何从表单的用户输入中获取值并计算该值并在单选框选择时显示它。用户可以选择提交选择或清除表单。

这是 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 = '';
}

显示结果如下:

http://i.stack.imgur.com/n8aBQ.jpg http://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 = '';
}

Fiddle DEMO

要清除表单,您可以使用 type="reset" 它会清除表单

<input type="reset">

DEMO

关于javascript - 在Javascript上根据用户选择获取值并显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19834823/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com