javascript - 如何在输入中显示加法结果

标签 javascript html

我正在尝试制作一个简单的计算器,只需按一下按钮即可将 2 个数字相加。我已经完成了 HTML 部分,但我不知道如何让按钮添加数字。我尝试过使用事件监听器,但我可能遗漏了一些东西。如果可以的话,请编写脚本,同时解释最重要的代码行。谢谢!

<html>
<head>
    <title>A calculator... I guess?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main">
    <div class="container" style="margin: 100px 200px 0 200px">
        <!-- Inputs -->
        <p>1st number</p>
        <input type="number" id="one">
        <p>2nd number</p>
        <input type="number" id="two>">
        <!-- Button -->
        <br>
        <br>
        <button id="add">Calculate</button>
        <!-- Result -->
        <p>Result</p>
        <input type="text" id="result">
    </div>
</div>
<script>
     
</script>
</body>
</html>

最佳答案

<html>
<head>
    <title>A calculator... I guess?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
  
<body>
<div class="main">
    <div class="container" style="margin: 100px 200px 0 200px">
        <!-- Inputs -->
        <p>1st number</p>
        <input type="number" id="one">
        <p>2nd number</p>
        <input type="number" id="two">
        <!-- Button -->
        <br>
        <br>
        <button id="add" onClick={calculate()}>Calculate</button>
        <!-- Result -->
        <p>Result</p>
        <input type="text" id="result">
    </div>
</div>
 <script>
    var elementOne =document.getElementById('one');
    var elementTwo =document.getElementById('two');
   
   function calculate(){
     one = parseInt(elementOne.value)
     two = parseInt(elementTwo.value)
     document.getElementById('result').value = one + two;
   }
</script>
</body>
</html>

关于javascript - 如何在输入中显示加法结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71196479/

相关文章:

javascript - 在 Angular 中动态重置 ng-form

Javascript getElementById null 错误

javascript - 解释在 Javascript 中使用引号来更改 CSS 中的背景图像

javascript - 在不知道 javascript 中的标签 ID 的情况下,如何通过 javascript 函数设置标签文本

javascript - 位图列表[i]未定义

jQuery 'if' 语句未被识别

javascript - Zurb Foundation 如何检测 javascript 组件?

javascript - 从iframe弹出父页面中的div(多个)

javascript - 日历热图 dc.js

javascript - 未捕获的类型错误 : Cannot read property 'setDirections' of undefined