[英]Javascript function firing on page load, not on click
函数“ display()”在页面加载而不是单击时触发。 我不知道为什么。 当我将功能更改为“警报”时,它会更明显地显示该问题。 我曾想尝试更改参数变量,但没有成功。 我用x和内容。 如何获得停止加载的效果? 它也只加载前两个div。 我在单独的javascript页面上使用了相同的格式,效果很好。
我不
https://jsfiddle.net/ethacker/92r0apd9/ JS:
var firstTrimesterButton = document.getElementById('firstTri');
var secondTrimesterButton = document.getElementById('secTri');
var thirdTrimesterButton = document.getElementById('thirdTri');
var firstThreeMonthsButton = document.getElementById('firstThreeMonths');
var secondThreeMonthsButton = document.getElementById('secThreeMonths');
var thirdThreeMonthsButton = document.getElementById('thirdThreeMonths');
var fourthThreeMonthsButton = document.getElementById('fourthThreeMonths');
var toddlersButton = document.getElementById('toddlers');
var fTContent = document.getElementById('fTContent');
var sTContent = document.getElementById('sTContent');
var tTContent = document.getElementById('sTContent');
var firstTMContent = document.getElementById('sTContent');
var sTMContent = document.getElementById('sTContent');
var tTMContent = document.getElementById('sTContent');
var fourthTMContent = document.getElementById('sTContent');
var toddlersContent = document.getElementById('sTContent');
//event listeners
firstTrimesterButton.addEventListener("click", display(fTContent));
secondTrimesterButton.addEventListener("click",display(sTContent));
thirdTrimesterButton.addEventListener("click", display(tTContent));
firstThreeMonthsButton.addEventListener("click", display(firstTMContent) );
secondThreeMonthsButton.addEventListener("click", display(sTMContent));
thirdThreeMonthsButton.addEventListener("click", display(tTMContent));
fourthThreeMonthsButton.addEventListener("click",display(fourthTMContent));
toddlersButton.addEventListener("click",display(toddlersContent));
//function
function display(content) {
content.style.display= 'inline';
}
您应该addEventListener
回调函数的引用放入您的addEventListener
。 如果设置display(fTContent)
-您只需运行此功能。 正确的触发是
firstTrimesterButton.addEventListener("click", function() {
display(fTContent);
});
addEventListener
的第二个参数必须是一个函数。
由于您正在调用display()
而不将其作为引用传递,因此可以使该命名函数返回仅在事件发生时才调用的函数
你可以改变:
function display(content) {
content.style.display= 'inline';
}
至
function display(content) {
return function(){
content.style.display= 'inline';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.