Javascript btnCalculate\u onclick未定义？

我试图得到一个页面，当用户输入宽度和长度时，它会在文本框中计算周长。另外，与该地区。这是我到目前为止的代码，我一直认为btnCalculate\u onclick（）是未定义的

<script src="Lab2-AreaPerimeter.js"></script>

    <p>
        Length:<input type="text" id="txtLength">
        <br>
        Width:<input type="text" id="txtWidth">
    </p>
    <p>
        Area:<input type="text" readonly="readonly" id="txtArea">
        <br>
        Perimeter:<input type="text" readonly="readonly" id="txtPerimeter">
    </p>
    <p>
        <input type="button" value="Calculate" id="btnCalculate_onclick()" onclick="btnCalculate_onclick()">
        <input type="reset">
    </p>
</form>
<noscript>This website requires JavaScript to be enabled.</noscript>

---

看看这把小提琴：

我清理了你的

btnCalculate\u onclick

函数和一些html：

function btnCalculate_onclick() {
// get textboxes and assign to variables
    var lengthTextbox = document.getElementById("txtLength");
    var widthTextbox = document.getElementById("txtWidth");
    var areaTextbox = document.getElementById("txtArea");
    var perimeterTextbox = document.getElementById("txtPerimeter");

    //get user input value from corresponding textboxes
    var num1 = lengthTextbox.value;
    var num2 = widthTextbox.value;

    //calculate and display the sum
    var sum= num1 * 2 + num2 * 2
    perimeterTextbox.value=sum
}

您的脚本src可能不正确，这就是为什么它说函数未定义

您的

Lab2 areaperiment.js文件是否与您的网页位于同一目录中

您是否尝试过使用浏览器开发人员工具进行故障排除

您可以尝试以下方法：


确保在开发者工具控制台中正确加载JS文件。如果没有，您应该看到如下内容：GET…/Lab2-areaperiment.js 404（未找到）
在
btnCalculate\u onclick
函数中设置断点
在
btnCalculate\u onclick
函数的开头抛出
alert（）
或
console.log（）
，查看是否有输出
在页面上的脚本标记中定义函数，并确保其运行
看看这把小提琴：


我清理了你的
btnCalculate\u onclick
函数和一些html：

function btnCalculate_onclick() {
// get textboxes and assign to variables
    var lengthTextbox = document.getElementById("txtLength");
    var widthTextbox = document.getElementById("txtWidth");
    var areaTextbox = document.getElementById("txtArea");
    var perimeterTextbox = document.getElementById("txtPerimeter");

    //get user input value from corresponding textboxes
    var num1 = lengthTextbox.value;
    var num2 = widthTextbox.value;

    //calculate and display the sum
    var sum= num1 * 2 + num2 * 2
    perimeterTextbox.value=sum
}

您的脚本src可能不正确，这就是为什么它说函数未定义

您的
Lab2 areaperiment.js文件是否与您的网页位于同一目录中

您是否尝试过使用浏览器开发人员工具进行故障排除

您可以尝试以下方法：


确保在开发者工具控制台中正确加载JS文件。如果没有，您应该看到如下内容：GET…/Lab2-areaperiment.js 404（未找到）
在
btnCalculate\u onclick
函数中设置断点
在
btnCalculate\u onclick
函数的开头抛出
alert（）
或
console.log（）
，查看是否有输出
在页面上的脚本标记中定义函数，并确保其运行
以下是一个工作示例。文档中的每个元素都将是一个JS对象，命名为它的ID，因此您不应该像命名元素ID一样命名函数

