JavaScript 明文框输入无法正常工作答案

【问题标题】：JavaScript clear text box input not functioning properlyJavaScript 明文框输入无法正常工作
【发布时间】：2010-10-11 23:24:40
【问题描述】：

我知道这是一个令人尴尬的简单问题，但我无法弄清楚问题所在，这就是我问这个问题的原因，所以请不要重复这一点。

无论如何，我只是在这里做一些事情，当我测试我的页面以查看事情进展时，我意识到我的 calculate() 方法并没有像我想要的那样清除文本输入。

这是标记和脚本：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quadratic Root Finder</title>
<script>
function calculate(){
var valuea = document.form1.variablea.value;
var valueb = document.form1.variableb.value;
var valuec = document.form1.variablec.value;
document.form1.variablea.value = "";
document.form1.variableb.value = "";
document.form1.variablec.value = "";
}
</script>
</head>

<body>
<form name="form1">
    a:<input name="variablea" value="" type="text">
    <br/>
    b:<input name="variableb" value="" type="text">
    <br/>
    c:<input name="variablec" value="" type="text">
    <br/>
    <input name="calculate" value="Calculate!" type="button" onClick="calculate()">
</form>
</body>
</html>

如果你看到了什么请告诉我。

【问题讨论】：

标签： javascript forms input

【解决方案1】：

您可能想尝试使用其他名称。我试图调用“计算”函数，但它一直给我一个错误，说“计算”不是一个函数。但是当我调用函数“calculateQuad”并将 onClick 事件更改为调用“calculateQuad”时，它可以工作。

【讨论】：

嘿，谢谢！好主意，也许calculate 是关键字、保留名称或 JS 使用的任何术语。感谢那！ :) 编辑：忽略这一点，因为克里斯蒂安的回答显示了真正的原因。

【解决方案2】：

不太确定，但如果您不想迁移到 jQuery，可以尝试以下方法：

function calculate() {
    var inputa = document.getElementById('inputa');
    inputa.value = '';
}

只需测试一下，在其中一个输入框上有一个 id “inputa”。我只知道如何通过原始 Js 中的 id、name 或 tag 获取元素。当然，您可以使用这些方法之一将您的代码扩展为您想要的内容，以获取您的表单元素。

【讨论】：

感谢getElementById，我忘记了最简单的事情，比使用其他方法容易得多。

【解决方案3】：

在 onclick 方法内部有一个对您单击的项目的引用。它的名称与您放在项目上的名称相同，“计算”。这导致“计算”不是指函数，而是输入标签。

通过键入来解决此问题

onclick = "window.calculate()"

或重命名输入标签或函数的名称。

【讨论】：

哦！我明白了，现在很有意义，请忽略我对所选答案的评论。
@Rajat 不幸的是，不是，只是我在一些测试后发现的。我今天是不是也学到了一些新东西。如果我能找到它，我会回来的。

【解决方案4】：

将输入按钮的名称更改为其他名称：

<input name="calcul" value="Calculate!" type="button" onClick="calculate()">

它有效。由于计算函数直接位于全局对象下，我有一种奇怪的感觉，您的 name 属性以某种方式覆盖了它。

只是把它扔在那里。不过，我将更深入地了解为什么会发生这种情况。

【讨论】：