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

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

既然你说了它的编号，它只是取space之前的值。

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，但计算机不能。它假定它为 value = 1（忽略 000）。所以你可以把它写成 value = 1000 ans 也在下一行 value = 2.0.不要在数字之间留空格（因为语言不允许这样。

此外，您没有关闭每个 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>

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

Javascript Calculation issue when there is a Space during calculating input value

html

javascript

calculation