Question

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

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

Answer 1

试试这个

    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

Answer 2

您可以替换：

var document.getElementById("total").value  =  parseInt(a) + parseInt(b) + parseInt(c) +
                                               parseInt(d + parseInt(e);

by：

 document.getElementById("total").value  =  parseInt(a) + parseInt(b) + parseInt(c) + 
                                            parseInt(d + parseInt(e);

根据Javascript上的用户选择获取价值和显示

2 个答案: