Javascript计算器不能正常工作

javascript calculator not working properly

本文关键字：工作 常工作 计算器 不能 Javascript      更新时间：2023-09-26

嗨，所以我是新的javascript，我正试图使一个简单的计算器使用HTML和js。然而，我遇到了一个问题，我按下按钮来计算答案，它不会做任何事情。我在网上试了一下，结果它给了我错误的答案。这里是代码，任何人都可以帮助。谢谢——

<!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 = "answerswer"></p>
</body>
</html>

表单，包括onClick条件，没有GET/POST方法，一般使用button。

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

我猜你是添加相同的变量两次?

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

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

<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 = "answerswer"></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>

主要的问题是你正在添加事件点击元素等于，但在这些时刻，元素等于不存在。

包装你的文档。getElementById到窗口。Onload函数说javascript: "当所有文档完成加载时，添加事件click to element = "

试试这个:

    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;
        };
    }

另一个重要的事情，我添加到你的解析，这是为了确保转换是一个数字到十进制模式

" parseInt()函数的作用是:解析字符串并返回整数。

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

如果省略了radix参数，JavaScript假定如下:

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

来源:parseInt use

我现在修复了它，我必须在一个窗口中包装我的代码。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 = "answerswer"></p>
</body>
</html>
相关文章：