JavaScript 嵌套函数未在下拉列表中刷新

Question

我有这个JavaScript：http://jsfiddle.net/Lanti/4454ve0n/11/

工作代码被注释掉了。我想移出一些行并使它们 "global" 在 use strict 下创建嵌套函数，遵循本教程：http://www.w3schools.com/js/tryit.asp?filename=tryjs_function_counter3

我是 JavaScript 的新手。

有人可以解释为什么我的解决方案在 widthHeightUnit() 函数中不起作用吗？点击不刷新，按F5才刷新。

(function(){

  ////////////////////////// START OF: NESTED FUNCTIONS //////////////////////////
  var widthHeightUnitVar = (function () {
      var widthHeightUnitResult = document.getElementById('units').value;
      return function () {return widthHeightUnitResult;}
  })();
  console.log(widthHeightUnitVar());
  /////////////////////////// END OF: NESTED FUNCTIONS ///////////////////////////

  window.onload = widthHeightUnit;
  document.getElementById('units').addEventListener('click', widthHeightUnit);
  function widthHeightUnit() {
    //var widthHeightUnitResult = document.getElementById('units').value;
    widthHeightUnitVar();
    //document.querySelector('.width-unit').innerHTML = widthHeightUnitResult;
    //document.querySelector('.height-unit').innerHTML = widthHeightUnitResult;
    document.querySelector('.width-unit').innerHTML = widthHeightUnitVar();
    document.querySelector('.height-unit').innerHTML = widthHeightUnitVar();
  }
})();

(function() {

  ////////////////////////// START OF: NESTED FUNCTIONS //////////////////////////
  var widthHeightUnitVar = (function() {
    var widthHeightUnitResult = document.getElementById('units').value;
    return function() {
      return widthHeightUnitResult;
    }
  })();
  console.log(widthHeightUnitVar());
  /////////////////////////// END OF: NESTED FUNCTIONS ///////////////////////////

  window.onload = widthHeightUnit;
  document.getElementById('units').addEventListener('click', widthHeightUnit);

  function widthHeightUnit() {
    //var widthHeightUnitResult = document.getElementById('units').value;
    widthHeightUnitVar();
    //document.querySelector('.width-unit').innerHTML = widthHeightUnitResult;
    //document.querySelector('.height-unit').innerHTML = widthHeightUnitResult;
    document.querySelector('.width-unit').innerHTML = widthHeightUnitVar();
    document.querySelector('.height-unit').innerHTML = widthHeightUnitVar();
  }




  document.getElementById('submit').addEventListener('click', dofCalc);

  function dofCalc() {

    var dofCalcWidth = document.getElementById('width').value;
    if (dofCalcWidth.length === 0) {
      alert('Please enter a real value to width!');
      return;
    }

    var dofCalcHeight = document.getElementById('height').value;
    if (dofCalcHeight.length === 0) {
      alert('Please enter a real value to height!');
      return;
    }

    var result = (+dofCalcWidth + +dofCalcHeight) / 2 // The + before the variables is "string to number conversion"

    //document.getElementById('result').innerHTML = result + ' ' + document.getElementById('units').value;
    document.getElementById('result').innerHTML = result + ' ' + widthHeightUnitVar();
  }

})();

<form>
  Select your width/height unit:
  <br>
  <select id="units">
    <option value="feet">feet</option>
    <option value="inches">inches</option>
    <option value="meters">meters</option>
    <option value="centimeters">centimeters</option>
    <option value="milimeters" selected="selected">milimeters</option>
  </select>
  <br>
  <br>Width:
  <input type="number" id="width" /><span class="width-unit"></span>
  <br>
  <br>Height:
  <input type="number" id="height" /><span class="height-unit"></span>
  <br>
  <br>
  <input type="button" value="Submit" id="submit" />
  <form/>
  <br>
  <br>Calculation:
  <div id="result"></div>

Answer 1

这样做

 var widthHeightUnitVar = function () {
      var widthHeightUnitResult = document.getElementById('units').value;
      return widthHeightUnitResult;
  };

您使用的是 IIFE，所以运行立即并且只有一次，所以它没有刷新..

////////////////////////// START OF: NESTED FUNCTIONS //////////////////////////
  var widthHeightUnitVar = (function () {
      var widthHeightUnitResult = document.getElementById('units').value;
      return function () {return widthHeightUnitResult;}
  })();
  console.log(widthHeightUnitVar());
  /////////////////////////// END OF: NESTED FUNCTIONS ///////////////////////////

JavaScript 嵌套函数未在下拉列表中刷新

JavaScript nested function not refreshing in dropdown

javascript

html

function

variables

nested-function