HTML工作表中的多個腳本之一不起作用

Question

我試圖在我的HTML表格中運行多個腳本，但似乎無法正常工作。 除閃爍功能的腳本外，所有其他腳本均有效。 我看不出問題是什么。 您可以在我的代碼中找到問題嗎？ 提前致謝！

這是我的代碼如下：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: coral;
    color: white;
}

.text2{
  color: white;
  width: 100px;
  float: right;
  padding-top: 10px;
}


</style>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn1").on('click',function(){
     $("p").hide();
     $(".text2").hide()
     $('body').css("background", "black");      
    });

});
</script>

<script>

//blink
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);

function toggle() {
    if(shown) {
        element.hide();
        shown = false;
    } else {
        element.show();
        shown = true;
    }
}
</script>

</head>
<body>

<p>This is a paragraph.</p>

</div>
     <div class="text2">
     -- : --
</div>  
<button class="btn1">online</button>



</body>
</html>

Answer 1

第二個腳本的內容應位於文檔就緒處理程序中，否則代碼將嘗試在將.text2元素解析到內存之前定位並使用該元素。

 <!DOCTYPE html> <html> <head> <style> body { background-color: coral; color: white; } .text2{ color: white; width: 100px; float: right; padding-top: 10px; } </style> <link rel="stylesheet" href="styles.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $(".btn1").on('click',function(){ $("p").hide(); $(".text2").hide() $('body').css("background", "black"); }); var element = $(".text2"); var shown = true; setInterval(toggle, 500); function toggle() { if(shown) { element.hide(); } else { element.show(); } shown = !shown; } }); </script> </head> <body> <p>This is a paragraph.</p> <div class="text2">-- : --</div> <button class="btn1">online</button> </body> </html>

Answer 2

第二個腳本必須在JQuery函數內。

$(document).ready(function(){
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);

function toggle() {
    if(shown) {
        element.hide();
        shown = false;
    } else {
        element.show();
        shown = true;
    }
}
    });

HTML工作表中的多個腳本之一不起作用

問題描述

2 個解決方案

解決方案1
1 2018-02-24 23:25:44

解決方案2
1 已采納 2018-02-24 23:27:42

HTML工作表中的多個腳本之一不起作用

問題描述

2 個解決方案

解決方案1 1 2018-02-24 23:25:44

解決方案2 1 已采納 2018-02-24 23:27:42

解決方案1
1 2018-02-24 23:25:44

解決方案2
1 已采納 2018-02-24 23:27:42