JavaScript点击事件给变量赋值后调用时为undefined问题求解

问题根因 #

• 函数执行时机错误：当前balancingTableLoad、fillInputFieldData两个函数是在DOM加载完成后立刻执行的，此时用户尚未点击任何列表项，全局变量projectType未被赋值，因此传入的参数为undefined。你在点击列表项时仅完成了变量赋值，已经执行完毕的函数不会自动重新触发。
• a标签默认行为干扰：列表项内的a标签设置了href="bal.html"，点击时会触发页面跳转刷新，刚赋值的projectType会随页面刷新被重置。
• 额外拼写错误：HTML中列表父标签应该是<ul>，你写的<lu>属于非法标签，可能导致DOM选择异常。

修复方案 #

1. 先修正HTML的标签拼写错误
2. 点击事件内阻止a标签的默认跳转行为
3. 将两个数据加载函数的调用逻辑挪到点击事件回调内，确保拿到点击值之后再执行函数

修正后HTML代码 #

<ul id="balancingSel" >
   <li><a href="bal.html"> "VALUE1" </a></li>
   <li><a href="bal.html"> "VALUE2" </a></li>
   <li><a href="bal.html"> "VALUE3" </a></li>
   <li><a href="bal.html"> "VALUE4" </a></li>
</ul> 

修正后JS代码 #

var projectType;

$(function () {
    var ul = document.getElementById('balancingSel');
    ul.addEventListener('click', function (e) {
        if (e.target.tagName === 'A') {
            // 阻止a标签默认跳转刷新
            e.preventDefault();
            // 可按需对取值做去空格、去引号处理
            projectType = e.target.innerText.trim();
            // 拿到点击值后再调用业务函数
            balancingTableLoad($("#balancingFileSelect").val(), projectType);
            fillInputFieldData($("#balancingFileSelect").val(), projectType);
        }
    });

    // 如果需要页面加载时默认加载第一条数据，可放开下方注释
    // projectType = 'VALUE1';
    // balancingTableLoad($("#balancingFileSelect").val(), projectType);
    // fillInputFieldData($("#balancingFileSelect").val(), projectType);
});

内容的提问来源于stack exchange，提问作者Markos Tzetzis