Question

我是html，javascript和css的新手。我不知道为什么，但我的取消按钮根本不起作用。

<!DOCTYPE html>

<html>
<head>
<!-- set the page title and link with java script and css files -->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="hw4.css">
<script src="hw4.js"></script>
</head>
<body>
<section>
    <table>
        <tr>
            <td class="first">Post to</td>

            <!-- create two post to buttons -->
            <td class="second"><input id="entire" type="radio" name="post"
                value="entire" checked>Entire Class <input type="radio"
                id="individual" name="post" value="individual">Individual
                Student(s)/instructor(s)</td>
        </tr>

        <tr>
            <td class="first">Select Folder(s)</td>
            <td class="second">
                <!-- create six homework checkboxes -->
                <div class="hw">
                    <input id="hw1" type="checkbox"><label for="hw1">hw1</label>
                    <input id="hw2" type="checkbox"><label for="hw2">hw2</label>
                    <input id="hw3" type="checkbox"><label for="hw3">hw3</label>
                    <input id="hw4" type="checkbox"><label for="hw4">hw4</label>
                    <input id="hw5" type="checkbox"><label for="hw5">hw5</label>
                    <input id="hw6" type="checkbox"><label for="hw6">hw6</label>
                </div>
            </td>
        </tr>

        <tr>
            <td class="first">Summary
                <div style="font: 10px Arial">(100 charactors or less)</div>
            </td>

                <td class="second"><input id="summary" type="text" size="25"
                value="Enter a one line summary...!" onclick="this.value='';"></td>
        </tr>

        <tr>
            <td class="first">Details</td>

            <!-- create detail text area. -->
            <td class="second"><textarea id="details" name="textarea"
                    rows="10" cols="50" wrap='off'></textarea></td>
        </tr>

        <tr>
            <td class="first">Posting Options</td>

            <!-- create two option check boxes -->
            <td><input id="option1" type="checkbox"> Make this an
                announcement (note appears on the course page)</br> <input id="option2"
                type="checkbox"> Send email notifications immediately
                (bypassing student's email preferences, if neccesory)</td>
        </tr>

        <tr>
            <td></td>

            <td>
                <input id="post" type="submit" value="Post My Note!" onClick="check()">
                <input id="cancel" type="reset" value="Cancel" />
            </td>
    </table>
</section>

</body>

</html>

当我运行此代码时，一切正常，但取消按钮不起作用。我想我做错了什么，因为它在30分钟前工作了，但是现在它根本不起作用，我无法弄清楚出了什么问题...... !!

Answer 1

您没有form标记。重置按钮清除表单内的值。

2解决方案：

将输入元素包含在<form></form>
编写一段脚本，以便在单击清除按钮时清除要清除的元素。

Answer 2

试试这个：

重置按钮仅适用于表单标记。所以请在我的代码中添加表单标签，如演示文稿中所示。

<script src="hw4.js"></script>
</head>
<body>
<section>
    <table>
  <form>
        <tr>
            <td class="first">Post to</td>

            <!-- create two post to buttons -->
            <td class="second"><input id="entire" type="radio" name="post"
                value="entire" checked>Entire Class <input type="radio"
                id="individual" name="post" value="individual">Individual
                Student(s)/instructor(s)</td>
        </tr>

        <tr>
            <td class="first">Select Folder(s)</td>
            <td class="second">
                <!-- create six homework checkboxes -->
                <div class="hw">
                    <input id="hw1" type="checkbox"><label for="hw1">hw1</label>
                    <input id="hw2" type="checkbox"><label for="hw2">hw2</label>
                    <input id="hw3" type="checkbox"><label for="hw3">hw3</label>
                    <input id="hw4" type="checkbox"><label for="hw4">hw4</label>
                    <input id="hw5" type="checkbox"><label for="hw5">hw5</label>
                    <input id="hw6" type="checkbox"><label for="hw6">hw6</label>
                </div>
            </td>
        </tr>

        <tr>
            <td class="first">Summary
                <div style="font: 10px Arial">(100 charactors or less)</div>
            </td>

                <td class="second"><input id="summary" type="text" size="25"
                value="Enter a one line summary...!" onclick="this.value='';"></td>
        </tr>

        <tr>
            <td class="first">Details</td>

            <!-- create detail text area. -->
            <td class="second"><textarea id="details" name="textarea"
                    rows="10" cols="50" wrap='off'></textarea></td>
        </tr>

        <tr>
            <td class="first">Posting Options</td>

            <!-- create two option check boxes -->
            <td><input id="option1" type="checkbox"> Make this an
                announcement (note appears on the course page)</br> <input id="option2"
                type="checkbox"> Send email notifications immediately
                (bypassing student's email preferences, if neccesory)</td>
        </tr>

        <tr>
            <td></td>

            <td>
                <input id="post" type="submit" value="Post My Note!" onClick="check()">
                <input id="cancel" type="reset" value="Cancel" />
            </td>
                 </form>
    </table>
</section>

</body>

</html>

享受：）

取消（重置html）按钮不起作用

2 个答案: