Question

嗨所以我是javascript的新手，我正在尝试使用HTML和js制作一个简单的计算器。然而，我遇到了一个问题，我按下按钮来计算答案，它不会做任何事情。我在一个在线ide中尝试过，它只是给了我错误的答案。这里的代码可以任何人帮助。感谢 -

<!DOCTYPE html>
<html>
<head>
    <title>calculator</title>
    <script type="text/javascript">
    document.getElementById("equals").onclick = function() {
        var answer = parseInt(document.getElementById('number_1').value)+ parseInt(document.getElementById('number_1').value);
        document.getElementById('answer').innerHTML = answer;
    };
    </script>
</head>
<body>
            <input type="text" name="number_1" id = "number_1">
            <p>+</p>
            <input type="text" name="number_2" id = "number_2">
            <input type="submit" name="equals" id = "equals" value="=">
            <p id = "answer"></p>
</body>
</html>

Answer 1

您需要在同一输入中添加两次值，并且必须在创建按钮后设置事件处理程序。

<body>
    <input type="text" name="number_1" id = "number_1">
    <p>+</p>
    <input type="text" name="number_2" id = "number_2">
    <input type="submit" name="equals" id = "equals" value="=">
    <p id = "answer"></p>
    <script type="text/javascript">
    document.getElementById("equals").onclick = function() {
        var answer = parseInt(document.getElementById('number_1').value)+ parseInt(document.getElementById('number_1').value);
        document.getElementById('answer').innerHTML = answer;
    };
    </script>
</body>

Answer 2

表单包括没有GET/POST方法的onClick条件，通常使用button。

 <input type="button" name="equals" id="equals" value="=">

我猜你要两次添加相同的变量？

var answer = parseInt(document.getElementById('number_1').value)+ parseInt(document.getElementById('number_2').value);

Answer 3

主要问题是你将事件点击添加到元素等于，但在这一刻，元素等于不存在。

将你的document.getElementById包装成window.onload函数来说javascript：“当所有文件加载完成后，添加事件点击到元素等于”

试试这个：

    window.onload = function () {
        document.getElementById("equals").onclick = function() {
            var answer = parseInt(document.getElementById('number_1').value, 10)+ parseInt(document.getElementById('number_2').value, 10);
            document.getElementById('answer').innerHTML = answer;
        };
    }

我添加的另一件重要的事情，10你的parseint，这是为了确保转换为十进制模式的数字

“parseInt（）函数解析一个字符串并返回一个整数。

radix参数用于指定要使用的数字系统，例如，16（十六进制）的基数表示字符串中的数字应从十六进制数解析为十进制数。

如果省略radix参数，则JavaScript假定以下内容：

如果字符串以“0x”开头，则基数为16（十六进制）如果字符串以“0”开头，则基数为8（八进制）。此功能已弃用如果字符串以任何其他值开头，则基数为10（十进制）“

来源：parseInt use

Answer 4

我修复了它现在我必须将我的代码包装在window.onload

中

<!DOCTYPE html>
<html>
<head>
    <title>calculator</title>
    <script type="text/javascript">
    window.onload = function(){ 
        document.getElementById("equals").onclick = function() {
            var answer = parseInt(document.getElementById('number_1').value)+ parseInt(document.getElementById('number_2').value);
            document.getElementById('answer').innerHTML = answer;
        };
    };
    </script>
</head>
<body>
            <input type="text" name="number_1" id = "number_1">
            <p>+</p>
            <input type="text" name="number_2" id = "number_2">
            <button id = "equals">=</button>
            <p id = "answer"></p>
</body>
</html>

javascript计算器无法正常工作

4 个答案: