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

【问题标题】：How to display a message + images based on a calculated chance depending on the variables value如何根据变量值计算出的机会显示消息+图像
【发布时间】：2021-05-21 20:15:58
【问题描述】：

所以正如标题所示，我正在尝试根据百分比显示图像。变量值越高，显示成功消息 + 正确图像的机会就越高。但由于某种原因，即使变量高到足以在 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"
}
}

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

【问题讨论】：

大量重复代码，是您做错的主要事情。使用简短的 if-else if 块根据功率将某个变量设置为 0.5 或 0.8 等，然后执行一次 Math.random() 检查。此外，前三个块已经覆盖了 user_power 的所有可能值，因此最后一个 else 块将永远不会运行。
你能举个小例子吗，因为我不是 100% 确定你的意思。最后一个 else 块正在运行，它是我在帖子中提到的唯一显示出来的东西。
像这样：jsfiddle.net/rufec3vw
啊，谢谢，我不知道你会这样写。
别担心，当我还是个初学者的时候，我写的代码不是这样的:)

标签： javascript image math display percentage

【解决方案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");
}

【讨论】：