Question

我是自学JavaScript，我对如何将用户输入作为参数传递感到困惑。我仍然有Python的心态，这就是为什么我认为我在挣扎。任何帮助表示赞赏。

function userInput(num1, num2) {
  var num1 = parseInt(document.getElementById("number1").value);
  var num2 = parseInt(document.getElementById("number2").value);

  return num1, num2;
}



function addition(num1, num2) {
  document.getElementById("result").innerHTML = (num1 + num2);
  alert("Your answer is " + (num1 + num2));
  return addition;
}

<form name="calculator">
  Number 1: <input type="text" id="number1"> Number 2: <input type="text" id="number2">

  <input type="button" value="ADD" onclick="javaScript:addition()">
  <input type="button" value="SUB" onclick="javaScript:subtraction()">
  <input type="button" value="MUL" onclick="javaScript:multiply()">
  <input type="button" value="DIV" onclick="javaScript:division()">
  <input type="button" value="MOD" onclick="javaScript:modulus()">

</form>

<p>The result is: <br>
  <span id="result"></span>
</p>

Answer 1

您需要获取addition中的值，并且您不需要userInput功能。以下是您的更新代码：

＆＃13;

function addition() {
  var num1 = parseInt(document.getElementById("number1").value);
  var num2 = parseInt(document.getElementById("number2").value);
  var sumOfNumbers = num1 + num2;
  document.getElementById("result").innerHTML = sumOfNumbers;
  alert("Your answer is " + sumOfNumbers);
}

＆＃13;

<form name="calculator">
  Number 1: <input type="text" id="number1"> Number 2: <input type="text" id="number2">

  <input type="button" value="ADD" onclick="javaScript:addition()">
  <input type="button" value="SUB" onclick="javaScript:subtraction()">
  <input type="button" value="MUL" onclick="javaScript:multiply()">
  <input type="button" value="DIV" onclick="javaScript:division()">
  <input type="button" value="MOD" onclick="javaScript:modulus()">

</form>

<p>The result is: <br>
  <span id="result"></span>
</p>

＆＃13;

Answer 2

创建一个按钮并调用添加功能

＆＃13;

function add(num1, num2) {
  var num1 = parseInt(document.getElementById("number1").value);
  var num2 = parseInt(document.getElementById("number2").value);
  addition(num1, num2)
  return num1, num2;
}



function addition(num1, num2) {
  document.getElementById("result").innerHTML = (num1 + num2);
  alert("Your answer is " + (num1 + num2));
  return addition;
}

＆＃13;

<input type="text" id="number1">
<input type="text" id="number2">
<button onclick="add()">Add</button>
<div id="result"></div>

＆＃13;

Answer 3

您无需传递参数。请尝试以下方法：

function addition(){
  var num1 = parseInt(document.getElementById("number1").value);
  var num2 = parseInt(document.getElementById("number2").value);
  document.getElementById("result").textContent = num1 + num2;
  alert("Your answer is " + (num1 + num2));
}

Number1: <input type="text" id="number1"/><br>
Number2: <input type="text" id="number2"/><br>
<button id="add" onclick="addition()">Add</button>
Result: <label type="text" id="result"/>

Answer 4

使用事件侦听器执行此操作的不同方法。在我看来哪个更清洁一点。只是给你另一种选择。

JSFIDDLE：https://jsfiddle.net/py70618w/10/＆lt; ---你可以看到它的实际效果。

<强> HTML

## views
<div class="container #{school_color_class(@school)}">
  <h3>Example</h3>
</div>

## helpers
def school_color_class(school)
  return 'bg-primary' if school.color.blank?

  "bg-#{school.color}"
end

重构Javascript ：

<form name="calculator">
 Number 1: <input type="text" id="number1"> Number 2: <input type="text" 
 id="number2">

 <input type="button" id="add" value="ADD">
 <input type="button" value="SUB" onclick="javaScript:subtraction()">
 <input type="button" value="MUL" onclick="javaScript:multiply()">
 <input type="button" value="DIV" onclick="javaScript:division()">
 <input type="button" value="MOD" onclick="javaScript:modulus()">

</form>

<p>The result is: <br>
 <span id="result"></span>
</p>

如何为简单的计算器传递用户输入

4 个答案: