一个简单的计算器（只加）oop javascript答案

【问题标题】：A simple calculator (only add) oop javascript一个简单的计算器（只加）oop javascript
【发布时间】：2018-12-18 20:45:17
【问题描述】：

伙计们，我有一个基本的计算器 js 对象的问题，只能添加数字 input1 + input2 = input3。我不知道如何在输入 3（结果）中显示输入 1 和 2 的结果。从现在开始，我只需使用 show('1') 从输入中获取价值。这是我的代码

function calculator(){
    this.result = document.getElementById('3');
    this.show = function(id){
        var a =document.getElementById(id).value
        console.log(a);
    }
}

HTML

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
<label for="1">
<input type="text" id = '1'>
</label>
<br><br>
<label for="2">
<input type="text" id = '2'>
</label>
<br><br>  
<label for="3">
<input type="text" id = 3>
</label>
<button onclick="click()">+</button>
  <script src="jss.js"></script>

</body>

</html>

【问题讨论】：

你的 click() 函数在哪里？
´id`s 不应该是数字。应以字母或下划线开头。

标签： javascript

【解决方案1】：

您的代码中有几个问题。您的代码中没有定义click()，它应该是calculator()。您必须在计算之前转换该值。否则将发生字符串连接，因为输入值的默认类型是字符串。你可以使用parseFloat() 来做到这一点。

试试下面的方法：

function calculator(){
    document.getElementById('3').value = parseFloat(document.getElementById('1').value) + parseFloat(document.getElementById('2').value)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="1">
<input type="text" id = '1'>
</label>
<br><br>
<label for="2">
<input type="text" id = '2'>
</label>
<br><br>  
<label for="3">
<input type="text" id = '3'>
</label>
<button onclick="calculator()">+</button>

【讨论】：

【解决方案2】：

function calculator() {
  var item1 = parseFloat(document.getElementById('item1').value);
  var item2 = parseFloat(document.getElementById('item2').value);
  document.getElementById('item3').value = item1 + item2;
}

<input type="number" id="item1" value="0" oninput="calculator()">
<br><br>
<input type="number" id="item2" value="0" oninput="calculator()">
<br><br>
<input type="text" id="item3" disabled>
<button onclick="calculator()">+</button>

【讨论】：

【解决方案3】：

调用你的函数calculator()而不是click()，这实际上不是你设置的函数。

<button onclick="calculator()">+</button>

【讨论】：

【解决方案4】：

你可以这样做

您需要同时获取两个输入字段。从它们中提取值将它们更改为数字，然后在添加后将其添加到第三个输入。

function calculator(){
    let result = document.getElementById('3');
    let input1 = document.getElementById('1').value;
    let input2 = document.getElementById('2').value;
    let final = Number(input1) + Number(input2);
    result.value = final;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>
<label for="1">
<input type="text" id = '1'>
</label>
<br><br>
<label for="2">
<input type="text" id = '2'>
</label>
<br><br>  
<label for="3">
<input type="text" id = 3>
</label>
<button onclick="calculator()">+</button>

</body>

</html>

【讨论】：