Javascript函数在页面加载时触发，而不是在点击

问题描述：

函数“display（）”在页面加载时触发，而不是点击。我不知道为什么。当我将功能更改为“提醒”时，它会更明显地显示问题。我想尝试更改参数变量，但它不起作用。我使用了x和内容。我如何让它在负载时停止射击？它也只是加载前两个div。我在一个单独的JavaScript页面上使用了相同的格式，它工作正常。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'; 
}

还有一个问题是：你的代码有很多复制粘贴。我建议你为每个可单击的元素设置特殊类，并为要显示的元素设置数据参数，并为这些元素添加事件侦听器。 – br3t

答

你应该把参考回调函数到您的addEventListener。如果您设置display(fTContent) - 您只需运行此功能。触发右边是

firstTrimesterButton.addEventListener("click", function() { 
    display(fTContent); 
});

添加一些关于什么是问题以及这些代码如何解决它的解释。目前的答案质量很低。 – Dekel

尽管这是正确的，但您没有提供任何解释或任何此类解释。 –

我明白这意味着我没有使用正确的触发语法。它修复了它。 – ethacker

答

的addEventListener的第二个参数需要是一个函数。

既然你调用display()，而不是把它当作参考，你可以作出这样的命名函数返回一个函数，将只能被称为当事件发生时

您可以更改：

function display(content) { 
    content.style.display= 'inline'; 
}

要

function display(content) {  
    return function(){ 
     content.style.display= 'inline'; 
    }  
}

DEMO

@StephanBijzitter提供了一个解释 – charlietfl

Javascript函数在页面加载时触发，而不是在点击

相关推荐