試圖讓按鈕被點擊時出現一個div

這裏是代碼，首先爲什麼div顯示時，我把它的顯示值設置爲「無」;並有任何其他我需要修復，以使div出現在我點擊按鈕時？感謝試圖讓按鈕被點擊時出現一個div

HTML

<button onclick="openTest()">Try it</button> 

<div id="test"> 
</div>

CSS

#test { 
    width: 500px; 
    height: 500px; 
    background-color: lightblue; 
}

document.getElementById("test").style.display ="none"; 

function openTest() { 
    document.getElementById("test").style.display = "block"; 
}

來源

2016-03-07 Johan Karlsson

這裏是一個小提琴https://jsfiddle.net/SnubbenGuden/6092dquv/4/ –

你的功能沒有被調用。在javascript中將diviner添加到div中。 –

對於您在本網站上提出的所有問題，請點擊此處查看：http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – baao

不要使用內嵌的JavaScript - 附加一個事件監聽器來代替，並確保要麼把你的代碼在window.onload = function() {}或之前關閉</body>噸股份公司。這種方式將在腳本運行時找到您的元素。 Try this code：

HTML：

<button id="btn">Try it</button> 

<div id="test"> 
</div>

JS：

document.getElementById("test").style.display ="none"; 

function openTest() { 
    document.getElementById("test").style.display = "block"; 
} 

document.getElementById('btn').addEventListener('click', openTest);

來源

2016-03-07 20:21:35 baao

完美，感謝的人！ –

作爲mmm already noted，主要的問題是你的小提琴的執行，可能的話，你真正的代碼的順序。

基本上在執行JS之前解析了HTML，所以首先找不到openTest。然後，當你的JS被解析時，定義了openTest，但很可能你的代碼實際上被封裝在一個函數中而不會泄露全局變量。結果，openTest不能再次訪問。

修復它可能是那樣簡單：https://jsfiddle.net/6092dquv/18/ - 明確地露出openTest功能通過改變 function openTest() { 到 window.openTest = function() {

它綁定到全局window對象，但它是一個不好的做法，你漏全球並且在HTML中混合使用表示和邏輯（HTML和JS）。

所以好的實踐是在上述答案：抓住你的按鈕，分配處理程序，並在一個地方做你的邏輯 - 在JS。如果可能的話，如果用戶沒有JS（這並不意味着他禁用了它 - 這意味着，例如，JS文件仍然爲他加載！），那麼該按鈕應該是一個常規的表單處理服務器端。如果這不是一個選項，那麼從JS中以編程方式插入按鈕，所以他從來沒有看到一個不起作用的東西。

來源

2016-03-07 20:41:09 ikari

試圖讓按鈕被點擊時出現一個div

回答

相關問題