如何在 for 循环中插入一个中断，从继续到该行直到用户提交表单 (Javascript)

Question

我正在尝试做一个实验，其中我有一组图像，我想按顺序显示，并要求用户回答他们认为图像所描绘的内容。为了做到这一点，我在 HTML 文件中使用 Java script 中的 for 循环，它将循环图像数量的次数。我正在尝试让循环等待继续下一行代码，直到用户提交表单，但我不确定该怎么做。

我尝试在父 for 循环中使用 While true 循环，其中包含一个 setTimeout 函数来检查用户是否提交了表单。我还尝试添加事件处理程序来检查表单是否已提交，但循环不会像我希望的那样等待下一行。

var data = new FormData();
var createform = document.getElementById('usrInpt');
var imageNames = new Array("practiceImages/RiseFrame01.jpg","practiceImages/RiseFrame02.jpg","practiceImages/RiseFrame03.jpg","practiceImages/RiseFrame04.jpg","practiceImages/RiseFrame05.jpg","practiceImages/RiseFrame06.jpg","practiceImages/RiseFrame07.jpg","practiceImages/RiseFrame08.jpg","practiceImages/RiseFrame09.jpg","practiceImages/RiseFrame10.jpg") // This is the array of images
function happyData() {
console.log("in happydata")
buttonPressed = true
//var newImageName = document.getElementById('imgName');
//newImageName.parentNode.removeChild(newImageName);
//var hiddenElementJS = document.getElementById('hiddenElement');
//hiddenElementJS.parentNode.removeChild(hiddenElementJS)
//submissionName.setAttribute("value", "")
}
for (i = 0; i<10; i++) {
console.log(i)
var buttonPressed = false;
var hiddenElement = document.createElement('input');
hiddenElement.setAttribute("type", "hidden");
hiddenElement.setAttribute("id", "hiddenElement");
hiddenElement.setAttribute("name", "imageName");
var currentImageStr = imageNames[i]
var fields = currentImageStr.split('/')
console.log(fields[1])
hiddenElement.setAttribute("value", fields[1])
createform.appendChild(hiddenElement)
var y = document.getElementById("imageDisplay");
var newImage = document.createElement('img');
newImage.setAttribute("id", "imgName");
newImage.setAttribute("src",imageNames[i]);
newImage.setAttribute("width", "30%")
newImage.setAttribute("height", "50%")
newImage.setAttribute("max-width","30%");
newImage.setAttribute("max-height","50%");
y.appendChild(newImage);
var Hisubmit = document.getElementById('submit');
console.log(i)
// THIS IS WHERE I WOULD LIKE IT TO PAUSE UNTIL THE USER SUBMITS THE FORM
console.log(i)
}

使用上面的代码，它应该打印出网页上的所有 10 张图像，包括用于响应的文本框。

Answer 1

您可以使用do ... while并运行循环，直到用户输入回答问题

像这样的东西，所以你会禁用表单按钮，直到他输入答案

do {
// disable submit button
// or make alert message to tell him to answer first
} while(userInput == '')

Answer 2

由于您处于 JavaScript for 循环中，因此不可能让FORM在渲染DOM时像您描述的那样等待INPUT。

我相信您的方法需要修改，以便您创建一个状态对象来管理要评级的图像列表以及正在评级的当前图像。用户SUBMITsFORM后，当前图像将递增，操作将持续到最后。

如果你真的想暂停JavaScript for循环，我建议使用prompt方法：

for (i = 0; i<10; i++) {
//...
var input = prompt("What do you think of image " + i + "?", "10");
//...
}