javascript函数可能由于范围问题而无法调用

Question

I am looking to call my clear() JS function to clear the text values in some input fields on my webpage, but for some reason, the function doesn't appear to be called correctly. 我希望调用我的clear() JS函数来清除网页上某些输入字段中的文本值，但是由于某些原因，该函数似乎未正确调用。 I believe this may be a scope issue, but I'm not sure. 我认为这可能是范围问题，但我不确定。

Here is my markup, script and styling kept together for ease-of-use currently, but will be mended once scripting is finalized: 这是我的标记，脚本和样式，目前为了易于使用而保留在一起，但是一旦脚本确定完成，将对其进行修改：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Quadratic Root Finder</title>
<script>
function calculateQuad()
{
    var inputa = document.getElementById('variablea').value;
    var inputb = document.getElementById('variableb').value;
    var inputc = document.getElementById('variablec').value;

    root = Math.pow(inputb,2) - 4 * inputa * inputc;
    root1 = (-inputb + Math.sqrt(root))/2*inputa
    root2 = (-inputb + Math.sqrt(root))/2*inputa 

    document.getElementById('root1').value = root1;
    document.getElementById('root2').value = root2;
    if(root<'0')
    {
        alert('This equation has no real solution.')
    }
    else {
        if(root=='0')
        {
            document.getElementById('root1').value = root1
            document.getElementById('root2').value = 'No Second Answer'
        }
        else {
            document.getElementById('root1').value = root1
            document.getElementById('root2').value = root1
            }
        }
}
function clear()
{
    document.getElementById('variablea').value = "";
    document.getElementById('variableb').value = "";
    document.getElementById('variablec').value = "";
}
</script>
<style>
#container
{
    text-align: center;
}
</style>
</head>

<body>
<div id="container">
<h1>Quadratic Root Finder!</h1>
<form id="form1">
    a:<input id="variablea" value="" type="text">
    <br/>
    b:<input id="variableb" value="" type="text">
    <br />
    c:<input id="variablec" value="" type="text">
    <br />
    <input id="calculate" value="Calculate!" type="button" onClick="calculateQuad()">
    <input id="erase" value="Clear" type="button" onClick="clear()">
    <br />
    <br />
    Roots:
    <br />
    <input id="root1" type="text" readonly>
    <br />
    <input id="root2" type="text" readonly>
</form>
</div>
</body>
</html>

Answer 1

You must rename the 'clear' method. 您必须重命名“清除”方法。 Try naming it 'clearFields' or something. 尝试将其命名为“ clearFields”或其他名称。 (; （;

Also, if you only want to reset the form fields you can also do this: onClick="this.form.reset()" 另外，如果您只想重置表单字段，也可以执行以下操作：onClick =“ this.form.reset（）”

Answer 2

You can avoid the issue with function naming entirely by using: 您可以使用以下方法完全避免函数命名问题：

document.getElementById("calculate").onclick = function () {
    ...
};

document.getElementById("erase").onclick = function () {
    ...
};

This is actually a preferred method of adding event handlers by web developers because it avoids cluttering the HTML code with inline snippets of JavaScript while retaining cross-browser compatibility. 实际上，这是Web开发人员添加事件处理程序的首选方法，因为它避免了内联JavaScript代码段干扰HTML代码的同时保留了跨浏览器的兼容性。

javascript函数可能由于范围问题而无法调用

问题描述

2 个解决方案

解决方案1
2 已采纳 2010-10-12 00:41:49

解决方案2
1 2010-10-12 02:25:03

javascript函数可能由于范围问题而无法调用

问题描述

2 个解决方案

解决方案1 2 已采纳 2010-10-12 00:41:49

解决方案2 1 2010-10-12 02:25:03

解决方案1
2 已采纳 2010-10-12 00:41:49

解决方案2
1 2010-10-12 02:25:03