Question

我正在上课时使用变化计算器，但遇到了麻烦。经过一段时间的编码后，我知道它可以工作到makeChange函数中的if语句为止。我不确定如何更改功能以使其正常工作并在HTML框中显示某些内容。

/* global math */

var $ = function(id) {
  return document.getElementById(id);
};

var makeChange = function() {
  var cents = parseInt($("cents").value);
  if (cents <= 99 && cents >= 25) {
    var quarters = math.floor(cents / 25);
    ($("quarters").value).innerHTML = quarters;
  }
  if (cents <= 24 && cents >= 10) {
    var dimes = math.floor(cents / 10);
    ($("dimes").value).innerHTML = dimes;
  }
  if (cents <= 9 && cents >= 5) {
    var nickles = math.floor(cents / 5);
    ($("nickles").value).innerHTML = nickles;
  }
  if (cents <= 4 && cents >= 1) {
    var pennies = math.floor(cents / 1);
    ($("pennies").value).innerHTML = pennies;
  }
};
var processEntry = function() {
  var cents = parseInt($("cents").value);
  if (cents >= 0 && cents <= 99) {
    $("cents").value = makeChange(cents);
  }
  if (isNaN(cents)) {
    alert("Please enter a number between 0 and 99.");
  }

};

window.onload = function() {
  $("calculate").onclick = processEntry;
};

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Make Change</title>
  <link rel="stylesheet" href="styles.css">
  <script src="make_change.js"></script>
</head>

<body>
  <main>
    <h1>x x's Change Calculator</h1>

    <label>Enter amount of change due (0-99):</label>
    <input type="text" id="cents" />
    <input type="button" value="Calculate" name="calculate" id="calculate" /><br><br>

    <label>Quarters:</label>
    <input type="text" id="quarters" disabled><br>

    <label>Dimes:</label>
    <input type="text" id="dimes" disabled><br>

    <label>Nickels:</label>
    <input type="text" id="nickels" disabled><br>

    <label>Pennies:</label>
    <input type="text" id="pennies" disabled><br>

  </main>
</body>

</html>

Answer 1

将所有.value.innerHTML设置更改为.value。此外，Math对象用大写字母M拼写。


/* global math */

var $ = function(id) {
    return document.getElementById(id);
};

var makeChange = function() {
        var cents = parseInt($("cents").value);
        if (cents <= 99 && cents >= 25) {
            var quarters = Math.floor(cents / 25);
            $("quarters").value = quarters;
        }
        if (cents <= 24 && cents >= 10) {
            var dimes = Math.floor(cents / 10);
            $("dimes").value = dimes;
        }
        if (cents <= 9 && cents >= 5) {
            var nickles = Math.floor(cents / 5);
            $("nickles").value = nickles;
        }
        if (cents <= 4 && cents >= 1) {
            var pennies = Math.floor(cents / 1);
            $("pennies").value = pennies;
        }
};

Answer 2

如果我正确地回答了您的问题，您想要这样的东西

/* global math */

var $ = function(id) {
  return document.getElementById(id);
};

var makeChange = function() {
  var cents = parseInt($("cents").value);
  
  if (cents <= 99 && cents >= 25) {
    var quarters = Math.floor(cents / 25);
    $("quarters").value = quarters;
  }else $("quarters").value = '';
  
  if (cents <= 24 && cents >= 10) {
    var dimes = Math.floor(cents / 10);
    $("dimes").value = dimes;
  }else $("dimes").value = '';
  
  if (cents <= 9 && cents >= 5) {
    var nickles = Math.floor(cents / 5);
    $("nickels").value = nickles;
  }else $("nickels").value = '';
  
  if (cents <= 4 && cents >= 1) {
    var pennies = Math.floor(cents / 1);
    $("pennies").value = pennies;
  }else $("pennies").value = '';
 
};
var processEntry = function() {
  var cents = parseInt($("cents").value);
  if (cents >= 0 && cents <= 99) {
    makeChange(cents);
    $("cents").value = '';
  }
  if (isNaN(cents)) {
    alert("Please enter a number between 0 and 99.");
  }

};

window.onload = function() {
  $("calculate").onclick = processEntry;
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Make Change</title>
  <link rel="stylesheet" href="styles.css">
  <script src="make_change.js"></script>
</head>

<body>
  <main>
    <h1>x x's Change Calculator</h1>

    <label>Enter amount of change due (0-99):</label>
    <input type="text" id="cents" />
    <input type="button" value="Calculate" name="calculate" id="calculate" /><br><br>

    <label>Quarters:</label>
    <input type="text" id="quarters" disabled><br>

    <label>Dimes:</label>
    <input type="text" id="dimes" disabled><br>

    <label>Nickels:</label>
    <input type="text" id="nickels" disabled><br>

    <label>Pennies:</label>
    <input type="text" id="pennies" disabled><br>

  </main>
</body>

</html>

完整的工作示例，修正了您的错字

Answer 3

我意识到最初发布的内容并没有完成我想做的事情。事实证明，我有一个使事情变得比应有的复杂的诀窍。所以我回到了绘图板上，想到了这个：

var $ = function(id) {
    return document.getElementById(id);
};

var makeChange = function(cents) {
    var quarters = parseInt(cents / 25);
       cents = cents % 25;
    var dimes = parseInt(cents / 10);
       cents = cents % 10;
    var nickels = parseInt(cents / 5);
       cents = cents % 5;
    var pennies = parseInt(cents / 1);
    
    $("quarters").value = quarters;
    $("dimes").value = dimes;
    $("nickels").value = nickels;
    $("pennies").value = pennies;

};
var processEntry = function() {
    var cents = parseInt($("cents").value);
        if (cents >= 0 && cents <=99) {
            makeChange(cents);
            $("cents").value = '';
        }
    if (isNaN(cents)) {
        alert("Please enter a number between 0 and 99.");
    }
    
};

window.onload = function() {
    $("calculate").onclick = processEntry;
};

我确实合并了先前答案的几行内容（谢谢您<3）。但现在运行平稳。谢谢大家的帮助！

更改计算器功能不起作用（JavaScript）

3 个答案: