CODEWITHSUNDEEP
javascripthtml
Hemanshu Dharmik
Hemanshu Dharmik

Reputation: 29

On button click I want to set the value of text field to zero using JavaScript

I want delete button to set the text field value to zero

enter image description here

HTML CODE

 <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");
  }

Upvotes: 2

Views: 1449

Answers (2)

Santa
Santa

Reputation: 377

If you want to go with getElementById, kindly include 'id' attribute to both of your elements such as 'qty1', 'qty2' and pass it to your on clear function!

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>

Upvotes: 1

gavgrif
gavgrif

Reputation: 15489

If you pass the name of the input to the function on the button click then you can directly target that and alter the value.

Note that I removed the add buttons for simplicity to demonstrate the delete functionality.

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>

Upvotes: 1

Related Questions