如何根据变量值计算出的机会显示消息+图像

Question

因此，正如标题所示，我正在尝试根据百分比显示图像。 变量值越高，显示成功消息 + 正确图像的机会就越高。 但由于某种原因，即使变量高到足以在 80% 的机会类别中，它也会继续显示失败的消息：

 function mission1(user_power) { if (user_power < 5) { if (Math.random() < 0.3) { document.getElementById('missionpopup').style.visibility = "visible" document.getElementById('popupdarkness').style.visibility = "visible" document.getElementById('missionsucces').style.visibility = "visible" document.getElementById('missionsuccestext').style.visibility = "visible" document.getElementById('missionsuccestext').innerHTML = "You have succesfully looted the house, as the house was empty you didn't run into any trouble." document.getElementById('expgain').style.visibility = "visible" document.getElementById('itemfound').style.visibility = "visible" document.getElementById('approvalimg').style.visibility = "visible" } } else if (user_power == 5) { if (Math.random() < 0.5) { document.getElementById('missionpopup').style.visibility = "visible" document.getElementById('popupdarkness').style.visibility = "visible" document.getElementById('missionsucces').style.visibility = "visible" document.getElementById('missionsuccestext').style.visibility = "visible" document.getElementById('missionsuccestext').innerHTML = "You have succesfully looted the house, as the house was empty you didn't run into any trouble." document.getElementById('expgain').style.visibility = "visible" document.getElementById('itemfound').style.visibility = "visible" document.getElementById('approvalimg').style.visibility = "visible" } } else if (user_power > 5) { if (Math.random() < 0.8) { document.getElementById('missionpopup').style.visibility = "visible" document.getElementById('popupdarkness').style.visibility = "visible" document.getElementById('missionsucces').style.visibility = "visible" document.getElementById('missionsuccestext').style.visibility = "visible" document.getElementById('missionsuccestext').innerHTML = "You have succesfully looted the house, as the house was empty you didn't run into any trouble." document.getElementById('expgain').style.visibility = "visible" document.getElementById('itemfound').style.visibility = "visible" document.getElementById('approvalimg').style.visibility = "visible" } } else { document.getElementById('missionpopup').style.visibility = "visible" document.getElementById('popupdarkness').style.visibility = "visible" document.getElementById('missionfailed').style.visibility = "visible" document.getElementById('missionfailuretext').style.visibility = "visible" document.getElementById('denialimg').style.visibility = "visible" } }

我在这段代码中做错了什么？

Answer 1

保留原始代码的另一种解决方案

let userPower = 1;

// Show all images by their ids
function showImages(...ids) {
  ids.forEach(id => (document.getElementById(id).style.visibility = "visible"));
}

// Show message on an element by ids id
function showMessage(id, message) {
  document.getElementById(id).innerHTML = message;
}

function mission1() {
  // Chance
  const chance = Math.random();

  if (userPower < 5 && chance < 0.3) {
    // Show images
    showImages("missionpopup", "popupdarkness", "missionsucces", "missionsuccestext");

    // Show a message
    showMessage(
      "missionsuccestext",
      "You have succesfully looted the house, as the house was empty you didn't run into any trouble."
    );

    // Show images
    showImages("expgain", "itemfound", "approvalimg");

    return;
  }

  if (userPower == 5 && chance < 0.5) {
    // Show images
    showImages("missionpopup", "popupdarkness", "missionsucces", "missionsuccestext");

    // Show a message
    showMessage(
      "missionsuccestext",
      "You have succesfully looted the house, as the house was empty you didn't run into any trouble."
    );

    // Show images
    showImages("expgain", "itemfound", "approvalimg");
    return;
  }

  if (userPower > 5 && chance < 0.8) {
    // Show images
    showImages("missionpopup", "popupdarkness", "missionsucces", "missionsuccestext");

    // Show a message
    showMessage(
      "missionsuccestext",
      "You have succesfully looted the house, as the house was empty you didn't run into any trouble."
    );

    // Show images
    showImages("expgain", "itemfound", "approvalimg");

    return;
  }

  showImages("missionpopup", "popupdarkness", "missionfailed", "missionfailuretext", "denialimg");
}