// (main.js) const themechange = document.querySelector('button'); // const text = document.getElementById('text'); themechange.addEventListener('click', () => { if (document.getElementById('text').style.color == 'black') { document.getElementById('text').style.color = 'red'; } else if (document.getElementById('text').style.color == 'red') { document.getElementById('text').style.color = 'blue'; } }) <head> <script src="main.js" defer></script> </head> <body class="chapter-3"> <h2 id="title"></h2> <article id="mission"> <p></p> <p>(#ff0000) -> (#0000ff) -> (#ff0000) -> (#0000ff) </p> </article> <div id="container"> <button></button> <div id="text"></div> </div> </body>No sé por qué este código no funcionó. funciona un código similar, pero creo que me perdí el código o la idea de javascript. pero no puedo encontrar... ayuda
Su texto original no contiene un color definido. Así que tanto if como else if son ignorados.
Aquí un ejemplo de trabajo definiendo el color primero.
const themechange = document.querySelector('button'); const text = document.getElementById('text'); text.style.color = 'black' themechange.addEventListener('click', () => { if (document.getElementById('text').style.color == 'black') { document.getElementById('text').style.color = 'red'; } else if (document.getElementById('text').style.color == 'red') { document.getElementById('text').style.color = 'blue'; } }) <head> <script src="main.js" defer></script> </head> <body class="chapter-3"> <h2 id="title">토글을 구현해보자</h2> <article id="mission"> <p>JS를 이용해서 색변경 버튼을 누를때마다 버튼 아래에 있는 "안녕" 텍스트의 색이 빨강(#ff0000)와 파랑(#0000ff)로 번갈아가면서 변하도록 만들어주세요</p> <p>빨강(#ff0000) -> 파랑(#0000ff) -> 빨강(#ff0000) -> 파랑(#0000ff) 의 순서가 되게 해주세요</p> </article> <div id="container"> <button>색변경</button> <div id="text">안녕</div> </div> </body> </html>Por otro lado, es posible que desee definir un comportamiento predeterminado.
Por ejemplo, el color comienza con el negro, luego se vuelve azul, pero no hay caso después de eso.
Como el color del texto no está establecido inicialmente, simplemente puede suponer que el color original es negro. Cambiar su código a lo siguiente cambia el color inicial (no establecido) también a rojo primero, al hacer clic en el siguiente botón, el color del texto se actualiza a azul:
// (main.js) const themechange = document.querySelector('button'); // const text = document.getElementById('text'); themechange.addEventListener('click', () => { let textColor = document.getElementById('text').style.color; console.log({textColor}); //initially gives ''! if (textColor == 'black' || textColor == '') { document.getElementById('text').style.color = 'red'; } else if (textColor == 'red') { document.getElementById('text').style.color = 'blue'; } });