CODEWITHSUNDEEP
javascripthtmlcss
João Fábio Marques
João Fábio Marques

Reputation: 23

JavaScript background color change function does not interact with the html button

this is my first time using StackOverflow, so I still don't know how to use the code snippets properly.

I am still a beginner into programming and chose to start with the front-end side, i've done an orange background with "this is the red heading" written in red, it worked.

however, I'm trying to make a button that when it's clicked, only the background color changes from orange to yellow, but the button doesn't do anything at all.

here's the code("estilo" is the name of the CSS file and "responsividade" is the name of the JS file):

function changeColor() {
  document.getElementById("redhead").style.backgroundColor = "yellowbg";
}
#redhead {
  background-color: orange;
  color: red;
  padding: 40px;
  text-align: center;
}

#yellowbg {
  background-color: yellow;
  padding: 40px;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head>

  <body>

    <link rel="stylesheet" href="estilo.css">

    <script src="responsividade.js"></script>

    <h1 id="redhead">this is the red heading</h1>


    <button type="button" onclick="changeColor()">Click Here</button>

  </body>
</head>

</html>

Upvotes: 1

Views: 78

Answers (5)

Md Masud
Md Masud

Reputation: 2713

In your Js function you need to a background color as you trying to do.

document.getElementById("redhead").style.backgroundColor = "yellowbg";

"yellowbg" is not a color but an Id.

So you need to change that to

 document.getElementById("redhead").style.backgroundColor = "yellow";

You can add css property to a class of an element and with js change the class name to add different property to that element.

document.getElementById("redhead").className = "newClass";

Upvotes: 0

Hanna Rose
Hanna Rose

Reputation: 422

const colorChanger = {
  'eq'        : 0,
  'change'    : function(targetID, colorCircles) {
    document.getElementById(targetID).style.backgroundColor = colorCircles[this.eq];
    this.eq = (this.eq === colorCircles.length-1) ? 0:this.eq += 1;
  }
}
#test{
  border  :1px solid #000;
  width   :100px;
  height  :100px;
}
<div id="test"></div>
<button onclick="colorChanger.change('test', ['red','yellow', 'green', 'blue', 'purple'])">Change Color</button>

<!--
colorChanger.change('test', ['red','yellow', 'green', 'blue', 'purple']
------------------------------------------------------
>target is something with id 'test'
>and background color of target ID will be change using this circles ['red','yellow', 'green', 'blue', 'purple']
-->

Upvotes: 0

nagendra nag
nagendra nag

Reputation: 1332

  1. You have written your code in the head tag.
  2. In background-color value given as yellowbg.

function changeColor() {
    document.getElementById("redhead").style.backgroundColor = "yellow";
}
#redhead {
    background-color: orange;
    color: red;
    padding: 40px;
    text-align: center;
}

#yellowbg {
    background-color: yellow;
    padding: 40px;
    text-align: center;
}
<!DOCTYPE html>
<html>

<head>


</head>

<body>

    <link rel="stylesheet" href="estilo.css">

    <script src="responsividade.js"></script>

    <h1 id="redhead">this is the red heading</h1>


    <button type="button" onclick="changeColor()">Click Here</button>

</body>

</html>

#yellowbg ruleset all properties are there in #readhead ruleset except background-color so in js, you can just update background color only.

Upvotes: 0

Hasan Misbah
Hasan Misbah

Reputation: 46

if you want to change color try document.getElementById("redhead").style.backgroundColor = "yellow";

or if you want to set another id try document.getElementById("redhead").setAttribute('id', 'yellowbg');

Upvotes: 0

Ivan Bacher
Ivan Bacher

Reputation: 6154

Here: document.getElementById("redhead").style.backgroundColor = "yellow"; you are trying to assign a css class name to the backgroun color property.

function changeColor() {
  document.getElementById("redhead").style.backgroundColor = "yellow";
}
#redhead {
  background-color: orange;
  color: red;
  padding: 40px;
  text-align: center;
}

#yellowbg {
  background-color: yellow;
  padding: 40px;
  text-align: center;
}
<!DOCTYPE html>
<html>

<head> </head>

  <body>

    <link rel="stylesheet" href="estilo.css">

    <script src="responsividade.js"></script>

    <h1 id="redhead">this is the red heading</h1>


    <button type="button" onclick="changeColor()">Click Here</button>

  </body>


</html>

Upvotes: 1

Related Questions