JavaScript测验应用问题：无法同时在4个按钮上显示图片

问题概述 #

我正在开发一款测验应用，需要将4张图片分别显示在4个按钮上，但目前每次仅能显示一张图片。需求是让4张图片同时展示，且点击任意按钮后所有图片全部更新。怀疑问题出在onEvent或首个if语句中，评分功能将在图片显示问题解决后开发。已尝试调整不同事件选项。

原代码 #

var allDogs = getColumn("Dogs", "Name");
var allDogsPicturesList = getColumn("Dogs", "Image");
var questionNumber;
var dogImage;
var dogName;
var correctDog;
var userChoice;
var score;
setScreen("startScreen");
onEvent("readyButton", "click", function( ) {
  setScreen("quizScreen");
  gameQuestionsAndEnd();
});
onEvent("dog1", "click", function( ) {
  userChoice = getImageURL("dog1");
  gameQuestionsAndEnd();
});
onEvent("dog2", "click", function( ) {
  userChoice = getImageURL("dog2");
  gameQuestionsAndEnd();
});
onEvent("dog3", "click", function( ) {
  userChoice = getImageURL("dog3");
  gameQuestionsAndEnd();
});
onEvent("dog4", "click", function( ) {
  userChoice = getImageURL("dog4");
  gameQuestionsAndEnd();
});
function gameQuestionsAndEnd(answerRight, answerWrong) {
    dogName =(randomNumber(0, allDogs.length-1));
    dogImage = (randomNumber(0,allDogsPicturesList.length-1));
    correctDog = allDogsPicturesList[dogName];
    answerRight = dogName;
    var box = randomNumber(1,4);
    setText("dogBeingGuessed", "Which dog is a " + "\n" + allDogs[dogName]);
    for (var w = 0; w <= 10; w++) {
    setProperty("dog"+box, "image", allDogsPicturesList[dogName]);
    if ("dog1"==allDogs[dogName]) {
        setProperty("dog2", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
        setProperty("dog3", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
        setProperty("dog4", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
      questionNumber = questionNumber+1;
    } else if ("dog2"==dogName) {
        setProperty("dog1", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
        setProperty("dog3", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
        setProperty("dog4", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
      questionNumber = questionNumber+1;
    } else if ("dog3"==dogName) {
        setProperty("dog2", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
        setProperty("dog1", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
        setProperty("dog4", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
      questionNumber = questionNumber+1;
    } else if ("dog4"==dogName) {
        setProperty("dog2", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
        setProperty("dog3", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
        setProperty("dog1", "image", getImageURL(randomNumber(0,allDogsPicturesList.length)));
      questionNumber = questionNumber+1;
    }
    if (answerRight==userChoice) {
    score = score+1;
  }
    if (answerWrong) {
    score = score-1;
      }
    questionNumber = questionNumber+1;
  }
    if (questionNumber==10) {
      setScreen("screen1");
    }
}

核心问题点 #

1. 条件判断完全错误：
   • 把狗的名字（allDogs[dogName]）和按钮ID字符串（"dog1"）比较，两者类型和内容不匹配，导致条件几乎不会触发。
   • 后续else if又把数字类型的索引（dogName）和字符串"dog2"比较，类型不匹配，条件永远不成立。
2. 冗余循环干扰逻辑：for (var w = 0; w <= 10; w++)会重复执行11次图片设置和计数操作，导致questionNumber快速累加，逻辑混乱。
3. 变量未初始化：questionNumber和score没有初始值，第一次使用时为undefined，引发计数错误。
4. 图片设置方法错误：用getImageURL(randomNumber(...))无法正确获取数组中的图片，应该直接从allDogsPicturesList中取对应索引的URL。

修复后的代码 #

var allDogs = getColumn("Dogs", "Name");
var allDogsPicturesList = getColumn("Dogs", "Image");
var questionNumber = 0; // 初始化题目计数
var score = 0; // 初始化分数
setScreen("startScreen");

// 开始按钮点击事件
onEvent("readyButton", "click", function() {
  setScreen("quizScreen");
  loadNewQuestion();
});

// 统一绑定4个按钮的点击事件，减少重复代码
for (var i = 1; i <= 4; i++) {
  onEvent(`dog${i}`, "click", function() {
    // 此处可后续添加评分逻辑，判断用户选择是否正确
    loadNewQuestion();
  });
}

// 加载新题目的核心逻辑
function loadNewQuestion() {
  // 随机选择正确的狗
  var correctIndex = randomNumber(0, allDogs.length - 1);
  var correctDogName = allDogs[correctIndex];
  var correctDogImage = allDogsPicturesList[correctIndex];
  
  // 设置题目文本
  setText("dogBeingGuessed", `Which dog is a\n${correctDogName}`);
  
  // 生成4个不重复的图片索引集合，包含正确答案
  var usedIndices = new Set([correctIndex]);
  // 给每个按钮分配图片
  for (var btnNum = 1; btnNum <= 4; btnNum++) {
    var imgIndex;
    // 确保图片不重复
    do {
      imgIndex = randomNumber(0, allDogsPicturesList.length - 1);
    } while (usedIndices.has(imgIndex));
    usedIndices.add(imgIndex);
    
    // 随机让一个按钮显示正确答案
    if (btnNum === randomNumber(1,4)) {
      imgIndex = correctIndex;
    }
    
    setProperty(`dog${btnNum}`, "image", allDogsPicturesList[imgIndex]);
  }
  
  // 更新题目计数，达到10题切换页面
  questionNumber++;
  if (questionNumber === 10) {
    setScreen("screen1");
  }
}

修复说明 #

• 统一事件绑定：用循环绑定4个按钮的点击事件，减少冗余代码。
• 正确分配图片：确保4个按钮都设置了图片，且包含正确答案，同时避免重复图片。
• 初始化变量：给questionNumber和score设置初始值0，避免undefined错误。
• 移除无效循环：删除原代码中重复执行的for循环，逻辑更清晰。
• 修正逻辑判断：直接通过索引操作数组元素，不再做无意义的类型和内容比较。

内容的提问来源于stack exchange，提问作者Walker