Fatal编程技术网
  • javascript/
  • Javascript “显示”；未捕获引用错误：未定义表单"；在控制台中

Javascript “显示”；未捕获引用错误：未定义表单"；在控制台中

javascript html

Javascript “显示”；未捕获引用错误：未定义表单"；在控制台中,javascript,html,Javascript,Html,我是一个完全的初学者，目前正在学习前端web开发。作为第一个项目，我创建了一个简单的计算器。当我向一个年轻人学习时，我跟着他走。但出现的问题是，每当我单击按钮时，它都不会在显示栏中显示数字，并向我显示错误“未捕获引用错误：未定义表单”。我目前对此一无所知，请帮助我。我只是好奇我犯了什么错 <!DOCTYPE html> <html> <head> <title>Calculator</title>

我是一个完全的初学者，目前正在学习前端web开发。作为第一个项目，我创建了一个简单的计算器。当我向一个年轻人学习时，我跟着他走。但出现的问题是，每当我单击按钮时，它都不会在显示栏中显示数字，并向我显示错误“未捕获引用错误：未定义表单”。我目前对此一无所知，请帮助我。我只是好奇我犯了什么错

    <!DOCTYPE html>
    <html>
    <head>
    <title>Calculator</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>   
    <body>
    <div class="container">
        <form class="form">
            <div class="display">
                <input name="displayResult" type="text" placeholder="0" />
            </div>
            <div class="buttons">
                <div class="row">
                    <input class="btn" type="button" name="b7" value="7" onclick="func(b7.value)">
                    <input class="btn" type="button" name="b8" value="8" onclick="func(b8.value)">
                    <input class="btn" type="button" name="b9" value="9" onclick="func(b9.value)">
                    <input class="btn" type="button" name="plus" value="+" onclick="func(plus.value)">
                </div>

                <div class="row">
                    <input class="btn" type="button" name="b4" value="4" onclick="func(b4.value)">
                    <input class="btn" type="button" name="b5" value="5" onclick="func(b5.value)">
                    <input class="btn" type="button" name="b6" value="6" onclick="func(b6.value)">
                    <input class="btn" type="button" name="minus" value="-" onclick="func(minus.value)">
                </div>

                <div class="row">
                    <input class="btn" type="button" name="b1" value="1" onclick="func(b1.value)">
                    <input class="btn" type="button" name="b2" value="2" onclick="func(b2.value)">
                    <input class="btn" type="button" name="b3" value="3" onclick="func(b3.value)">
                    <input class="btn" type="button" name="mul" value="*" onclick="func(mul.value)">
                </div>

                <div class="row">
                    <input class="btn" type="button" name="b0" value="0" onclick="func(b0.value)">
                    <input class="btn" type="button" name="bd" value="." onclick="func(bd.value)">
                    <input class="btn" type="button" name="divv" value="/" onclick="func(divv.value)">
                    <input class="equal" type="button"  value="=" onclick="displayResult.value=eval(displayResult.value)">
                </div>

            </div>
        </form>
    </div>

    <script>
        function func(result) {
            form.displayResult.value = form.displayResult.value + result;
        }
    </script>
</body>
问题是您没有定义
表单
变量。在javascript中，所有未声明的变量的值均为
undefined

要解决此问题，只需在
func
中添加
var form=document.getElementByClassName（'form'）[0]

引用：

表单对javascript没有任何意义。因此，它没有定义。您需要首先在
DOM
中获取表单：


const form = document.querySelector("form.form");
// would be safer if you gave the form an id but doesn't matter in this case

// then you can change the value
form.displayValue.value += result;
快速查看
func（）中的添加
让form=document.getElementById（'form'）
：




计算器
函数func（结果）{
让form=document.getElementById（'form'）
form.displayResult.value=form.displayResult.value+结果；
}

它不起作用，因为您的
没有
id
或
name
属性



如果您想像给定的代码一样访问元素而不查询DOM，那么应该给元素一个
id
或
name
属性，然后它成为
window
的属性（一个全局变量），您可以直接从JavaScript访问它





函数func（结果）{
控制台日志（表格）；
form.displayResult.value=数字（form.displayResult.value）+数字（结果）；
}




此处未定义
表单
。您需要做的是将输入字段作为对象，并更改其文本


函数func（结果）{
让输入=document.getElementById（“输入字段”）；
输入值+=结果；
}



在此之前，将
id
添加到
input
标记：“
”输入字段“
”
为什么您希望javascript中有一个名为
form
？”的对象？所有未声明的变量都有一个未定义的值“-不，它们只是不存在，因此
ReferenceError
我想我想所有未启动的变量都有未定义的值


const form = document.querySelector("form.form");
// would be safer if you gave the form an id but doesn't matter in this case

// then you can change the value
form.displayValue.value += result;