2

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

这是 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

4

2 回答 2

0

尝试这个

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

演示

于 2013-11-07T11:41:01.070 回答
0

您可以替换：

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);
于 2013-11-07T11:43:45.347 回答