鍍金池/ 問答/HTML/ 代碼在jsfiddle.net可以運行，在瀏覽器上沒反應(yīng)

代碼在jsfiddle.net可以運行，在瀏覽器上沒反應(yīng)

下面的代碼在jsfiddle.net上可以運行，在chrome和Firefox上沒反應(yīng)?
IDE是WebStorme
代碼一直出錯，放到j(luò)sfiddle.net上卻可以，弄到有點懷疑人生了...


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script>
        function show() {
            var value2=document.getElementById("hello_2");
            value2.style.visibility="visible";
        }
        var value1=document.getElementById("hello_1");
        value1.addEventListener("click",show,false);
    </script>
    <style>
    </style>

</head>
<body>
<button id="hello_1">hello</button>
<div id="hello_2" style="color: yellow;visibility: hidden">hello</div>
</body>
</html>
回答
編輯回答
尐潴豬

順序反了。<script>標(biāo)簽JS代碼放在</body>前(最末尾)。
一般JS是要等HTML結(jié)構(gòu)渲染完成才執(zhí)行。不然容易阻塞HTML渲染。
放在頂部也可以。但要加一些代碼。

// 原生JS
// 等所有資源加載完成才執(zhí)行。
window.onload  = function(){
    //...
}
// 或者等DOM加載完成。
document.addEventListener('DOMContentLoaded', function (e) {
    // ...
})
// jQuery 有好幾種寫法
$(function(){
    // ...
});

jQuery有好幾種寫法，具體可以參見我之前寫過的一篇文章：jQuery的幾種寫法探析
社會主義這么好，不必懷疑人生～

2017年7月27日 03:00