Question

我不确定更改代码时为什么我的代码没有将两个数字相乘。在“乘数”字段中输入数字后，onchange函数将继续添加值，如果其为空值，则输入“ NaN”

<body> 
<h1>Mutiply</h1>
<p>Multiplicand: <input type="text" id="multiplicand" value="0" onchange="multiply()"></p>
<p>Multiplier: <input type="text"/ id="multiplier" value="0" onchange="multiply()"></p> <br>
<div> 
    <p><span id="showMulipicand">0</span>
     × 
    <span id="showMultiplier">0</span> = <span id="showProduct">0</span></p> 
</div> 
<script src="multiply.js"></script> 


multiply() { 
  var multiplicand = document.getElementById('multiplicand').value; 
  var multiplier = document.getElementById('multiplier').value; 
  var showProduct = parseInt(multiplicand) * parseInt(multiplier); 
  var p = document.getElementById('showProduct'); 
  p.innerHTML += showProduct; 
}

Answer 1

您要将结果附加到p标记的内容中。

如果只想显示结果，则必须覆盖innerHTML而不是附加到其上。

p.innerHTML = showProduct;

此外，如果要在键入时更新结果，请使用oninput事件而不是onchange事件，该事件仅在您离开<input>字段时触发。

如果您还想更新乘数和被乘数字段，请执行与乘积相同的操作：

document.getElementById('showMulipicand').innerHTML = multiplicand;

为避免NaN问题，当您从<input>读取乘数/被乘数时，将逻辑or设为0，这样，如果该字段为空，则其值将为为0。

您还应该将<input>的类型从text更改为number。

以下是显示乘法结果的代码：

function multiply() { 
  const multiplicand = document.getElementById('multiplicand').value || 0; 
  const multiplier = document.getElementById('multiplier').value || 0; 
  const product = parseInt(multiplicand) * parseInt(multiplier);
  document.getElementById('showMulipicand').innerHTML = multiplicand; 
  document.getElementById('showMultiplier').innerHTML = multiplier; 
  document.getElementById('showProduct').innerHTML = product; 
}

<h1>Mutiply</h1>
<p>Multiplicand: <input type="number" id="multiplicand" value="0" oninput="multiply()"></p>
<p>Multiplier: <input type="number" id="multiplier" value="0" oninput="multiply()"></p>
<p>
    <span id="showMulipicand">0</span> × 
    <span id="showMultiplier">0</span> = <span id="showProduct">0</span>
</p>

如何修复Javascript乘法onchange

1 个答案: