單擊按鈕時，我想使用 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>