初次使用Javascript，顏色變化

我對JavaScript很陌生，我無法弄清楚如何使這段代碼工作。我有一個HTML頁面和一個Javascript頁面。我試圖讓按鈕正常工作，但我甚至無法使顏色更改工作。我在哪裏錯了？我沒有正確鏈接文件嗎？初次使用Javascript，顏色變化

HTML: 
    <!DOCTYPE html> 
    <html> 
    <head> 
     <title>JavaScript practice</title> 
     <!-- <script type="text/javascript" 

    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
    </script> --> 
     <script type="text/javascript" src="javascript.js"></script> 

    </head> 
    <body> 

     <p>Press the buttons to change the box!</p> 

     <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div> 

     <button id="button1">Grow</button> 
     <button id="button2">Blue</button> 
     <button id="button3">Fade</button> 
     <button id="button4">Reset</button> 


    </body> 
    </html> 

Javascript: 


    document.getElementById("button2").addEventListener("click", function(){ 

     document.getElementById("box").style.backgroundColor = "blue"; 

})

來源

2017-10-15 SRobinson

是您的JavaScript文件在同一目錄作爲HTML文件添加類onClick事件？ –

因爲你的JavaScript查找特定id小號的元素，它不能被那些之前元素被實際加載到內存中運行。

確保你的JavaScript文件在同一目錄中的HTML文件（因爲這樣你鏈接到它，這是它意味着的位置），並把整個<script> ... </script>只是body標籤閉幕前（</body> ），以便在代碼運行時，這些元素將被加載到內存中。

正如你可以從下面的代碼中看到，該代碼將正常工作，如果該開關是由：FYI

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>JavaScript practice</title> 
 
    <!-- It's OK to have your JQuery script reference up here because JQuery isn't 
 
     going to rely on any of your elements in this document in order to run. --> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <p>Press the buttons to change the box!</p> 
 

 
    <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div> 
 

 
    <button id="button1">Grow</button> 
 
    <button id="button2">Blue</button> 
 
    <button id="button3">Fade</button> 
 
    <button id="button4">Reset</button> 
 

 
    <!-- For demo purposes, I have the script in the document. But, when the script 
 
     is in another file, place the reference to that file right here, in place 
 
     of the embedded script: 
 
     
 
    <script src="javascript.js"></script> 
 
    --> 
 
    <script> 
 
    document.getElementById("button2").addEventListener("click", function(){ 
 
     document.getElementById("box").style.backgroundColor = "blue"; 
 
    }); 
 
    </script> 
 
</body> 
 
</html>

：不需要在HTML5文件type=text/javascript。

來源

2017-10-15 15:22:18

謝謝！這非常有幫助;我明白了這一點。我感謝您花時間回答這個問題！ – SRobinson

-3

你需要的風格創建活動類和使用jquery

$('button').on("click",function(){ 
 
    //$('button').not(this).removeClass(); 
 
    $(this).toggleClass('active'); 
 
    
 
    });

.active{background-color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Test</button>

來源

2017-10-15 15:23:42

如果您查看代碼中'script'元素的位置，可以看到問題是腳本在元素位於DOM之前正在執行'document.getElementById（）'。 –

此外，您的答案指的是一個'active'類，在問題中沒有以任何方式詢問，您的答案提供了JQuery解決方案，但問題未使用JQuery進行標記。如果您查看代碼，您將能夠看到JQuery最有可能出現「增長」和「淡化」效果。 –

初次使用Javascript，顏色變化

回答

相關問題