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

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

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

How to display a message + images based on a calculated chance depending on the variables value

javascript

math

image

percentage

display