拨开荷叶行,寻梦已然成。仙女莲花里,翩翩白鹭情。
IMG-LOGO
主页 文章列表 无法显示使用document.createElement创建的不同影像

无法显示使用document.createElement创建的不同影像

白鹭 - 2022-01-26 2088 0 0

我正在尝试使用 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 陈述句。

标签:

0 评论

发表评论

您的电子邮件地址不会被公开。 必填的字段已做标记 *