<form>
    <p>
        Length:<input type="text" id="txtLength">
        <br>
        Width:<input type="text" id="txtWidth">
    </p>
    <p>
        Area:<input type="text" readonly="readonly" id="txtArea">
        <br>
        Perimeter:<input type="text" readonly="readonly" id="txtPerimeter">
    </p>
    <p>
        <input type="button" value="Calculate" id="btbCalculate" onclick="btbCalculate_onclick()">
        <input type="reset">
    </p>
    <script type="text/javascript">
        function btbCalculate_onclick() {
            // get textboxes and assign to variables
            var lengthTextbox = document.getElementById("txtLength");
            var widthTextbox = document.getElementById("txtWidth");
            var areaTextbox = document.getElementById("txtArea");
            var perimeterTextbox = document.getElementById("txtPerimeter");
            //get user input value from corresponding textboxes
            var num1 = lengthTextbox.value;
            var num2 = widthTextbox.value;
            //calculate and display the sum
            var sum = num1 * 2 + num2 * 2;
            perimeterTextbox.value = sum;
        }
    </script>
</form>



长度：


宽度：


面积：


周长：



函数btbCalculate_onclick（）{
//获取文本框并分配给变量
var lengthTextbox=document.getElementById（“txtLength”）；
var-widthTextbox=document.getElementById（“txtWidth”）；
var areaTextbox=document.getElementById（“txtArea”）；
var perimeterTextbox=document.getElementById（“txtPerimeter”）；
//从相应的文本框中获取用户输入值
var num1=lengthTextbox.value；
var num2=宽度文本框.value；
//计算并显示总和
var总和=num1*2+num2*2；
perimeterTextbox.value=总和；
}
下面是一个工作示例。文档中的每个元素都将是一个JS对象，命名为它的ID，因此您不应该像命名元素ID一样命名函数

<form>
    <p>
        Length:<input type="text" id="txtLength">
        <br>
        Width:<input type="text" id="txtWidth">
    </p>
    <p>
        Area:<input type="text" readonly="readonly" id="txtArea">
        <br>
        Perimeter:<input type="text" readonly="readonly" id="txtPerimeter">
    </p>
    <p>
        <input type="button" value="Calculate" id="btbCalculate" onclick="btbCalculate_onclick()">
        <input type="reset">
    </p>
    <script type="text/javascript">
        function btbCalculate_onclick() {
            // get textboxes and assign to variables
            var lengthTextbox = document.getElementById("txtLength");
            var widthTextbox = document.getElementById("txtWidth");
            var areaTextbox = document.getElementById("txtArea");
            var perimeterTextbox = document.getElementById("txtPerimeter");
            //get user input value from corresponding textboxes
            var num1 = lengthTextbox.value;
            var num2 = widthTextbox.value;
            //calculate and display the sum
            var sum = num1 * 2 + num2 * 2;
            perimeterTextbox.value = sum;
        }
    </script>
</form>



长度：


宽度：


面积：


周长：



函数btbCalculate_onclick（）{
//获取文本框并分配给变量
var lengthTextbox=document.getElementById（“txtLength”）；
var-widthTextbox=document.getElementById（“txtWidth”）；
var areaTextbox=document.getElementById（“txtArea”）；
var perimeterTextbox=document.getElementById（“txtPerimeter”）；
//从相应的文本框中获取用户输入值
var num1=lengthTextbox.value；
var num2=宽度文本框.value；
//计算并显示总和
var总和=num1*2+num2*2；
perimeterTextbox.value=总和；
}
这是完整的代码吗？有一个语法错误，缺少“}”很抱歉，我在代码中有这个错误，只是在将它放到网页btnCalculate_onclick在lab2-AreaPermiture.js内时遇到问题？变量num1/num2也需要等号而不是减号是的，它作为函数btnCalculate_onclick（）位于代码顶部。我改成等号还是没有骰子那是完整的代码吗？有一个语法错误，缺少“}”很抱歉，我在代码中有这个错误，只是在将它放到网页btnCalculate_onclick在lab2-AreaPermiture.js内时遇到问题？变量num1/num2也需要等号而不是减号是的，它作为函数btnCalculate_onclick（）位于代码顶部。我改为等号仍然没有骰子我不知道一个元素的
id
和一个函数的名称不能相同。谢谢你支持我的回答@adamMain检查我的答案，它解释了为什么您的函数未定义！我不知道元素的
id
和函数的名称不能相同。谢谢你支持我的回答@adamMain检查我的答案，它解释了为什么您的函数未定义！