javascript - 如何使用 JavaScript 计算 onLoad 和 onChange？

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>

标签： javascripthtml

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