Javascript 输入类型上的getElementById.value返回未定义_Javascript_Html

Javascript 输入类型上的getElementById.value返回未定义

javascript html

Javascript 输入类型上的getElementById.value返回未定义,javascript,html,Javascript,Html,我试图提醒输入类型的值。警报给我“未定义” 我试着浏览了一些其他的帖子，但没有成功我的代码： <!DOCTYPE html> <html> <head> <title></title> <script> /* Global Vars */ var firstNumber = document.getElementById('firs

我试图提醒输入类型的值。警报给我“未定义”

我试着浏览了一些其他的帖子，但没有成功

我的代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <script>

            /* Global Vars */
            var firstNumber = document.getElementById('firstNumber').value;
            var secondNumber = document.getElementById('secondNumber').value;
            var plus = document.getElementById('plus');
            var minus = document.getElementById('minus');
            var times = document.getElementById('times');
            var divide = document.getElementById('divide');
            var result = document.getElementById('result');

            function cool() {
                //var sum = Number(firstNumber) + Number(secondNumber);

                alert(secondNumber);
            }
        </script>
    </head>
    <body>
        <input type="number" placeholder="Getal 1" id="firstNumber" /> <input type="number" placeholder="Getal 2" id="secondNumber" /><br><br>
        <input type="text" id="result" disabled /><br><br>
        <button id="plus">+</button> <button id="minus">-</button> <button id="times">x</button> <button id="divide">/</button>

        <button onClick="cool()">Test</button>
    </body>
</html>


/*全局变量*/
var firstNumber=document.getElementById（'firstNumber'）。值；
var secondNumber=document.getElementById（'secondNumber'）。值；
var plus=document.getElementById（'plus'）；
var减号=document.getElementById（'减号'）；
var times=document.getElementById（'times'）；
var divide=document.getElementById（'divide'）；
var result=document.getElementById（'result'）；
函数cool（）{
//var总和=编号（第一个编号）+编号（第二个编号）；
警报（第二号码）；
}






+-x/
试验

如果您在web控制台中查看，您会发现一个错误：

类型错误：无法读取null的属性值

“

这是因为您的代码正在执行以下操作：

var firstNumber = document.getElementById('firstNumber').value;

之前元素存在，这意味着

文档。getElementById（'firstNumber'）

为您提供

null

，在

null

上查找

值

会抛出错误（阻止该分步代码的所有其余部分运行，但不阻止创建

cool

函数，因为这是在运行任何分步代码之前首先完成的）。该错误会阻止

secondNumber

获取值，因此它会保留默认的

未定义的值，您可以在稍后调用cool
时看到该值
通常，除非您有特定的理由不这样做，否则请将脚本放在结束标记之前。特别是，将脚本放在标题中是一种反模式。因此（但还有更多的事情要做，请继续阅读）：
请注意，变量已不再是全局变量，因为它们很好地位于函数内部。通常，请避免使用全局变量，因为全局名称空间已经非常拥挤。
将脚本块移到html下面elements@karthikr现在没有任何提示。不过，可能是重复感谢您的回答，当我尝试此操作时，它不会发出任何警报。此外，应该将NTvar secondNumber=document.getElementById（'secondNumber'）.value；
移到cool（）中
那么调用函数时它会得到新的值吗？这是另一个问题：您正在读取页面加载时的输入值。如果您想在单击按钮时读取这些值，请将读取其值的代码移动到cool。
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="number" placeholder="Getal 1" id="firstNumber" /> <input type="number" placeholder="Getal 2" id="secondNumber" /><br><br>
        <input type="text" id="result" disabled /><br><br>
        <button id="plus">+</button> <button id="minus">-</button> <button id="times">x</button> <button id="divide">/</button>

        <button onClick="cool()">Test</button>
        <script>

            /* Global Vars */
            var firstNumber = document.getElementById('firstNumber').value;
            var secondNumber = document.getElementById('secondNumber').value;
            var plus = document.getElementById('plus');
            var minus = document.getElementById('minus');
            var times = document.getElementById('times');
            var divide = document.getElementById('divide');
            var result = document.getElementById('result');

            function cool() {
                //var sum = Number(firstNumber) + Number(secondNumber);

                alert(secondNumber);
            }
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="number" placeholder="Getal 1" id="firstNumber" /> <input type="number" placeholder="Getal 2" id="secondNumber" /><br><br>
        <input type="text" id="result" disabled /><br><br>
        <button id="plus">+</button> <button id="minus">-</button> <button id="times">x</button> <button id="divide">/</button>

        <button onClick="cool()">Test</button>
        <script>

        function cool() {
            var firstNumber = document.getElementById('firstNumber').value;
            var secondNumber = document.getElementById('secondNumber').value;
            var plus = document.getElementById('plus');
            var minus = document.getElementById('minus');
            var times = document.getElementById('times');
            var divide = document.getElementById('divide');
            var result = document.getElementById('result');

                //var sum = Number(firstNumber) + Number(secondNumber);

            alert(secondNumber);
        }
        </script>
    </body>
</html>