document.getElementById("rock").remove();不工作答案

【问题标题】：document.getElementById("rock").remove(); not workingdocument.getElementById("rock").remove();不工作
【发布时间】：2020-09-27 10:37:28
【问题描述】：

一直在关注一个石头剪刀布javascript游戏，但代码的最后一部分对我不起作用，函数rpsPage。当我单击其中一张图像时，我希望将它们全部删除，但没有任何反应。无法弄清楚我哪里出错了。我在控制台中没有收到任何错误消息，当我单击其中一张图片时，我希望它们全部从页面上消失，但它们都保留下来，似乎什么也没有发生。

function rpsGame(yourChoice){
    console.log(yourChoice);

    var humanChoice, botChoice;
    humanChoice = (yourChoice).id;

    botChoice = numToChoice(randonNum());
    console.log(botChoice);

    results = decideWinner(humanChoice,botChoice);
    console.log(results);

    message = finalMessage(results);
    console.log(message);

    rpsPage = (yourChoice.id, results, message);       
    

}

function randonNum(){
    return Math.floor(Math.random()*3);
}

function numToChoice(number){
    return ['rock', 'paper', 'sissors'][number];

}
function decideWinner(yourChoice,computerChoice){
    var rspDatebase = {
        'rock':{'sissors':1, 'rock':0.5, 'paper':0},
        'paper':{'rock':1, 'paper':0.5, 'sissors':0},
         'sissors':{'paper':1,'sissors':0.5,'rock':0}    
    };

    var yourScore = rspDatebase[yourChoice][computerChoice];
    var computerScore = rspDatebase[computerChoice][yourChoice];

    return[yourScore,computerScore];

}

function finalMessage([yourScore,computerScore]){
    if (yourScore===0){
        return{'message':'You Lost', 'color':'red'};
    }else if (yourScore===0.5){
        return {'message':'You Tie', 'color':'yellow'};
    }else {
        return {'message':'You Won', 'color':'green'};
    };

}

function rpsPage(humanImageChoice, botImageChoice, finalmessage){
  
  document.getElementById("rock").remove();
  document.getElementById("sissors").remove();
  document.getElementById("paper").remove();
  
}

<body>
    <div class = "container-3">
      <div class = "flexbox-container-rps" id = "flexbox-rps-div">
        <img id="sissors" src = "sissors.jpg" style = "width:30%" alt = "sissors"  onclick = "rpsGame(this)" > 
        <img id="rock" src = "rock.jpg" style = "width:30%" alt = "sissors"  onclick = "rpsGame(this)" > 
        <img id="paper" src = "paper.jpg" style = "width:30%" alt = "sissors"  onclick = "rpsGame(this)" > 
        
    </div>
  </div>
    <script src="script.js"></script>
  </body>

【问题讨论】：

正如以下答案所指出的，您根本没有调用该函数 - rpsPage = (yourChoice.id, results, message);由于呼叫从未发生，因此操作不会发生。如果您现在才开始学习，一个好主意是在您的所有函数中放置一个简单的 console.log 行。这样，控制台中有一条小线，告诉你哪个函数以什么顺序被调用。这称为“穴居人调试”。这是老派，但它特别适合新手。

标签： javascript

【解决方案1】：

问题出在你调用函数的方式上，必须这样调用

rpsPage(yourChoice.id, results, message);

而不是

rpsPage = (yourChoice.id, results, message);

function rpsGame(yourChoice) {
  console.log(yourChoice);

  var humanChoice, botChoice;
  humanChoice = (yourChoice).id;

  botChoice = numToChoice(randonNum());

  results = decideWinner(humanChoice, botChoice);

  message = finalMessage(results);

  rpsPage(yourChoice.id, results, message);
}

function randonNum() {
  return Math.floor(Math.random() * 3);
}

function numToChoice(number) {
  return ['rock', 'paper', 'sissors'][number];

}

function decideWinner(yourChoice, computerChoice) {
  var rspDatebase = {
    'rock': {
      'sissors': 1,
      'rock': 0.5,
      'paper': 0
    },
    'paper': {
      'rock': 1,
      'paper': 0.5,
      'sissors': 0
    },
    'sissors': {
      'paper': 1,
      'sissors': 0.5,
      'rock': 0
    }
  };

  var yourScore = rspDatebase[yourChoice][computerChoice];
  var computerScore = rspDatebase[computerChoice][yourChoice];

  return [yourScore, computerScore];

}

function finalMessage([yourScore, computerScore]) {
  if (yourScore === 0) {
    return {
      'message': 'You Lost',
      'color': 'red'
    };
  } else if (yourScore === 0.5) {
    return {
      'message': 'You Tie',
      'color': 'yellow'
    };
  } else {
    return {
      'message': 'You Won',
      'color': 'green'
    };
  };

}

function rpsPage(humanImageChoice, botImageChoice, finalmessage) {
  
  document.getElementById("rock").remove();
  document.getElementById("sissors").remove();
  document.getElementById("paper").remove();

}

<body>
  <div class="container-3">
    <div class="flexbox-container-rps" id="flexbox-rps-div">
      <img id="sissors" src="sissors.jpg" style="width:30%" alt="sissors" onclick="rpsGame(this)">
      <img id="rock" src="rock.jpg" style="width:30%" alt="sissors" onclick="rpsGame(this)">
      <img id="paper" src="paper.jpg" style="width:30%" alt="sissors" onclick="rpsGame(this)">

    </div>
  </div>
  <script src="script.js"></script>
</body>

【讨论】：

【解决方案2】：

这是因为您没有调用 rpsPage 函数，而是在其上分配了一个对象值。

你应该像这样调用它。

rpsPage(yourChoice.id, results, message);

不要这样赋值。

rpsPage = (yourChoice.id, results, message);

【讨论】：