CODEWITHSUNDEEP
javascripthtmlcss
Linnéa Borealis
Linnéa Borealis

Reputation: 13

How can I get onclick event to work for changing CSS attributes?

I am a beginner trying Javascript. I would like to change the font color and font family with an onclick event (and also the gradient of the background image but I can't even guess how to access it). I have made a button which when clicked should run spookFunction and change the font color in body to orange and the font family to google font Bangers. I have tried to make a fiddle for you to see the code (this is my first time using JSFiddle so I'm not sure how it works): https://jsfiddle.net/Linnea_Borealis/u8n9ezhs/10/ I clipped in a some example code I found just to see if it would work and compare to my own code:

Click me to change my text color.

    <script>
    function myFunction() {
    document.getElementById("demo").style.color = "red";
    }
    </script>

That part works fine, but the other part doesn't. What is the different?

I notice in VS Code that "style" has another color in "document.getElementById("welcome").style.color="red"" than in "document.getElementsByTagName("body").style.color="orange";" and "document.getElementsByTagName("body").style.fontFamily="Bangers", cursive;" Am I using getElementsByTagName in the wrong way?

Also, in JS Fiddle there is a white rectangle around the text, which I do not see when I open up the html-file in my browser... Why? I'm very grateful if anyone can explain this in an easy beginner-friendly way.

Upvotes: 0

Views: 743

Answers (3)

Osman Durdag
Osman Durdag

Reputation: 955

The white rectangle is your body. If you add your css body class background-color:black; you can see it. And other answers are true for about the getElementsByTagName.

Try this:

function myFunction() {
  document.getElementById("demo").style.color = "red";
}

function spookFunction() {
  document.getElementsByTagName("body")[0].style.color="orange";
  document.getElementsByTagName("body")[0].style.fontFamily="Bangers, cursive";
  document.getElementById("welcome").style.color="red"
 }
html {
  background-image: linear-gradient(#0099ff, white);
  min-height: 100%;
}
body {
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 10%;
  font-family: 'Lobster', cursive;
  color: white;
  background-color: black;
}

h1{ font-size: 50px; }
p {
  font-size: 30px;
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Spook My Page</title>
        <link rel="stylesheet" type="text/css" href="Style.css">
        <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Lobster&display=swap" 
        rel="stylesheet">
    </head>
    <body>
        <h1 id="welcome">Welcome Friend!</h1> 
        <p>To change the color scheme — Click the button below!</p>
        <p id="demo" onclick="myFunction()">Click me to change my text color.</p>

        <button type="button" onclick="spookFunction()">Click Me!
        </button>
    </body>
</html>

Upvotes: 1

shkumbin hasani
shkumbin hasani

Reputation: 31

function spookFunction() {
        document.getElementsByTagName("BODY")[0].style.backgroundColor="orange";
       document.getElementsByTagName("BODY")[0].style.fontFamily="Bangers,cursive";
        
        document.getElementById("welcome").style.backgroundColor="red"}

This should do the job, you used the wrong variable name for backgroundColor and it couldnt find the body because document.getElementsByTagName("BODY") returns an array of tags

Upvotes: 0

Badmaash
Badmaash

Reputation: 795

getElementsByTagName returns array instead of a single element. So you will have to access an element like this getElementsByTagName("body")[0]. Hope this would help.

Upvotes: 0

Related Questions