So like my previous question, I am once again asking for your JavaScript support.
This is what I’ve come up with which for some reason, doesn’t work:
function changecolor() {
let cc = document.getElementById('font');
let btn = document.getElementById('btn2');
if (cc.style.color == '#000000') {
cc.style.color = '#ff0000';
btn.innerHTML = 'Black';
}
else if (cc.style.color == '#ff0000') {
cc.style.color = '#000000';
btn.innerHTML = 'Red';
}
}<p id="font" style="font-size: 25px; color: #000000;">Lorem Ipsum</p>
<button type="button" id="btn2" onclick="changecolor()">Red</button>>Solution :
If you console.log the color (console.log(cc.style.color)), you would see (in Chrome at least), that the color is logged as an RGB value (rgb(0, 0, 0)).
So just change the conditions:
function changecolor() {
let cc = document.getElementById('font');
let btn = document.getElementById('btn2');
console.log(cc.style.color)
if (cc.style.color == 'rgb(0, 0, 0)') {
cc.style.color = '#ff0000';
btn.innerHTML = 'Black';
}
else if (cc.style.color == 'rgb(255, 0, 0)') {
cc.style.color = '#000000';
btn.innerHTML = 'Red';
}
}<p id="font" style="font-size: 25px; color: #000000;">Lorem Ipsum</p>
<button type="button" id="btn2" onclick="changecolor()">Red</button>