javascript变量初始化后的空值

Question

我有这个html

<lu 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>
</lu> 

我想要得到这些列表元素被点击时的值并将其传递给另一个函数，如下所示。

目前我正在尝试在我的ball .html

<script>
var projectType;
$(function () {

//Initialize project name
var ul = document.getElementById('balancingSel'); //Parent
ul.addEventListener('click', function (e) {
if (e.target.tagName === 'A')
projectType = e.target.innerText;
});
//Load data
balancingTableLoad($("#balancingFileSelect").val(), projectType);
fillInputFieldData($("#balancingFileSelect").val(), projectType);
});
</script>

问题是，虽然该值被设置为变量projectType，但当使用该变量作为参数调用其他两个函数时，它是未定义的。

我尝试将变量声明移动到函数内部，但这并没有解决问题。

Answer 1

代码调用这两个函数在你点击任何东西之前,原因是addEventListener,在点击运行,这两个函数执行就定义。

ul.addEventListener('click', function (e) {
if (e.target.tagName === 'A')
projectType = e.target.innerText;
// }); oringally the function addEventListener ends here
//Load data
balancingTableLoad($("#balancingFileSelect").val(), projectType);
fillInputFieldData($("#balancingFileSelect").val(), projectType);
}); // addEventListener should end here 

Answer 2

您应该将函数调用移动到if块内，否则projectType可能无法设置:

function balancingTableLoad(val, type) {
alert(type);
}
function fillInputFieldData(val, type) {
alert(type);
}
$(function() {
//Initialize project name
var ul = document.getElementById('balancingSel'); //Parent
ul.addEventListener('click', function(e) {
if (e.target.tagName === 'A') {
projectType = e.target.innerText;
//Load data
balancingTableLoad($("#balancingFileSelect").val(), projectType);
fillInputFieldData($("#balancingFileSelect").val(), projectType);
}
});
});

<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> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>