Question

我做了一个个性测验并且让一切都处于警报状态，但现在我希望警报告诉我具体的结果然后页面可能会弹出一个图像或另一个图像重新显示结果。

这是代码的测验结果部分。我应该在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 + " !");

Answer 1

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

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

你也可以动态创建图像元素

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

Answer 2

我认为你在谈论一个基于结果的不同选项的模态。上述声明肯定正在进行中。查看下面的JS Fiddle，它显示了如何根据不同的结果实现一些DOM操作。

js fiddle

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";  
    }
}

将图像添加到测验结果javascript

2 个答案: