Question

我已经尝试了一千种不同的教程，我非常确定我的代码是正确的，但我无法让它工作。我尝试根据用户是否选择“是”来创建具有不同值的计算。或者＆＃39; no＆＃39;。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

它的作用是它会给我乘以1.5，但我没有做任何事情就可以得到它的乘法值。

提前感谢您的帮助！

Answer 1

当<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;

Answer 2

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

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>

条件javascript公式取决于是否选中复选框

2 个答案: