How to change body color with onclick() from Buttons? Javascript

Asked

Viewed 373 times

0

Hello, in the following exercise, there should be 3 Buttons, and clicking on each one, will change the body color by the color indicated on the button (using the same function for all), however my attempt was failed, I would like to know why, follows down the statement of the exercise and my attempt:

1)Elements must change the background color of the page when clicked according to its color. Present the javascript needed for this to work.

button id="blue">Blue

button id="green">Green

button id="red">Red

html:

<html>

<head>
    <meta charset = "utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "./css/style.css">
    <title>Meu Site</title>
</head>

<body>


    <main>

        <button id=”azul” onclick="trocarcor(id)">Azul</button>
        <button id=”verde” onclick="trocarcor(id)">Verde</button>
        <button id=”vermelho” onclick="trocarcor(id)">Vermelho</button>

    </main>

    <script src="./scripts/app.js"></script>
</body>

Javacript:

function trocarcor(id) {
if (id == "vermelho") {
    document.getElementsByTagName("body")[0].style.background = "red"
}
else if(id == "azul"){ document.getElementsByTagName("body")[0].style.background = "blue"}
else if(id == "verde"){  document.getElementsByTagName("body")[0].style.background = "green"}

console.log(id)}
javascript javascript-events

  • What he’s printing on console.log of id?

  • is printing the respective colors of each button, I did to confirm that the id was receiving "red", "green" and "blue"

2 answers

2


The problem is that you are using these kind of quotes ” (known as quotation marks or curved quotes) in the attribute id which does not work as delimiter: or uses normal double quotes " or simple '.

Probably the.log(id) console is displaying ”azul” (or other colors) and is not satisfying any of the if's.

Behold:

function trocarcor(id) {
if (id == "vermelho") {
    document.getElementsByTagName("body")[0].style.background = "red"
}
else if(id == "azul"){ document.getElementsByTagName("body")[0].style.background = "blue"}
else if(id == "verde"){  document.getElementsByTagName("body")[0].style.background = "green"}

console.log(id)}
<main>
   <button id="azul" onclick="trocarcor(id)">Azul</button>
   <button id="verde" onclick="trocarcor(id)">Verde</button>
   <button id="vermelho" onclick="trocarcor(id)">Vermelho</button>
</main>

  • Thank you very much, that was it!!

  • But one question, I put a.log(id) console inside Function, and it was returning "red", "blue" etc, (without using this), shouldn’t it be working? since id = "red" ?

  • But I was changing the body color?

  • no, just returned console.log(id) "red"

  • I changed the answer. The problem seems to be in quotes.

  • thank you, it was error in the statement of the question then, had not noticed...

  • You can mark the answer with

Show 2 more comments

1

Following @Sam’s response, you can optimize your code as follows:

function trocarcor(id) {
    document.getElementsByTagName("body")[0].style.background = id;
}
<main>
   <button id="blue" onclick="trocarcor(this.id)">Azul</button>
   <button id="green" onclick="trocarcor(this.id)">Verde</button>
   <button id="red" onclick="trocarcor(this.id)">Vermelho</button>
</main>

Browser other questions tagged javascript javascript-events

You are not signed in. Login or sign up in order to post.