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 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>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
// 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>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?