条件javascript公式取决于checkbox是否被选中

Conditional javascript formula depending on whether checkbox is checked

本文关键字：是否 checkbox 取决于 javascript 条件      更新时间：2023-09-26

我已经尝试了一千种不同的教程，我很确定我的代码是正确的，但我不能得到这个工作。我正在尝试创建一个基于用户选择"是"还是"否"具有不同值的计算。

var people = document.getElementById('how-many');
people.onkeyup = function() {
  guests = people.value;
  if (document.getElementById('leftoversyes').checked) {
    feeds = people.value * 2;
  } else {
    feeds = people.value * 1.5;
  }
  document.getElementById('turkey-number').innerHTML = guests;
  document.getElementById('turkey-weight').innerHTML = feeds;
}
<form id="calculator">
  <p>
    <label for="how-many">How many people do you plan to feed?</label>
    <br />
    <input type="text" maxlength="3" name="how-many" id="how-many" />
  </p>
  <p>
    <label for="leftovers">Would you like to have leftovers?</label>
    <br />
    <input type="checkbox" name="leftoversyes" value="Yes" id="leftoversyes" />Yes &nbsp;
    <input type="checkbox" name="leftoversno" value="No" id="leftoversno" />No</p>
  <p>
    <input type="button" value="Calculate" id="calculate" class="btn" />
    <input type="reset" value="clear" id="clearcalculator" />
  </p>
</form>
<p>A <span id="turkey-weight"></span>-pound turkey will feed <span id="turkey-number"></span> guests<span id="turkey-leftovers"></span>.</p>

它可以工作，因为它会给我1.5的乘法，但我做什么都不能让它给我2的乘法。

提前感谢您的帮助!

当<input type="checkbox" name="leftoversyes" value="Yes" id="leftoversyes" />的值发生变化时，需要添加另一个侦听器

document.getElementById('leftoversyes').onchange = function() {
    var guests = document.getElementById('how-many').value;
    var feeds;
    if (document.getElementById('leftoversyes').checked){
        feeds = guests * 2;
    } else {
        feeds = guests * 1.5;
    }   
    document.getElementById('turkey-number').innerHTML = guests;
    document.getElementById('turkey-weight').innerHTML = feeds;
};

与您编写的原始处理程序相同，因此我们将其重构为:

function calculate() {
    var guests = document.getElementById('how-many').value;
    var feeds;
    if (document.getElementById('leftoversyes').checked){
        feeds = guests * 2;
    } else {
        feeds = guests * 1.5;
    }   
    document.getElementById('turkey-number').innerHTML = guests;
    document.getElementById('turkey-weight').innerHTML = feeds;
}
document.getElementById('how-many').onkeyup = calculate;
document.getElementById('leftoversyes').onchange = calculate;

声明feeds变量，使用#leftovers元素的onchange事件对#people元素调用与onkeyup相同的函数

var people = document.getElementById('how-many');
var leftovers = document.getElementById('leftoversyes');
function feeder() {
    var feeds;
    guests = people.value;
        if (document.getElementById('leftoversyes').checked){
            feeds = people.value * 2;
        } else {
            feeds = people.value * 1.5;
        }   
    document.getElementById('turkey-number').innerHTML = guests;
    document.getElementById('turkey-weight').innerHTML = feeds;
}
people.onkeyup = feeder;
leftovers.onchange = feeder;
<form id="calculator">
    <p>
        <label for="how-many">How many people do you plan to feed?</label><br />
        <input type="text" maxlength="3" name="how-many" id="how-many" />
    </p>
    <p>
        <label for="leftovers">Would you like to have leftovers?</label><br />
        <input type="checkbox" name="leftoversyes" value="Yes" id="leftoversyes" /> Yes &nbsp; <input type="checkbox" name="leftoversno" value="No" id="leftoversno" /> No</p>
    <p><input type="button" value="Calculate" id="calculate" class="btn" />
        <input type="reset" value="clear" id="clearcalculator" /></p>
</form> 
<p>A <span id="turkey-weight"></span>-pound turkey will feed <span id="turkey-number"></span> guests<span id="turkey-leftovers"></span>.</p>

相关文章：