Question

我正在使用HTML和JavaScript创建一个简单的增/减百分比计算器。老实说，我不确定我的实际代码出了什么问题。直到我在JavaScript中添加了if / then语句之前，它都运行良好。一切“似乎”正确，但是结果没有以我指定的标签ID打印到屏幕上。我是JavaScript和HTML的新手，所以这对我来说只是一些学习。预先感谢！

              function getPercentageChange() {
              var button1 = document.getElementById("button1");
              var button2 = document.getElementById("button2");

              if (button1.checked){
                var d_oldNumber = document.getElementById('originalnumber').value;
                var d_newNumber = document.getElementById('newnumber').value;
                var decreaseValue = d_oldNumber - d_newNumber;
                var decreaseresults = (decreaseValue / oldNumber) * 100;
                document.getElementById('percentageIncrease').innerHTML = descreaseresults + '%';
              } else if (button2.checked) {
                var i_oldNumber = document.getElementById('originalnumber').value;
                var i_newNumber = document.getElementById('newnumber').value;
                var increaseValue = i_oldNumber - i_newNumber;
                var increaseresults = (increaseValue / i_oldNumber) * 100;
                document.getElementById('percentage').innerHTML = increaseresults + '%';
              }
            }

          Percentage Increase <input type="radio" name="radionbutton" value="1" id="button1"/><br>
          Percentage Decrease <input type="radio" name="radionbutton" value="2" id="button2"/><br>
          &nbsp;
          &nbsp;
          &nbsp;


          <p>Original Number:
            <input type="numeric" id="originalnumber" value=""><br>

             New Number:
            <input type="numeric" id="newnumber" value=""><br><br>
          </p>

           <input type="button" value="Calculate" onclick="getPercentageChange();">
           <div id = "percentage"></div>


            <p id="percentage"></p>

Answer 1

此语句使用未定义的变量/flaskapp1/auth。也许将其更改为oldNumber？

d_oldNumber

Answer 2

您只是有一些拼写错误的变量：d_oldNumber，oldNumber和id oldNumber。

function getPercentageChange() {
  var button1 = document.getElementById("button1");
  var button2 = document.getElementById("button2");

  if (button1.checked) {
    var d_oldNumber = document.getElementById('originalnumber').value;
    var d_newNumber = document.getElementById('newnumber').value;
    var decreaseValue = d_oldNumber - d_newNumber;
    var decreaseresults = (decreaseValue / d_oldNumber) * 100;
    document.getElementById('percentage').innerHTML = decreaseresults + '%';
  } else if (button2.checked) {
    var i_oldNumber = document.getElementById('originalnumber').value;
    var i_newNumber = document.getElementById('newnumber').value;
    var increaseValue = i_oldNumber - i_newNumber;
    var increaseresults = (increaseValue / i_oldNumber) * 100;
    document.getElementById('percentage').innerHTML = increaseresults + '%';
  }
}

Percentage Increase <input type="radio" name="radionbutton" value="1" id="button1" /><br> Percentage Decrease <input type="radio" name="radionbutton" value="2" id="button2" /><br> &nbsp; &nbsp; &nbsp;


<p>Original Number:
  <input type="numeric" id="originalnumber" value=""><br> New Number:
  <input type="numeric" id="newnumber" value=""><br><br>
</p>

<input type="button" value="Calculate" onclick="getPercentageChange();">
<div id="percentage"></div>


<p id="percentage"></p>

Answer 3

由于您的一些变量等于相同的结果，因此您可以简化此函数以节省混淆。在某些情况下，您的代码中变量名拼写错误

function getPercentageChange() {
  var button1 = document.getElementById("button1");
  var button2 = document.getElementById("button2");

  var oldNumber = document.getElementById('originalnumber').value;
  var newNumber = document.getElementById('newnumber').value;
  var difference = oldNumber - newNumber;
  var results = (difference / oldNumber) * 100;


  if (button1.checked) {
    document.getElementById('percentage').innerHTML = results + '%';
  } else if (button2.checked) {
    document.getElementById('percentage').innerHTML = results + '%';
  }
}

Percentage Increase <input type="radio" name="radionbutton" value="1" id="button1" /><br> Percentage Decrease <input type="radio" name="radionbutton" value="2" id="button2" /><br> &nbsp; &nbsp; &nbsp;


<p>Original Number:
  <input type="numeric" id="originalnumber" value=""><br> New Number:
  <input type="numeric" id="newnumber" value=""><br><br>
</p>

<input type="button" value="Calculate" onclick="getPercentageChange();">
<div id="percentage"></div>


<p id="percentage"></p>

希望这会有所帮助

如何使用If / Then语句在JavaScript函数中使用单选按钮和输入

3 个答案: