我正在嘗試使用 vanilla javascript 和 document.createElement() 方法根據 json 問題 id 顯示不同的影像。此代碼不會顯示任何影像，但如果我只嘗試顯示一張影像，它將起作用。這是相關的代碼：
let img = document.createElement("img");
img.src = 'images/image1'
if (questions.id === 0) {
questionImageElement.appendChild(img)
}
let img2 = document.createElement('img')
img2.src = "images/image2"
if(questions.id === 1) {
questionImageElement.appendChild(img2)
}
let img3 = document.createElement('img')
img3.src = "images/image3"
if(questions.id === 2) {
questionImageElement.appendChild(img3)
}
let img4 = document.createElement('img')
img4.src = "images/image4.png"
if(questions.id === 3) {
questionImageElement.appendChild(img4)
} else {
questionImageElement.innerText = " "
}
示例 json 問題
{
id: 0,
question: ' 1. How many possible values are there for a boolean variable?',
answers: [
{text: '1', correct: false},
{text: '2', correct: true},
{text: '3', correct: false},
{text: 'There is an infinite number of possibilities', correct: false}
]
},
如果我只有一個 document.createElement() 方法，就會顯示影像。這種方式與多個 createElement() 方法，它不會作業。我曾嘗試使用節點陣列并將陣列索引輸入到 appendChild 方法中，例如，appendChild(img[0])但這也不起作用。如何做到這一點？
uj5u.com熱心網友回復：
洗掉最后一個 else 陳述句。如果 id 不等于 3，則您擁有的最后一條 else 陳述句是清除 DOM 中的所有影像。在這種情況下，您的 id 為 0，因此可能發生的情況是正在添加影像，但隨后被清除通過那個 else 陳述句。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/389472.html
標籤：javascript
上一篇：如果條件渲染不起作用，則反應多級