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'; 
}

來源

2016-12-24 ethacker

還有一個問題是：你的代碼有很多複製粘貼。我建議你爲每個可單擊的元素設置特殊類，併爲要顯示的元素設置數據參數，併爲這些元素添加事件偵聽器。 – br3t

你應該把參考回調函數到您的addEventListener。如果您設置display(fTContent) - 您只需運行此功能。觸發右邊是

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

來源

2016-12-24 23:38:44 br3t

添加一些關於什麼是問題以及這些代碼如何解決它的解釋。目前的答案質量很低。 – Dekel

儘管這是正確的，但您沒有提供任何解釋或任何此類解釋。 –

我明白這意味着我沒有使用正確的觸發語法。它修復了它。 – ethacker

的addEventListener的第二個參數需要是一個函數。

既然你調用display()，而不是把它當作參考，你可以作出這樣的命名函數返回一個函數，將只能被稱爲當事件發生時

您可以更改：

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

要

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

DEMO

來源

2016-12-24 23:41:33 charlietfl

@StephanBijzitter提供了一個解釋 – charlietfl

Javascript函數在頁面加載時觸發，而不是在點擊

回答

相關問題