html/javascript - 清除文本框并专注于点击答案

【问题标题】：html/javascript - Clear textboxes and focus onClickhtml/javascript - 清除文本框并专注于点击
【发布时间】：2017-09-29 10:44:09
【问题描述】：

在使用 JavaScript 单击 HTML 表单中的按钮后，我正在尝试清除文本框并专注于它。我已经搜索过，我正在做我看到其他人所做的事情。出于某种原因，它只是不工作。我错过了什么吗？

 <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>

【问题讨论】：

标签： javascript html textbox focus

【解决方案1】：

更改函数名称

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>

【讨论】：

【解决方案2】：

你的错误是触发按钮。

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

应该是这样的：

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

我喜欢使用事件监听器。

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>

【讨论】：

【解决方案3】：

请参阅这个出色的答案，了解为什么 clear 不能按预期工作。 Is “clear” a reserved word in Javascript?

至于清除细节，一旦 dom 可用/完成加载，您希望将“点击”事件附加到您的按钮。避免创建内联处理程序。

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>

【讨论】：