JavaScript styles not getting applied to page elements

JavaScript
1

Hello everyone! can some one help me with this, i dont wanted to get it fix, i just want to know where to start!

code of help needed:

<!DOCTYPE html>
<html>
<head>
    <title>Jiggle Into JavaScript</title>
    <!-- <script type="text/javascript" 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="button1Btn">Grow</button>
    <button id="button2Btn">Blue</button>
    <button id="button3Btn">Fade</button>
    <button id="button4Btn">Reset</button>

    <script type="text/javascript" src="javascript.js"></script>

</body>
</html>

i have to make that orange box to grow, change color, fade and reset, but it seems like i not hitting on the nail! I’ve tried added the document.getElementbyid, but its not working, can someone show me where to start?

thanks!

2

What do you have in the file you link to with the <script></script> tags?

3 
$(document).ready()
document.getElementById("button1").addEventListener("click", function Blue( {
    document.getElementById("box").style.backgroundColor = "blue";
});

document.getElementById("button1").addEventListener("click", function Grow( {
    document.getElementById("box").style.height = "250px";
});

document.getElementById("button3").addEventListener("click", function Fade(){
    document.getElementById("box").style.opacity = "0.5";
});

document.getElementById("button4").addEventListener("click", function Reset(){
    document.getElementById("box").style.height = "150px";
});

document.getElementById("Reset").addEventListener("click", function Reset(){
    document.getElementById("box").style.opacity = "1";
});

document.getElementById("Reset").addEventListener("click", function Reset(){
    document.getElementById("box").style.backgroundColor = "orange";
});

this is what i have so far, but still not responding

4

Try it with the CSS style=" ..... " out of the tag and in <head><style> ..... instead.

5

Thanks!!! it worked!

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.