Question

我正在使用Javascript做一个基本的石头剪刀游戏，没什么新鲜的，但我试图把它想象一下。我看到的所有内容都只是输出计算机通过innerHTML以纯文本格式选择的内容，这很好，但我希望它能根据所选内容显示图像。

基本游戏功能playGame将选择传递给compareChoices函数。而不是传递＆＃34;计算机选择：摇滚＆＃34;进入我的范围id =＆＃34;结果＆＃34;我想传递一张图片。我一直在阅读关于DOM和节点和内容的内容，但我很难理解如何在这里应用它。

假设我有一个名为rock.gif的图像，当计算机选择＆＃34; rock＆＃34;时，我想将其传递给结果范围。我该怎么做？如果它涉及使用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，直到您的项目中出现了影像。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

用以下html替换span：

<img alt="Outcome" id="result">

并更新您的代码

function playGame(userSelect) {

    userOption = userSelect;

    var computerSelection = Math.random();

    if (computerSelection < 0.34) {
        document.getElementById("result").setAttribute("src", "rock.gif");

    } else if (computerSelection <= 0.67) {
        computerSelection = "paper"; //do same here
    } else {
        computerSelction = "scissors"; //and here
    }
}

基于If / Else（innerHTML？DOM？）的结果将图像添加到HTML

2 个答案: