初次使用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，颜色变化

回答

相关问题