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

Question

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

我有一个按钮，它在点击时触发函数。

我哪里出问题了？我想可能是因为我的输入不是一个表单，我需要创建一个表单并给它一个id来引用。但这也没用。

我也尝试使用document.getElementById.(“重置”).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是它的类)。

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=""中。

下面是一个使用类input清除多个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(“重置”)搜索一个似乎不存在的带有id=“重置”的元素，这就是为什么什么都没有重置的原因。

如果您的<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 = "";