单击按钮时，我想使用 JavaScript 将文本字段的值设置为零

Question

我想要删除按钮将文本字段值设置为零

在此处输入图像描述

HTML 代码

 <tr>
        <th scope="row">1</th>
        <td>French Fries</td>
        <td>&#8377; 110</td>
        <td>
          <input type="number" value="0" min="0" max="5" step="1" name="item1"/>
          <button onclick="buttonClick(this)" type="button" class="btn btn-success btn-sm">ADD</button>
          <button id="qty" onclick="deleteClick(this)" class="btn btn-danger btn-sm rounded-1" type="button" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash"></i></button>
        </td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Garlic Bread</td>
        <td>&#8377; 99</td>
        <td>
          <input type="number" value="0" min="0" max="5" step="1" name="item2"/>
          <button onclick="buttonClick(this)" type="button" class="btn btn-success btn-sm">ADD</button>
          <button id = "qty" onclick="deleteClick(this)" class="btn btn-danger btn-sm rounded-1" type="button" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash"></i></button>
        </td>
      </tr>

JavaScript

function deleteClick(element) {
  let qtyBox = document.getElementById("qty");
   qtyBox.Value = parseInt("0");
  }  

Answer 1

如果您在单击按钮时将输入的名称传递给 function，那么您可以直接定位并更改值。

请注意，为了简单起见，我删除了添加按钮以演示删除功能。

 function deleteClick(name) { document.getElementsByName(name)[0].value = 0; }

 <table> <tr> <th scope="row">1</th> <td>French Fries</td> <td>&#8377; 110</td> <td> <input type="number" value="3" min="0" max="5" step="1" name="item1"/> <button id="qty1" onclick="deleteClick('item1')" class="btn btn-danger btn-sm rounded-1" type="button" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash"></i>Delete</button> </td> </tr> <tr> <th scope="row">2</th> <td>Garlic Bread</td> <td>&#8377; 99</td> <td> <input type="number" value="2" min="0" max="5" step="1" value="2" name="item2"/> <button id = "qty2" onclick="deleteClick('item2')" class="btn btn-danger btn-sm rounded-1" type="button" data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash"></i>Delete</button> </td> </tr> </table>

Answer 2

如果您想使用 getElementById 来 go，请在您的两个元素中包含“id”属性，例如“qty1”、“qty2”，并将其传递给您的 on clear 函数！

 function deleteClick(element) { if(element.id === "qty1") { document.getElementById("qty1").value = parseInt("0"); } if(element.id === "qty2") { document.getElementById("qty2").value = parseInt("0"); } }

 <tr> <th scope="row">1</th> <td>French Fries</td> <td>&#8377; 110</td> <td> <input type="number" id="qty1" value="0" min="0" max="5" step="1" name="item1"/> <button onclick="buttonClick(this)" type="button" class="btn btn-success btn-sm">ADD</button> <button id="qty" onclick="deleteClick(qty1)" class="btn btn-danger btn-sm rounded-1" type="button" data-toggle="tooltip" data-placement="top" title="Delete">Clear</button> </td> </tr> <tr> <th scope="row">2</th> <td>Garlic Bread</td> <td>&#8377; 99</td> <td> <input type="number" id="qty2" value="0" min="0" max="5" step="1" name="item2"/> <button onclick="buttonClick(this)" type="button" class="btn btn-success btn-sm">ADD</button> <button id = "qty" onclick="deleteClick(qty2)" class="btn btn-danger btn-sm rounded-1" type="button" data-toggle="tooltip" data-placement="top" title="Delete">Clear</button> </td> </tr>