计算输入值时出现空格时的Javascript计算问题

Question

 function divideBy() { var w = document.getElementById("first").value; var x = document.getElementById("second").value; var y = w / x; y = y.toFixed(2); var z = y; document.getElementById("answer").innerHTML = z; var a = document.getElementById("first1").value; var b = document.getElementById("second1").value; var c = a / b; var d = c; d = d.toFixed(2); var e = d document.getElementById("answer1").innerHTML = e; document.getElementById('modal').style.visibility = 'hidden'; document.getElementById('modal1').style.visibility = 'hidden'; } 

 <tr> <td class="normal"> <div align="right">SGST @ 9% :</div> </td> <td nowrap class="normal"> <div align="right"> <div id="divCheckbox1" style="display: none;"> <input type="number" step=0.001 id="first" value=1 000> <input type="number" step=0.001 id="second" value=2 .0> </div> <button type="button" id="modal1" onclick="divideBy()"></button> <span id="answer"></span> <span style="display:inline-block; width: 5;"></span> </td> <tr> <td class="normal"> <div align="right">CGST @ 9% :</div> </td> <td nowrap class="normal"> <div align="right"> <div id="divCheckbox" style="display: none;"> <input type="number" step=0.001 id="first1" value=1 000> <input type="number" step=0.001 id="second1" value=2 .0> </div> <button type="button" id="modal" onclick="divideBy()"></button> <span id=answer1></span> <span style="display:inline-block; width: 5;"></span> </td> 

Answer 1

