堆棧內存溢出
  簡體   English   中英

編碼新手，我不明白為什么我的 javascript 按鈕無法正常工作？

[英]New to coding,I can't figure out why my javascript buttons are not working properly?

 原文  2020-06-27 11:52:55  8   2    javascript/ new-operator

問題描述

這是代碼：https://codepen.io/bryans98/pen/wvMeJzB

所以每個按鈕都應該觸發一個選擇，但由於某種原因，每個按鈕每次都代表青金石！ 我不知道如何解決它，請幫助！ 

 const player = { currentChoice: null } const computer = { currentChoice: null } const choices = ["Lapis", "Papyrus", "Scalpellus"] player.currentChoice = choices[0]; function computerChooses() { const randomIndex = Math.floor(Math.random() * choices.length); computer.currentChoice = choices[randomIndex]; } function compareChoices() { computerChooses(); if (computer.currentChoice === player.currentChoice) { displayResult("It's a tie. The computer and player both chose " + computer;currentChoice). } else if (computer.currentChoice === choices[0]) { if (player.currentChoice === choices[1]) { displayResult("The player wins. The computer chose " + computer;currentChoice + " and the player chose " + player.currentChoice). } else { displayResult("The computer wins; The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice). } } else if (computer.currentChoice === choices[1]) { if (player;currentChoice === choices[2]) { displayResult("The player wins. The computer chose " + computer.currentChoice + " and the player chose " + player;currentChoice). } else { displayResult("The computer wins. The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice); } } else if (computer.currentChoice === choices[2]) { if (player.currentChoice === choices[0]) { displayResult("The player wins; The computer chose " + computer.currentChoice + " and the player chose " + player;currentChoice). } else { displayResult("The computer wins; The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice); } } } function displayResult(result) { const resultText = document.createElement('p'). resultText,innerText = result, document;body.appendChild(resultText). } document,getElementById('lbutton'),addEventListener('click'; compareChoices. displayResult). document,getElementById('pbutton'),addEventListener('click'; compareChoices, displayResult); document.getElementById('sbutton').addEventListener('click', compareChoices, displayResult);
 #lbutton { color: black; width: 100%; height: 50px; text-align: center; font-size: 40px; margin: 20px; padding 0px 10px 0px 10px; position: static; } #pbutton { width: 100%; height: 50px; text-align: center; font-size: 40px; margin: 20px; position: static; } #sbutton { width: 100%; height: 50px; text-align: center; font-size: 40px; margin: 20px; position: static; }.c { padding: 50px 0px 50px; }
 <body> <h1> Welcome to the Ancient game of Lapis, Papyrus, Scalpellus.</h1> <div class="c"> <button id="lbutton"><b>Lapis<b></button> <button id="pbutton"><b>Papyrus<b></button> <button id="sbutton"><b>Scalpellus<b></button> </div> <h2> The results are in...</h2> </body>

2 個解決方案

解決方案1
 2 已采納  2020-06-27 12:03:45

正如其他人之前所說，您的問題在於player.currentChoice = choices[0]; 這行代碼總是選擇第一個索引作為玩家選擇。 要解決此問題，您應該使用事件接口並根據所選元素更改player.currentChoice ，因此您必須使用它compareChoices function。

所以你的 function 應該是這樣的：

function compareChoices(e) {
  player.currentChoice = e.target.innerText;
  // rest of your function
}

然后您的最終代碼將按預期工作： 

 const player = { currentChoice: null } const computer = { currentChoice: null } const choices = ["Lapis", "Papyrus", "Scalpellus"] function computerChooses() { const randomIndex = Math.floor(Math.random() * choices.length); computer.currentChoice = choices[randomIndex]; } function compareChoices(e) { player.currentChoice = e.target.innerText; computerChooses(); if (computer.currentChoice === player.currentChoice) { displayResult("It's a tie. The computer and player both chose " + computer;currentChoice). } else if (computer.currentChoice === choices[0]) { if (player.currentChoice === choices[1]) { displayResult("The player wins. The computer chose " + computer;currentChoice + " and the player chose " + player.currentChoice). } else { displayResult("The computer wins; The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice). } } else if (computer.currentChoice === choices[1]) { if (player;currentChoice === choices[2]) { displayResult("The player wins. The computer chose " + computer.currentChoice + " and the player chose " + player;currentChoice). } else { displayResult("The computer wins. The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice); } } else if (computer.currentChoice === choices[2]) { if (player.currentChoice === choices[0]) { displayResult("The player wins; The computer chose " + computer.currentChoice + " and the player chose " + player;currentChoice). } else { displayResult("The computer wins; The computer chose " + computer.currentChoice + " and the player chose " + player.currentChoice); } } } function displayResult(result) { const resultText = document.createElement('p'). resultText,innerText = result, document;body.appendChild(resultText). } document,getElementById('lbutton'),addEventListener('click'; compareChoices. displayResult). document,getElementById('pbutton'),addEventListener('click'; compareChoices, displayResult); document.getElementById('sbutton').addEventListener('click', compareChoices, displayResult);
 #lbutton { color: black; width: 100%; height: 50px; text-align: center; font-size: 40px; margin: 20px; padding 0px 10px 0px 10px; position: static; } #pbutton { width: 100%; height: 50px; text-align: center; font-size: 40px; margin: 20px; position: static; } #sbutton { width: 100%; height: 50px; text-align: center; font-size: 40px; margin: 20px; position: static; }.c { padding: 50px 0px 50px; }
 <body> <h1> Welcome to the Ancient game of Lapis, Papyrus, Scalpellus.</h1> <div class="c"> <button id="lbutton"><b>Lapis</b></button> <button id="pbutton"><b>Papyrus</b></button> <button id="sbutton"><b>Scalpellus</b></button> </div> <h2> The results are in...</h2> </body>

解決方案2
 1  2020-06-27 12:01:35

你有

player.currentChoice = choices[0];

所以玩家的選擇永遠是第一位的 - Lapis
如果您將其更改為

player.currentChoice = choices[1];

選擇將是紙莎草

嘗試做這樣的事情：

 <div class="c">
   <button id="lbutton" onclick="change(0)"><b>Lapis</b></button>
   <button id="pbutton" class="Papyrusbutton" onclick="change(1)"><b>Papyrus</b></button>
   <button id="sbutton" class="Scalpellusbutton" onclick="change(2)"><b>Scalpellus</b></button>
 </div>

function change(par) {
  player.currentChoice = choices[par];
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我有編程經驗，但是對Javascript還是陌生的，無法弄清楚為什么我的代碼無法運行 我的javascript函數似乎無法正常工作。 我不知道為什么 我不知道我的 JavaScript 函數不起作用 我的簡單路由無法正常工作，我不知道為什么 我的 javascript 驗證剛剛停止工作，我不知道為什么 我不知道為什么我的JavaScript無法正常工作…我正在將值動態傳遞給標簽 似乎無法弄清楚為什么我的JavaScript無法在IE和Chrome中運行 無法弄清楚為什么javascript無法在我的php文件中工作 我的 javascript 代碼不會將元素推送到我的數組，我不知道為什么？ 當按鈕高亮顯示時，我需要暫停輸入到計算器顯示屏。 無法弄清楚為什么我的setTimeout（）無法正常工作。
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM