添加图像到测验结果javascript

Adding image to quiz results javascript

本文关键字:结果 javascript 图像 添加      更新时间:2023-09-26

我做了一个个性测验,并有一个警报的一切工作,但现在我想要警报告诉我的具体结果,然后为页面去可能是一个弹出图像或另一个页面与图像重复的结果。

这是代码的测试结果部分。我应该在for循环部分添加图像吗?或者再做一个for循环?我实际上是很新的JS,我不完全确定下一步是什么。

我应该以任何形式使用类吗?或者是img。SRC的出路是什么?

var chosen = nations[0];
    for (i=1; i<nations.length; i++) {
        if (chosen.score <= nations[i].score) {
            chosen = nations[i];
        }
    }
    alert ("You belong to the nation of " + chosen.name + " !");

我想你是在谈论一个基于结果的不同选项的模态。上述说法肯定是正确的。查看下面的JS文档,它展示了如何基于不同的结果实现一些DOM操作。

js小提琴

var win = 0,
    result = Math.random();
document.getElementById( "myBtn" ).addEventListener( "click", successImage );
if ( result < .33 ) {
    document.getElementById( "image1" ).style.display = "block";                
} else if ( result < .66 ) {
    document.getElementById( "image2" ).style.display = "block";        
} else {
    document.getElementById( "image3" ).style.display = "block";        
}
function successImage () { 
    win++;
    if ( win % 2 !== 0 ) {
        document.getElementById( "modal" ).style.display = "block";
    } else {
        document.getElementById( "modal" ).style.display = "none";  
    }
}

您应该在循环之后创建/更改图像。一旦循环完成,它将被处理。一种方法是在页面上放置图像,例如ajax加载gif并获取images元素并在循环完成时将src设置为新图像,例如

document.getElementById('imageId').src = 'myimage.jpg';

你也可以动态地创建image元素,像这样

var image = document.createElement('img');
image.setAttribute('src','myimage.jpg');
document.body.appendChild(image);