只需在处理任何内容之前从输入中删除空格。

  function divideBy() { var w = document.getElementById("first").value; var temp1=''; for(var i=0; i < w.length; i++){ //Remove white spaces if(w.charAt(i)!==' ') temp1+=w.charAt(i); } var x = document.getElementById("second").value; var temp2=''; for(var i=0; i < x.length; i++){ //Remove white spaces if(x.charAt(i)!==' ') temp2+=x.charAt(i); } w=parseFloat(temp1); x=parseFloat(temp2); var y = w / x; y = y.toFixed(2); var z = y; document.getElementById("answer").innerHTML = z; var a = document.getElementById("first1").value; var b = document.getElementById("second1").value; var c = a / b; var d = c; d = d.toFixed(2); var e = d document.getElementById("answer1").innerHTML = e; document.getElementById('modal').style.visibility = 'hidden'; document.getElementById('modal1').style.visibility = 'hidden'; } 

Answer 2

因为您说的是数字，所以它只取空格之前的值。

HTML：

<tr>
<td class="normal">
<div align="right">SGST @ 9% :</div>
</td>
<td nowrap class="normal">
<div align="right">
  <div id="divCheckbox1" style="display: none;">
    <input step=0.001 id="first" value="1 000">
    <input step=0.001 id="second" value="2 .0">
  </div>
  <button type="button" id="modal1" onclick="divideBy()"></button>
  <span id="answer"></span>
  <span style="display:inline-block; width: 5;"></span>
</td>
</td>
</tr>
<tr>
<td class="normal">
  <div align="right">CGST @ 9% :</div>
</td>
<td nowrap class="normal">
  <div align="right">
    <div id="divCheckbox" style="display: none;">
      <input step=0.001 id="first1" value="1 000">
      <input step=0.001 id="second1" value="2 .0">
    </div>
    <button type="button" id="modal" onclick="divideBy()"></button>
    <span id=answer1></span>
    <span style="display:inline-block; width: 5;"></span>
</td>
</td>
</tr>

JS：

function divideBy() {
var w = document.getElementById("first").value ;
var x = document.getElementById("second").value;
var y = w.replace(" ","") / x.replace(" ","");
y = y.toFixed(2);
var z = y;
document.getElementById("answer").innerHTML = z;
var a = document.getElementById("first1").value;
var b = document.getElementById("second1").value;
var c = a.replace(" ","") / b.replace(" ","");
var d = c;
d = d.toFixed(2);
var e = d
document.getElementById("answer1").innerHTML = e;
document.getElementById('modal').style.visibility = 'hidden';
document.getElementById('modal1').style.visibility = 'hidden';
}

Answer 3

 function removeSpace(text){ return text.replace(/\\s/g,''); } function divideBy() { var w = removeSpace(document.getElementById("first").value); var x = removeSpace(document.getElementById("second").value); var y = w / x; y = y.toFixed(2); var z = y; document.getElementById("answer").innerHTML = z; var a = removeSpace(document.getElementById("first1").value); var b = removeSpace(document.getElementById("second1").value); var c = a / b; var d = c; d = d.toFixed(2); var e = d document.getElementById("answer1").innerHTML = e; document.getElementById('modal').style.visibility = 'hidden'; document.getElementById('modal1').style.visibility = 'hidden'; } 

 <table> <tr> <td class="normal"> <div align="right">SGST @ 9% :</div> </td> <td nowrap class="normal"> <div align="right"> <div id="divCheckbox1" > <input type="text" step=0.001 id="first" value="1 000"/> <input type="text" step=0.001 id="second" value="2 .0"/> </div> <button type="button" id="modal1" onclick="divideBy()">click here </button> <span id="answer"></span> <span style="display:inline-block; width: 5;"></span> </div> </td> </tr> <tr> <td class="normal"> <div align="right">CGST @ 9% :</div> </td> <td nowrap class="normal"> <div align="right"> <div id="divCheckbox"> <input type="text" step=0.001 id="first1" value="5 000"/> <input type="text" step=0.001 id="second1" value="3 .0"/> </div> <button type="button" id="modal" onclick="divideBy()">Click here1</button> <span id=answer1></span> <span style="display:inline-block; width: 5;"></span> </div> </td> </tr> </table> 

Answer 4

正如人们在评论中指出的那样，值= 1 000将无法正常工作，因为我和你可以看到1 000为1000，但计算机不能。 假定它的值= 1（忽略000）。 因此，您也可以在下一行值= 2.0中将其写为value = 1000 ans。 请勿在数字之间使用空格（因为语言不允许这样做。

另外，您不会在每个tr中关闭两个div。

因此，要使代码正常工作，您需要做的就是将value = 1 000更改为value = 1000，将value = 2 .0更改为value = 2.0，并检查所有元素是否根据HTML语法正确放置。

此代码段根据您的JavaScript代码工作。

 function divideBy() { var w = document.getElementById("first").value; var x = document.getElementById("second").value; var y = w / x; y = y.toFixed(2); var z = y; document.getElementById("answer").innerHTML = z; var a = document.getElementById("first1").value; var b = document.getElementById("second1").value; var c = a / b; var d = c; d = d.toFixed(2); var e = d document.getElementById("answer1").innerHTML = e; document.getElementById('modal').style.visibility = 'hidden'; document.getElementById('modal1').style.visibility = 'hidden'; } 

 <table> <tr> <td class="normal"> <div align="right">SGST @ 9% :</div> </td> <td nowrap class="normal"> <div align="right"> <div id="divCheckbox1" style="display: none;"> <input type="number" step=0.001 id="first" value=1 000> <input type="number" step=0.001 id="second" value=2 .0> </div> <button type="button" id="modal1" onclick="divideBy()"></button> <span id="answer"></span> <span style="display:inline-block; width: 5;"></span> </div> </td> <tr> <td class="normal"> <div align="right">CGST @ 9% :</div> </td> <td nowrap class="normal"> <div align="right"> <div id="divCheckbox" style="display: none;"> <input type="number" step=0.001 id="first1" value=1000> <input type="number" step=0.001 id="second1" value=2.0> </div> <button type="button" id="modal" onclick="divideBy()"></button> <span id=answer1></span> <span style="display:inline-block; width: 5;"></span> </div> </td> </table>