如何使我的重置功能在我的输入元素上工作？

Question

我有一个重置函数，它选择输入的 id。

我有一个按钮，点击时会触发该功能。

我哪里错了？我想可能是因为我的输入不在表单中，我需要创建一个表单并给它一个 id 以供参考。但这也没有用。

我也尝试过使用 document.getElementById.("reset").reset();

这也没有用。

我迷路了！

function clearInputs(){
document.getElementById("reset").value = "";
}

---

     <div class="container">

    <div class="cell-1" id="centerElement">
        <div id="cell-1-nest-l"></div>
        <div id="cell-2-nest-l"></div>
        <div id="cell-3-nest-l"></div>
        <div id="cell-4-nest-l"><h3>your name</h3></div>
        <div id="cell-5-nest-l"></div>
        <div id="cell-6-nest-l"><input type="text" class="nameStyle1" id="nameInput1" class="reset"></div>

    <div class="cell-2" id="centerElement" ><img onclick="getSum();" src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt=""></div>

    <div class="cell-3" id="centerElement" >
            <div id="cell-1-nest"></div>
            <div id="cell-2-nest"></div>
            <div id="cell-3-nest"><h3>their name</h3></div>
            <div id="cell-4-nest"></div>
            <div id="cell-5-nest"><input type="text" class="nameStyle1" id="nameInput2"></div>
            <div id="cell-6-nest"></div>


            </div>

    <div class="cell-4" id="result1">
        <input type="date" class="dateStyle1" id="dateInput1">
            </div>

    <div class="cell-5"><input type="button" value="Reset" onclick="clearInputs();"></div>

    <div class="cell-6" id="result2"> 
        <input type="date" class="dateStyle2" id="dateInput2" placeholder="Their Bday">
            </div>
    <div class="cell-7"></div>

    <div class="cell-8"></div>

    <div class="cell-9"></div>

Answer 1

在开始编写代码之前：如果要将表单的字段重置为其初始值，则根本不需要编写任何代码。只需在表单中使用input type="reset"：

<input type="reset" value="Reset">

<form>
<div class="container">

        <div class="cell-1" id="centerElement">
            <div id="cell-1-nest-l"></div>
            <div id="cell-2-nest-l"></div>
            <div id="cell-3-nest-l"></div>
            <div id="cell-4-nest-l"><h3>your name</h3></div>
            <div id="cell-5-nest-l"></div>
            <div id="cell-6-nest-l"><input type="text" class="nameStyle1 reset" id="nameInput1"></div>
           
  </div>

        <div class="cell-2" id="centerElement" ><img onclick="getSum();" src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt=""></div>

        <div class="cell-3" id="centerElement" >
                <div id="cell-1-nest"></div>
                <div id="cell-2-nest"></div>
                <div id="cell-3-nest"><h3>their name</h3></div>
                <div id="cell-4-nest"></div>
                <div id="cell-5-nest"><input type="text" class="nameStyle1" id="nameInput2"></div>
                <div id="cell-6-nest"></div>
                
            
                </div>

        <div class="cell-4" id="result1">
            <input type="date" class="dateStyle1" id="dateInput1">
                </div>
                
        <div class="cell-5"><input type="reset" value="Reset""></div>
                    
        <div class="cell-6" id="result2"> 
            <input type="date" class="dateStyle2" id="dateInput2" placeholder="Their Bday">
                </div>
        <div class="cell-7"></div>

        <div class="cell-8"></div>

        <div class="cell-9"></div>
            

</div>
</form>

---

但是你的代码：

您的input 的id 是nameInput1，而不是reset（reset 是它的类）。请改用该 ID：

document.getElementById("nameInput1").value = "";

或在课程中使用querySelector（如果只有一个）或querySelectorAll（如果有多个）：

// If there will only ever be one
document.querySelector(".reset").value = "";

// If there will be more than one
document.querySelectorAll(".reset").forEach(function(input) {
    input.value = "";
});

如果您使用第二个选项，您可能需要在旧版浏览器上填充 forEach；我的answer here 展示了如何。

请注意，您的某些元素上有多个class=""。你不能这样做，除了第一个之外，所有的都被忽略了。如果您想在一个元素上使用多个类，请将所有类放在一个 class="" 中，并用空格分隔。

这是一个清除多个inputs 的示例，所有reset 类：

function clearInputs() {
    document.querySelectorAll(".reset").forEach(function(input) {
        input.value = "";
    });
}

 <div class="container">

<div class="cell-1" id="centerElement">
    <div id="cell-1-nest-l"></div>
    <div id="cell-2-nest-l"></div>
    <div id="cell-3-nest-l"></div>
    <div id="cell-4-nest-l"><h3>your name</h3></div>
    <div id="cell-5-nest-l"></div>
    <div id="cell-6-nest-l"><input type="text" class="nameStyle1 reset" id="nameInput1"></div>
<div class="cell-2" id="centerElement" ><img onclick="getSum();" src="file:///Users/Nineborn/Downloads/My%20Post%20(5).png" alt=""></div>

<div class="cell-3" id="centerElement" >
        <div id="cell-1-nest"></div>
        <div id="cell-2-nest"></div>
        <div id="cell-3-nest"><h3>their name</h3></div>
        <div id="cell-4-nest"></div>
        <div id="cell-5-nest"><input type="text" class="nameStyle1 reset" id="nameInput2"></div>
        <div id="cell-6-nest"></div>


        </div>

<div class="cell-4" id="result1">
    <input type="date" class="dateStyle1 reset" id="dateInput1">
        </div>

<div class="cell-5"><input type="button" value="Reset" onclick="clearInputs();"></div>

<div class="cell-6" id="result2"> 
    <input type="date" class="dateStyle2 reset" id="dateInput2" placeholder="Their Bday">
        </div>
<div class="cell-7"></div>

<div class="cell-8"></div>

<div class="cell-9"></div>

Answer 2

document.getElementById("reset") 搜索一个似乎不存在的 id="reset" 元素，这就是为什么什么都不会重置。

如果您的 <input> 在 <form> 中，您可以使用 <input type="reset"> 重置所有表单值 (https://www.w3schools.com/tags/att_input_type_reset.asp)

你可以试试

document.getElementById("nameInput2").value = ""; 

并查看它是否适用于该特定元素

Answer 3

<div id="cell-6-nest-l">
  <input type="text" class="nameStyle1" id="nameInput1" class="reset">
</div>

这里的类被重置，你使用的是getElementById("reset")，这是错误的。

使用以下之一：

document.getElementById("nameInput1").value = "";

document.getElementByClass("reset").value = "";