I am new to web development and need help.
I want to create a button which can invert colors when clicked, now the button I created does work but only once, in the sense I want it to invert colors when clicked every time.
I have attached my code images.
As I can only upload 1 image I am putting the one containing the javascript code.
2 Likes
please do not post screenshots of your code. It’s really difficult to debug from a screenshot. Instead post your actual code or better a live sample (on something line repl.it, codepen etc…)
When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
One way to do this is to use a class on the button to signal color changes. If the button does not have the class then it is one color and if it does have the class then it is another color. Your JS just needs to toggle that class on/off as it is clicked.
1 Like
What @bbsmooth said.
Your code grabs all elements with a class “subbody”, iterates over them in a for loop and sets the background-color of each element to powderblue each time you click the button.
I’d suggest something like this:
JavaScript:
function invertColor(){
var x = document.getElementsByClassName("subbody");
for (let i=0; i<x.length; i++){
/* if x has a class of "invert", remove it - otherwise, add it */
if (x.classList.contains('invert')){
x.classList.remove('invert')
} else {
x.classList.add('invert')
}
}
/* same for y - either add or remove the class, */
/* depending on whether it already has it or not */
var y = document.getElementsByTagName(h2);
if (y.classList.contains('invert')){
y.classList.remove('invert');
} else {
y.classList.add('invert')
}
}
Then just set the colours with CSS:
.subbody {
background-color:powderblue;
color:hotpink;
}
.subbody.invert {
background-color:hotpink;
color:powderblue;
}
h2 {
background:color:black;
color:white;
}
h2.invert {
background-color:white;
color:black;
}
Thank you @bbsmooth and @jsdisco .
@jsdisco I edited my code as per your suggestion but nothing is happening.
I am putting my code here again, please check it and suggest something.
@camperextraordinaire Can you help me please.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<h2>Linux</h2>
<div class ="subbody ">
<p>Linux was devloped by <strong> Linus Torvald </strong> in 1972 at AT&T bell Laboratories.
</p>
<p>
Features of Linux
</p>
<ol >
<li>Open Source</li>
<li>Fast</li>
<li>Secure</li>
</ol>
</div>
<button type = "button" onclick= "invertColor()" >Invert</button>
<script>
function invertColor()
{
var x = document.getElementsByClassName("subbody");
for(let i=0;i<x.length;i++)
{
/* if x has a class of "invert", remove it - otherwise, add it */
//x[i].style.backgroundColor = "powderblue";
//x[i].style.color = "Hotpink";
if(x.classList.contains("invert"))
{
x.classList.remove("invert")
}
else
{
x.classList.add("invert");
}
}
var y = document.getElementsByTagName("h2");
//y[0].style.backgroundColor = "white";
//y[0].style.color = "black";
if(y.classList.contains("invert"))
{
y.classList.remove("invert");
}
else
{
y.classList.add("invert");
}
}
</script>
</body>
</html>
This is my css.
.subbody{
background-color :white;
color : black;
}
.subbody.invert{
background-color :powderblue;
color : hotpink;
}
h2 {
background-color :powderblue;
color : hotpink;
}
h2.invert {
background-color : white;
color : black;
}
And this is what is looks when i click invert button:
Now I want the colors to invert back to normal as in first image when clicked on invert button again.
This: <div class ="subbody "> should be this: <div class="subbody">
(Just remove unnecessary whitespace)
EDIT: Wait, so something DOES happen, but you still have the same problem as before where the colours only change once and then never again?
I suggest you invest some time in learning how to debug your own code, it’s an invaluable skill that will save you a lot of time. You’ll need the developer tools of your browser and inspect the DOM, you could also console.log something whenever you click the button.
For example, put a different console.log in each of your if-else statements and see which part of the code executes:
function invertColor()
{
// code for x .., then:
var y = document.getElementsByTagName("h2");
if(y.classList.contains("invert"))
{
y.classList.remove("invert");
console.log('removed invert from y')
}
else
{
y.classList.add("invert");
console.log('added invert to y')
}
}
You’ll quickly see what exactly isn’t working.
1 Like
why use a loop if you never use i inside your loop?
2 Likes