如何重置我的 document.getElementById 颜色值

Question

I'm trying to change the color from red to blue but when the red color come its unchangeable

var colorvalue=0;
var sizevalue;
function CG()
{
    colorvalue ++;
    if (colorvalue==0)
    {
        document.getElementById("testd").style.color = "blue";
    }
    else if(colorvalue==1)
    {
        document.getElementById("testd").style.color = "red";
    }
    if(colorvalue > 1)
    {
        colorvalue = 0;
    }
}

I already got the answer but how do i have more colors

Thanks for seeing my question and if you do thanks for answering

Answer 1

i edit a bit of your code. try below

var colorvalue=0;
var sizevalue;
function CG()
{
    colorvalue ++;
    if (colorvalue % 2 == 0)
    {
        document.getElementById("testd").style.color = "blue";
    }
    else
    {
        document.getElementById("testd").style.color = "red";
    }
}

Used modulo operation: So if there is a remainder of colorvalue , element will be red.

Answer 2

An alternative method would be to use CSS rather than setting the style directly on the element using JavaScript.

Initialise your text with the color red, and then toggle a blue class on/off using classList .

 const test = document.querySelector('.test'); const button = document.querySelector('button'); button.addEventListener('click', handleClick, false); function handleClick() { test.classList.toggle('blue'); }

 .test { color: red; } .blue { color: blue; }

 <p class="test">This is a test</p> <button>Change color</button>