innerHTML不顯示使用事件處理程式設定的新變數

此代碼顯示兩個顏色選項（藍色和黃色）和兩個交通選項（汽車和自行車）。下面是一個 div，我想用 innerHTML 在其中顯示用戶單擊的顏色和傳輸選項。變數已初始化為color: yellow和transport:plane。單擊藍色和汽車時，下方不顯示任何內容。

但是，當我單擊藍色和汽車框時，控制臺會指示變數已更改為藍色和汽車（從黃色和平面的初始值開始）。如果我將變數初始化為 blue 和 car，innerHTML 部分似乎可以作業。

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

uj5u.com熱心網友回復：

您只需在頁面首次加載時檢查一次您的狀況

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

單擊每個按鈕后，您需要檢查此情況。您還可以創建一個函式

checkIfBlueCar() ...

您將在其中檢查條件并在結果上回傳布林值

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

嘗試在函式中使用此代碼。

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

嘗試替換為。

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

renderOutput();

示例代碼：https ://codepen.io/yasgo/pen/eYyaaZz

這是你想做的嗎？

標籤：javascript html css

上一篇：如何從TypeScript函式回傳字串（或JSON物件）？

下一篇： =顯示全部，=只顯示單個專案