Question

我有一个关于5个问题的HTML代码和一个“发送”按钮 - 点击它后也会显示一条消息...我想在第一个按钮旁边添加第二个按钮（清除/重置）所以全部之前的答案和消息将会消失 - 就像“再试一次”按钮一样。我怎么能做到这一点？提前感谢您的答案：）

</head>

<body onload="gophrases()">

    <div class="page">
        <div class="title">
            <h3>Subject</h3>
        </div>
        <div class="questions">
            <table>
                <tr>
                    <td id="num">01.</td>
                    <td id="quest">Request 1</td>
                    <td id="ans"><input type="radio" name="q1" onclick="enable('q2')">Yes <input type="radio" name="q1"  onclick="enable('q2')">No</td>
                </tr>
                <tr>
                    <td id="num">02.</td>
                    <td id="quest">Request 2</td>
                    <td id="ans"><input type="radio" name="q2" onclick="enable('q3')">Yes <input type="radio" name="q2" onclick="enable('q3')">No</td>
                </tr>
                <tr>
                    <td id="num">03.</td>
                    <td id="quest">Request 3</td>
                    <td id="ans"><input type="radio" name="q3" onclick="enable('q4')">Yes <input type="radio" name="q3" onclick="enable('q4')">No</td>
                </tr>
                <tr>
                    <td id="num">04.</td>
                    <td id="quest">Request 4</td>
                    <td id="ans"><input type="radio" name="q4" onclick="enable('q5')">Yes <input type="radio" name="q4" onclick="enable('q5')">No</td>
                </tr>
                <tr>
                    <td id="num">05.</td>
                    <td id="quest">Request 5</td>
                    <td id="ans"><input type="radio" name="q5" onclick="enable('q6')">Yes <input type="radio" name="q5" onclick="enable('q6')">No</td>
                </tr>
                <tr>
            </table>
        </div>
        <div class="submit">
            <input type="button" value="Submit" onclick="check()" id="submitbutton">
        </div>
        <div class="result">
            <p><span id="phrase"></span></p>
        </div>
        <div class="phrases">
            <p><span id="score"></span></p>
        </div>
    </div>

<script type="text/javascript">
    function check() {              
        var count = 0;
        var qs = new Array();
        qs[0] = document.getElementsByName("q1");
        qs[1] = document.getElementsByName("q2");
        qs[2] = document.getElementsByName("q3");
        qs[3] = document.getElementsByName("q4");
        qs[4] = document.getElementsByName("q5");

        for(var i = 0 ; i < qs.length; i++) {
            if (qs[i][0].checked) {
                count++;
            }
        }       
        var phrase = "";        
        if(count < 1) {
            phrase = "Bad";
        } else if(count < 3) {
            phrase = "Good";
        } else if(count < 5) {
            phrase = "Excellent";
        }       
        document.getElementById("phrase").innerHTML = phrase;
    }

    function enable(name) {
        var radio = document.getElementsByName(name);
        if(!radio[0].checked || !radio[1].checked) {
            radio[0].disabled = false;
            radio[1].disabled = false;
        }
    }

    function button() {
        document.getElementById("submitbutton").disabled = false;
    }
</script>

</body>
</html>

Answer 1

你可以试试这个：

<button type="reset" value="Reset">Reset</button>

您必须将按钮包装成如下形式：

<form>
    <button type="reset" value="Reset">Reset</button>
</form>

详细了解@ w3schools - HTML Button type Attribute

Demonstration.

如何为这个简单的HTML代码添加一个清理/重置按钮？

1 个答案: