innerHTML is not displaying new variables set with event handlers-CodePudding

This code displays two color options (blue and yellow) and two transport options (car and bike). Below this is a div in which I would like to display, with innerHTML, which color and transport options the user has clicked. The variables have been initialized to color: yellow and transport:plane. When blue and car are clicked, nothing displays below.

However, when I click the blue and car boxes, the console then indicates that the variables have been changed to blue and car (from their starting values of yellow and plane). And if I initialize the variables to blue and car, the innerHTML portion seems to work.

// 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 >blue</div>
<div >yellow</div>

<!-- transport options, for user to click  -->
<div >car</div>
<div >bike</div>

<!-- display clicked color and transport options -->
<div ></div>

CodePudding user response：

You only check your condition once when the page loads for the first time

// conditional statement 
if (color == 'blue' && transport == 'car') {
output.innerHTML = blueCar; 
}

You need to check this condition after you click on each of the buttons. You can also create a function

checkIfBlueCar() ...

where you will check the condition and return a boolean on the result

CodePudding user response：

// 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 >blue</div>
<div >yellow</div>

<!-- transport options, for user to click  -->
<div >car</div>
<div >bike</div>

<!-- display clicked color and transport options -->
<div ></div>

CodePudding user response：

Try use in function this code.

if (color == 'blue' && transport == 'car') {
    output.innerHTML = blueCar; 
}

Try replacing with.

function renderOutput() {
  // conditional statement 
  if (color == 'blue' && transport == 'car') {
    output.innerHTML = blueCar; 
  } 
}

renderOutput();

Example code: https://codepen.io/yasgo/pen/eYyaaZz

This is what you wanted to do?