<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">
JavaScript can change the style of an HTML element.
</p>
<script>
function myFunction()
{
x=document.getElementById("demo")
if (x.style.color="#000000")
{
x.style.color="#FF0000";
//alert(x.style.color);
}
else
{
x.style.color="#000000";
//alert(x.style.color);
}
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
above code not working second time Click
i tried with many different colors
x.style.color not accepting in else block
else block not working
please help
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">
JavaScript can change the style of an HTML element.
</p>
<script>
function myFunction()
{
x=document.getElementById("demo")
if (x.style.color="#000000")
{
x.style.color="#FF0000";
//alert(x.style.color);
}
else
{
x.style.color="#000000";
//alert(x.style.color);
}
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
above code not working second time Click
i tried with many different colors
x.style.color not accepting in else block
else block not working
please help
Share Improve this question edited Mar 5, 2014 at 10:15 BillyBigPotatoes 1,33811 silver badges23 bronze badges asked Mar 5, 2014 at 10:10 ømiømi 5211 gold badge10 silver badges39 bronze badges 4- You should consider using JQuery, so you can toggle your colors and use a lot of other useful things. Your function would bee a one-liner. – Rob Commented Mar 5, 2014 at 10:14
- 3 One line plus almost 100 kilobytes of minified jQuery… – Quentin Commented Mar 5, 2014 at 10:16
- 1 i am trying to learn javascript @Robert – ømi Commented Mar 5, 2014 at 10:16
-
2
You must also use
==for parison. – Kevin Bowersox Commented Mar 5, 2014 at 10:17
7 Answers
Reset to default 4A) use == instead of = in the if condition statement
B) check against rgb color notation and not hex
function myFunction() {
x = document.getElementById("demo");
if (x.style.color == "rgb(0, 0, 0)") {
x.style.color = "#FF0000";
} else {
x.style.color = "#000000";
}
}
http://jsfiddle/4QUWq/1/
Different browsers might return different values for the same colors. You better use different logic to toggle the colors. What I suggest, using pure JavaScript, is this:
var demoColors = ["#000000", "#FF0000"];
var demoFlag = true;
function myFunction()
{
var demo = document.getElementById("demo");
demo.style.color = demoColors[+demoFlag]
demoFlag = !demoFlag;
}
Live test case.
When I test in chrome, color is rgb(255, 0, 0) that's why the if condition is always false. And your assigning in the if and not paring (= vs ==) Take a look at: Javascript - Converting colors (numbers -> strings) vice versa
When performing a parison such as in a conditional use == instead of =. = is the assignment operator. After changing the parison operator you must use rgb instead of the color code.
function myFunction()
{
x=document.getElementById("demo");
if (x.style.color=="rgb(0, 0, 0)")
{
x.style.color="#FF0000";
//alert(x.style.color);
}
else
{
x.style.color="#000000";
}
}
Use rgb color notation instead of hex
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">
JavaScript can change the style of an HTML element.
</p>
<script>
function myFunction() {
x = document.getElementById("demo");
if (x.style.color == "rgb(0, 0, 0)") {
x.style.color = "#FF0000";
}
else {
x.style.color = "#000000";
}
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
Use style.backgroundColor.
It returns name of the color or in RGB format so you will have to convert it.
const counter = document.querySelector('#counter')
const btns = document.querySelectorAll('.btn')
let count = 0
btns.forEach((btn) => {
btn.addEventListener('click' ,(e) => {
const styles = e.currentTarget.classList
if (styles.contains('increase')) {
count++
}else if (styles.contains('decrease')) {
count--
} else {
count=0
}
//section 01
if (count>0 ) {
counter.style.color == "red"
}
//section 02
if (count < 0 ) {
counter.style.color = "#ff0000"
}
//section 03
if (count === 0) {
counter.style.color == "red"
}
counter.textContent = count
})
})