Theodore Steiner Theodore Steiner - 1 month ago 11
CSS Question

Javascript - Adding Class and Style Prescience

I'm trying to make little progress indicators for a form that change depending on the page you are on. I thought the easiest way to do this would be to create the circle ID's, style them, and then just add a class list with one or two stylistic changes to show something different as a specific page was brought up.

When my function executes, the new class with the changes is being added -- the dom is proving that -- but, the style is not overtaking the original.

I've tried classList.Add, classList.toggle, className.add/Classname.toggle. Nothing seems to work.

Why might that be?



function nextPage()
{
var step2 = document.getElementById("step2");

step2.classList.toggle("newClass");

};

#step2
{
height: 27px;
width: 27px;
border: 1px solid #e5e5e5;
background: linear-gradient(#f2f2f2, #e9e9e9);
border-radius: 50%;
content: "";
margin-left: 95.5px;
float: left;
}

.newClass
{
background: linear-gradient(#f2f2f2, #8c66ff);
}

<div id="step2"></div>

<br />

<p id="next" onclick="nextPage()">Next</p>




Answer

Your id step2 will always override your class newClass.

Easiest solution is just to change .newClass { ... } to #step2.newClass { ... } in your CSS to make it more specific

function nextPage()
{
	var step2 = document.getElementById("step2");
	
step2.classList.toggle("newClass");
	
};
#step2
{
	height: 27px;
	width: 27px;
	border: 1px solid #e5e5e5;
	background: linear-gradient(#f2f2f2, #e9e9e9);
	border-radius: 50%;
	content: "";
	margin-left: 95.5px;
	float: left;
}

#step2.newClass
{
	background: linear-gradient(#f2f2f2, #8c66ff);
}
<div id="step2"></div>

<br />

<p id="next" onclick="nextPage()">Next</p>

Comments