html/javascript - Clear textboxes and focus onClick

Question

I am trying to clear a textbox and focus on it after clicking a button in an HTML form using JavaScript. I have searched and I am doing what I am seeing others do. For some reason, it's just not working. Am I missing something?

 <button type="button" value="ButtonTwo" onclick="clear();">CLEAR and focus</button>

<script type="text/javascript">
function calculate(){
var  price = document.getElementById("Enter_Price").value;
var priceNum = Number(price);
var discount = document.getElementById("Discount").value;
var discountNum = Number(discount);
if(priceNum <= 0){

    window.alert("Please enter a price that is greater than 0.");
    document.getElementById('Enter_Price').focus();
    }
else{
    if(discountNum < 0 || discountNum > 100){
    window.alert("Please enter a value that is between 0 and 100.");
    document.getElementById('Discount').focus();
    }
    else{

    var result = priceNum * (1-(discountNum/100));
    document.getElementById("Result").value = "$" + result.toFixed(2);

    }

}

}
 function clear(){

document.getElementById("Enter_Price").value = "";
document.getElementById('Enter_Price').focus();

}
</script>

score 0 · Answer 1 · edited May 02 '17 at 10:33

0

Change func name

function clear1(){
  document.getElementById("Enter_Price").value = "";
  document.getElementById('Enter_Price').focus();
}

<input id="Enter_Price" type="text" value="100">
<button onclick="clear1()">CLEAR and focus</button>

edited May 02 '17 at 10:33

Jose Marques

748
1
6
22

answered May 02 '17 at 02:08

Vin

97
4

Jose Marques · Answer 2 · 2017-05-02T06:14:06.260

Your error it's the trigger button.

<button type="button" value="ButtonTwo" onclick="**clear();**">CLEAR and focus</button>

It should be like this:

<button type="button" value="ButtonTwo" onclick="clear1()">CLEAR and focus</button>

I like to use the event listener.

document.getElementById("delete").addEventListener("click", clear);

document.getElementById("delete").addEventListener("click", clear);
function clear(){

document.getElementById("input1").value = "";
document.getElementById("input1").focus();

}

<input id = "input1" type = "text">

<button id ="delete" type="button" value="ButtonTwo" >CLEAR and focus</button>

score 0 · Answer 3 · edited May 23 '17 at 12:18

Refer to this excellent answer on why clear doesn't' work as intended. Is “clear” a reserved word in Javascript?

As for clearing details, you want to attach the 'click' event to your button once the dom is available/completed loading. Refrain from creating inline handlers.

function initApplication() {
  document.getElementById('hello').addEventListener('click', function() {
    document.getElementById("Enter_Price").value = "";
    document.getElementById('Enter_Price').focus();
  })
}

/*
Wait for the document to "complete" loading, then initiate your application.
*/
document.onreadystatechange = function() {
  if (document.readyState === "complete") {
    initApplication();
  }
}

<input type='number' id='Enter_Price' />
<button id='hello'>
  Click &amp; Clear
</button>

html/javascript - Clear textboxes and focus onClick

3 Answers3