我的标题的切换颜色在红色和绿色之间

Question

I have wrote a code, its a simple code that changes the color of HTML Heading to red and then to green and it keeps going on. But my question here is regarding defining the variable "value". So every-time i define the variable value globally the loop for toggling color between red and green works, but when i declare it inside my start function the loop doesn't work it just get stuck in green (ie my first instance). Any suggestions why it behaves like this??

Regards, New Coder.

// first i decleared header value

header = document.querySelector('h1')


// after that i needed a toggel function to toggel the boolean values


function toggel(input)

{

output=!(input)

return output

}

// here if i comment var value out and put this inside the function start 
it will just work for one instance and code will stop. And if put it outside like its down below, the LOOP will keep on going long toggling red to green and back to red

var value = toggel(true)


//  after that i made a fucntion called "start" which will be called in 
1000 miliseconds of interval and every time its called i toggel the value 
of boolean value

function start()

{

function colorchanger()

{

  // var value = toggel(value)

  if (value == true)

  {

    return "red";

  }

  else

  {

    return "green";

      }

}

 out = colorchanger()

 console.log(out)

 header.style.color = out;

 value = toggel(value)

}

setInterval("start()", 1000);

Answer 1

so compliqued ?

 header = document.querySelector('h1'); setInterval(() => header.classList.toggle('onGreen') , 1000); 

  h1 { color:red; } h1.onGreen { color:green; } 

 <h1>H1 "Header"</h1>