Este código muestra dos opciones de color (azul y amarillo) y dos opciones de transporte (coche y bicicleta). Debajo de esto hay un div en el que me gustaría mostrar, con innerHTML, en qué color y opciones de transporte ha hecho clic el usuario. Las variables se han inicializado en color: yellow y transport:plane . Cuando se hace clic en azul y automóvil, no se muestra nada debajo.
Sin embargo, cuando hago clic en los cuadros azul y automóvil, la consola indica que las variables se cambiaron a azul y automóvil (desde sus valores iniciales de amarillo y avión). Y si inicializo las variables a azul y automóvil, la parte de HTML interno parece funcionar.
// initialize variables let color = 'yellow'; let transport = 'plane'; // colors const blue = document.querySelector('.blue'); const yellow = document.querySelector('.yellow'); const car = document.querySelector('.car'); const bike = document.querySelector('.bike'); // innerHTML block if car = blue and transport = car const blueCar = `<p>This is a blue car</p>`; // location where innerHTML block will be applied const output = document.querySelector('.output'); // event listeners and functions applied to blue and car blue.addEventListener('click', addBlue); function addBlue() { color = 'blue'; } car.addEventListener('click', addCar); function addCar() { transport = 'car'; } // conditional statement if (color == 'blue' && transport == 'car') { output.innerHTML = blueCar; } .blue { font-size: 1rem; border: 2px solid blue; } .blue:hover { background-color: blue; cursor: pointer; } .yellow { font-size: 1rem; border: 2px solid yellow; } .car { font-size: 1rem; border: 2px solid black; } .car:hover { background-color: grey; cursor: pointer; } .bike { font-size: 1rem; border: 2px solid black; } <!-- color options, for user to click --> <div class="blue">blue</div> <div class="yellow">yellow</div> <!-- transport options, for user to click --> <div class="car">car</div> <div class="bike">bike</div> <!-- display clicked color and transport options --> <div class="output"></div>Solo verifica su condición una vez cuando la página se carga por primera vez
// conditional statement if (color == 'blue' && transport == 'car') { output.innerHTML = blueCar; }Debe verificar esta condición después de hacer clic en cada uno de los botones. También puedes crear una función.
checkIfBlueCar() ...donde verificará la condición y devolverá un valor booleano en el resultado
// initialize variables let color = 'yellow'; let transport = 'plane'; // colors const blue = document.querySelector('.blue'); const yellow = document.querySelector('.yellow'); const car = document.querySelector('.car'); const bike = document.querySelector('.bike'); // innerHTML block if car = blue and transport = car const blueCar = `<p>This is a blue car</p>`; // location where innerHTML block will be applied const output = document.querySelector('.output'); // event listeners and functions applied to blue and car blue.addEventListener('click', addBlue); function addBlue() { color = 'blue'; render() } car.addEventListener('click', addCar); function addCar() { transport = 'car'; render() } // conditional statement function render() { if (color == 'blue' && transport == 'car') { output.innerHTML = blueCar; } } render() .blue { font-size: 1rem; border: 2px solid blue; } .blue:hover { background-color: blue; cursor: pointer; } .yellow { font-size: 1rem; border: 2px solid yellow; } .car { font-size: 1rem; border: 2px solid black; } .car:hover { background-color: grey; cursor: pointer; } .bike { font-size: 1rem; border: 2px solid black; } <!-- color options, for user to click --> <div class="blue">blue</div> <div class="yellow">yellow</div> <!-- transport options, for user to click --> <div class="car">car</div> <div class="bike">bike</div> <!-- display clicked color and transport options --> <div class="output"></div>Intenta usar en función este código.
if (color == 'blue' && transport == 'car') { output.innerHTML = blueCar; }Intente reemplazar con.
function renderOutput() { // conditional statement if (color == 'blue' && transport == 'car') { output.innerHTML = blueCar; } } renderOutput();Código de ejemplo: https://codepen.io/yasgo/pen/eYyaaZz
¿Esto es lo que querías hacer?