如何在JavaScript中存储变量并进行数学运算？

Question

function Calculator() {
  num1 = document.getElementById('n1').value;
  num1 = parseInt(num1);
  num2 = document.getElementById('n2').value;
  num2 = parseInt(num2);

  if (num1 || num2 < 0) {
    number1 = num1 * -1;
    number2 = num2 * -1;
  } else {
    top = number1 % number2;
    div = num1 - top;
    bottom = div / number2;
  }

  document.getElementById('OutputDiv').innerHTML = bottom;
  document.getElementById('OutputDiv2').innerHTML = top + "/" + number2;
}

<input type='text' id='n1' onkeyup='Calculator()' />
<input type='text' id='n2' onkeyup='Calculator()' />
<div id='OutputDiv'></div>
<div id='OutputDiv2'></div>

似乎我无法使用number1和number2进行数学运算，并且在NaN中给了undefined和#OutputDiv。我尝试将number1和number2放在if和else块中，以及之前放在这些块的外部，但仍然不起作用。对于JS来说仍然是新手，我想我像python一样思考这就是为什么它不起作用的原因。当我输入一个负数时，结果应该总是弹出正数。

Answer 1

此代码存在很多问题

Master_ID

Answer 2

您正在使用前面在if块中定义的num1和num2进行数学运算，这很好。您的错误是您尝试执行此行top = number1 % number2;时尚未事先定义它们，因此它们不是数字。

如果执行if块，则永远不会执行else块，反之亦然。您必须在if / else块之前定义变量，以确保使用定义的变量而不是未定义的变量。

此外，我想指出的是，您的代码对我而言确实没有意义。要使其有意义，有很多事情需要修复。您应该澄清您要计算的内容，以便我们提供比现在更清晰的代码。

var num1 = parseInt(document.getElementById('n1').value);
var num2 = parseInt(document.getElementById('n2').value);

var number1 = 0, number2 = 0;
var top = 0, div = 0, bottom = 0;

if (num1 || num2 < 0) {
    number1 = num1 * -1;
    number2 = num2 * -1;
} else {
    top = number1 % number2;
    div = num1 - top;
    bottom = div / number2;
}

  

正如杰里米（Jeremy）所述，请确保使用关键字let，var和const声明变量。

Answer 3

由单个<input>管理的多个<form>

这是XY Problem，仅是因为该问题与用户传递的负数有关，但是显然还有许多紧迫的问题需要解决。

• 仅查看数学部分...这没有什么意义。

• 从语法上讲，它缺少诸如声明变量之类的基本内容（我想Python处理变量的方式有所不同）。

---

解决方案

下面的演示涉及需要使用<form>标记的属性。它将执行以下操作：

• 绑定（或注册） input 事件到<form>以调用function calculate()。
• calculate()是一个回调函数，只要用户在任一<input>中键入，就会运行该回调函数。
• 用户输入两个数字：nA和nB

• 传递了一个事件对象，以引用DOM元素并提取其值并显示结果

  calculate(event) {...
  

• 总和，差异，乘积和商将显示在四个单独的<output>标签中。

• 至于您对原始问题的回答（或者从技术上说，是对您最初认为的问题的陈述）：

    

  当我输入一个负数时，结果应该总是弹出正数。

  使用Math.abs()返回给定数字的绝对值。

---

详细信息在演示中进行了评论
参考文献在帖子结尾

演示

/* 
Reference the <form> 
(see References - Obtaining a form element object)
*/
const calc = document.forms.calc;

/*
Register the input event to <form> 
(see References - DOM onevent handlers and HTMLElement: input event)
*/
calc.oninput = calculate;

/*
Pass Event Object 
(see References - Introduction to events)
*/
function calculate(event) {

  /* 
  Reference the tag registered to the Event
  - event.currentTarget 
  (see References - Comparison of Event Targets)
  Collect all of the form controls within <form>
  - .elements property 
  (see References - Elements that are considered form controls) 
  */
  const io = event.currentTarget.elements;

  /*
  Reference the <input> tag
  - io.i1
  Get its current value
  - .value
  Convert value String into a Number
  - parseFloat()
  Get absolute value of result
  - Math.abs()
  Repeat the same process for second <input> tag
  */
  let nA = Math.abs(parseFloat(io.i1.value));
  let nB = Math.abs(parseFloat(io.i2.value));
   
  /*
  Collect all form controls with [name="n1"]
  Collect all form controls with [name="n2"] 
  (see References - HTMLFormControlsCollection)
  */
  const HTMLCollectionA = io.n1;
  const HTMLCollectionB = io.n2;
  
  // Loop through each collection and set their .value to the user <input> values
  for (let i=0; i < HTMLCollectionA.length; i++) {
    HTMLCollectionA[i].value = nA;
    HTMLCollectionB[i].value = nB;
  }
  
  /*
  Assign an expression to each of the specified <output> values
  (see References - Referencing Forms and Form Elements)
  */
  io.o1.value = nA + nB;
  io.o2.value = nA - nB;
  io.o3.value = nA * nB;
  io.o4.value = nA / nB;
  
  // Terminate function
  return false;
}

:root {font: 400 3vw/1.1 Consolas}
form {display: flex; flex-flow: row wrap; justify-content:center;width: 90vw}
label, input, output, b {display:inline-block;}
input, output {text-align:right;}
fieldset {width: 35vw;}
.inputs {width: 75vw}
label {width: 15ch}

<form id='calc'>
  <fieldset class='inputs'>
    <legend>Type a number in each field</legend>
    <label><var>nA</var> = </label><input id='i1' type='number' value='0'><br>
    <label><var>nB</var> = </label><input id='i2' type='number' value='0'>
  </fieldset>
  <fieldset>
    <legend>Addition</legend>
    <b>&nbsp;&nbsp;</b><label>Addend: </label><output name='n1'></output><br>
    <b>&plus;&nbsp;</b><label>Addend: </label><output name='n2'></output><br>
    <hr>
    <b>&nbsp;&nbsp;</b><label>Sum: </label><output id='o1'></output>
  </fieldset>
  <fieldset>
    <legend>Subtraction</legend>
    <b>&nbsp;&nbsp;</b><label>Minuend: </label><output name='n1'></output><br>
    <b>&minus;&nbsp;</b><label>Subtrahend: </label><output name='n2'></output><br>
    <hr>
    <b>&nbsp;&nbsp;</b><label>Difference: </label><output id='o2'></output>
  </fieldset>
  <fieldset>
    <legend>Multiplication</legend>
    <b>&nbsp;&nbsp;</b><label>Factor: </label><output name='n1'></output><br>
    <b>&times;&nbsp;</b><label>Factor: </label><output name='n2'></output><br>
    <hr>
    <b>&nbsp;&nbsp;</b><label>Product: </label><output id='o3'></output>
  </fieldset>
  <fieldset>
    <legend>Division</legend>
    <b>&nbsp;&nbsp;</b><label>Dividend: </label><output name='n1'></output><br>
    <b>&divide;&nbsp;</b><label>Divisor: </label><output name='n2'></output><br>
    <hr>
    <b>&nbsp;&nbsp;</b><label>Quotient: </label><output id='o4'></output>
  </fieldset>
</form>
   

---

参考文献

• Referencing Forms and Form Elements
• Obtaining a form element object
• HTMLFormControlsCollection
• Elements that are considered form controls
• Introduction to events
• DOM onevent Handlers
• HTMLElement: input event
• Comparison of Event Targets