Question

我试图使一些计算在页面加载和选择器更改时都起作用，但是只能使它们单独工作。

现在，仅在窗口加载时才加载计算，而选择器更改时则不加载。如果没有window.onload，则onChange可以正常工作。

因此，我的目标是在这种情况下，portions * ingredient amount的计算p * 0.5会在选择id="portioner"更改时和页面加载时同时加载。

            <ul>
            <strong><p class="litop" id="tightermobiletext">Hur många portioner? »</p></strong>
                <p class="litop"><select id="portioner" onChange="Calculate();">
          <option value=1>2 port</option>
          <option value=2>4 port</option>
          <option value=3>6 port</option>
          <option value=4>8 port</option>
          <option value=5>10 port</option>
          <option value=6>12 port</option>
                 </select></p>

            <li><label id="lblRes1"></label> Gul lök</li>
        </ul>




<script language="javascript">

    function Calculate() {
        var p = document.getElementById('portioner').value;
        var result1 = p * 0.5;document.getElementById('lblRes1').innerHTML = result1;
}

    window.onload = function() {
        document.getElementById('portioner').onchange = Calculate();
    }
</script>

Answer 1

window.onload = function() {
    //this line only sets the change property
    //do not put the () on the change
    //it needs to be a method reference
    document.getElementById('portioner').onchange = Calculate;
    Calculate(); //actually invoke the method on load
}

但是，建议现在避免使用事件属性，而现在使用addEventListener。

window.addEventListener('load', function(){
    document.getElementById('portioner').addEventListener('change', Calculate);
    Calculate();
});

Answer 2

将onload =“ Calculate（）”位放入 body 标签以及标识为“ portioner”的select标签中。

顺便说一句，以小写字母开头的函数标识符是惯例。所以calculate()看起来比Calculate()

Answer 3

另外，当您将函数绑定到事件处理程序时，将获得this对象。您可以在功能中使用

window.addEventListener('load', function(){
   let element = document.getElementById('portioner')
   element.addEventListener('change', Calculate);
   element.onchange();
});

function Calculate() {
    document.getElementById('lblRes1').innerHTML = this.value * 0.5;
}

清洁一点。

如何使用JavaScript计算onLoad和onChange？

3 个答案: