有条件的JavaScript公式，取决于是否已选中复选框

debugcn 发表于 Dev

劳里

我已经尝试了上千种不同的教程，但是我很确定我的代码是正确的，但是我无法使它正常工作。我正在尝试根据用户选择“是”还是“否”来创建具有不同值的计算。

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。

先谢谢您的帮助！

来宾271314

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。