javascript - 根据 If/Else 的结果向 HTML 添加图像(innerHTML？DOM？)

Question

我正在用 Javascript 做一个基本的石头剪刀布游戏，没有什么新鲜事，但我想稍微花点时间。我看到的所有这些都只是通过 innerHTML 以纯文本输出计算机选择的内容，这很好，但我希望它根据他们选择的内容显示图像。

基本游戏函数 playGame 将选择传递给 compareChoices 函数。我不想将“计算机选择:摇滚”传递到我的 span id="result"中，而是想传递一张图片。我一直在阅读有关 DOM 和节点等内容，但我很难理解如何在此处应用它。

假设我有一个名为 rock.gif 的图像，我想在计算机选择“rock”时将其传递给结果范围。我该怎么做？如果它涉及使用 DOM 而不是 innerHTML，请帮助我理解并解释一下发生了什么。谢谢!

function playGame(userSelect)
{

userOption = userSelect;

var computerSelection = Math.random();

if (computerSelection < 0.34)
{
    computerSelection = "rock";

}
else if (computerSelection <= 0.67)
{
    computerSelection = "paper";
}
else
{
    computerSelction = "scissors";
}

results = compareChoices(userOption, computerSelection);

document.getElementById("result").innerHTML = "<p>The computer chose " +
    computerSelection;
document.getElementById("whoWon").innerHTML = results;
}


function compareChoices(userOption, computerSelection)
{


if (userOption == computerSelection)
{
    return "It's a tie!";
}

if (userOption == "rock")
{
    if (computerSelection == "scissors")
    {
        return "You win!";
    }
        else
        {
        return "You lose!";
        }

} else if (userOption == "paper") {

    if (computerSelection == "rock")
    {
        return "You win!" ;
    } else if("scissors") {
        return "You lose!" ;
    }

} else if (userOption == "scissors") {

    if (computerSelection == "rock")
    {
        return "You lose!";
    }else{
        return "You win!";
    }
}
}

HTML

<span id="result"></span>

Answer 1

好的，所以我将您的代码精简到仅我需要的代码。

基本上是在页面上放一个空的图像标签，然后用 javascript 设置 src。看一看，让我知道您是否有任何不明白的地方。您必须右键单击并检查图像才能看到 src，直到您的项目中有了这些图像。

user = 0.64;

playGame(user);

function playGame(userSelect) {

  userOption = userSelect;

  var computerSelection = Math.random();

  if (computerSelection < 0.34) {
    computerSelection = "rock.gif";

  } else if (computerSelection <= 0.67) {
    computerSelection = "paper.gif";
    
  } else {
    computerSelection = "scissors.gif";
  }

  

  document.getElementById("result").innerHTML = "<p>The computer chose " +
    computerSelection;
  document.getElementById("image").src = computerSelection;
}

<img id="image" src="">
<span id="result"></span>
<span id="whoWon"></span>