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

发布于 2024-09-27 05:04:05 字数 2270 浏览 2 评论 0原文

我希望调用 clear() JS 函数来清除网页上某些输入字段中的文本值，但由于某种原因，该函数似乎未正确调用。我相信这可能是一个范围问题，但我不确定。

这是我的标记、脚本和样式，目前为了便于使用而保存在一起，但一旦脚本完成，将进行修改：

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆沫 2024-10-04 05:04:05

您必须重命名“clear”方法。尝试将其命名为“clearFields”或其他名称。 (;

另外，如果您只想重置表单字段，您也可以这样做：
onClick="this.form.reset()"

回复收藏 0 原文

一梦浮鱼 2024-10-04 05:04:05

您可以通过使用完全避免函数命名问题：

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

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

这实际上是 Web 开发人员添加事件处理程序的首选方法，因为它可以避免 HTML 代码与内联 JavaScript 片段混乱，同时保留跨浏览器兼容性。

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.

回复收藏 0 原文

~没有更多了~