Question

单击按钮时，compOutput框或winOutput框都不会显示我想要的输出。我从codecademy示例中获取了大部分此项目，并希望尝试将其实现到网页。我还想在代码运行后清除所有字段，那么有人也可以给我代码吗？这只是输出我遇到了问题。

var userChoice = document.getElementById('userInput').value;

var computerChoice = Math.random();

	if (computerChoice < 0.34) {
		computerChoice = "rock";
	} else if (computerChoice < 0.67) {
		computerChoice = "paper";
	} else {
		computerChoice = "scissors";
	}


function compare(choice1, choice2) {
	document.getElementById('compOutput').value = computerChoice;
	//tie
	if (choice1 === choice2) {
		document.getElementById('winOutput').value = "The result is a tie!";
	}
	//choice1 rock & choice2 scissors
	else if (choice1 === "rock") {

		if (choice2 === "scissors") {
			document.getElementById('winOutput').value = "rock wins";
		}
	}
	//choice1 paper & choice2 rock
	else if (choice1 === "paper") {

		if (choice2 === "rock") {
			document.getElementById('winOutput').value = "paper wins";
		} else {
			document.getElementById('winOutput').value = "scissors wins";
		}
	}
	//choice1 scissors
	else if (choice1 === "scissors") {

		if (choice2 === "rock") {
			document.getElementById('winOutput').value = "rock wins";
		} else if (choice2 === "paper") {
			document.getElementById('winOutput').value = "scissors wins";
		}
	}

}

<body>
	<form>
		<table align="center">
			<tr>
				<td>
					<h5>Rock, Paper, Scissors?</h5>
				</td>
			</tr>
			<tr>
				<td><input type="text" id="userInput"></td>
			</tr>
			<tr>
				<td>
					<h5>Computer Choice</h5>
				</td>
			</tr>
			<tr>
				<td><input type="text" id="compOutput"></td>
			</tr>
			<tr>
				<td>
					<h5>Winner</h5>
				</td>
			</tr>
			<tr>
				<td><input type="text" id="winOutput"></td>
			</tr>
			<tr>
				<td><input type="button" id="generate" value="Click Here" onclick="compare(userChoice, computerhoice)"></td>
			</tr>
		</table>
	</form>



</body>

Answer 1

var winConditions = {
  rock: 'scissors',
  paper: 'rock',
  scissors: 'paper'
}

document.getElementById('generate').onclick = function() {
	var userChoice = document.getElementById('userInput').value.toLowerCase();
	var computerChoice = ["rock", "paper", "scissors"][Math.floor(Math.random() * 3)];

	compare(userChoice, computerChoice);
}

function compare(choice1, choice2) {
  document.getElementById('compOutput').innerText = choice2;

  if (choice1 === choice2) {
    result = 'The result is a tie!';
  } else if (winConditions[choice1] === choice2) {
  	result = 'Player wins!';
  } else {
  	result = 'Computer wins';
  }
  
  document.getElementById('winOutput').value = result;
}

            <body>
                <form>
                    <table align="center">
                        <tr>
                            <td>
                                <h5>Rock, Paper, Scissors?</h5>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="text" id="userInput"></td>
                        </tr>
                        <tr>
                            <td>
                                <h5>Computer Choice</h5>
                            </td>
                        </tr>
                        <tr>
                            <td id="compOutput"></td>
                        </tr>
                        <tr>
                            <td>
                                <h5>Winner</h5>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="text" id="winOutput"></td>
                        </tr>
                        <tr>
                            <td><input type="button" id="generate" value="Click Here"></td>
                        </tr>
                    </table>
                </form>



            </body>

https://jsfiddle.net/1so0gou8/1/

你去=）

Answer 2

您的userChoice变量在页面启动后立即设置，因此它始终为空。您想要做的是在单击按钮时读取输入。

所以我会在compare函数中移动所有内容，如下所示：

function compare () {
  var userInput = document.getElementById('userInput').value;
  var computerInput = Math.random();
  var result;

  if (computerInput < .34) {
    computerInput = 'rock';
  } else if (computerInput > .67) {
    computerInput = 'paper';
  } else {
    computerInput = 'scissors';
  }

  // compare userInput to computerInput here.

}

Answer 3

这是处理相同场景的另一种方法：对复杂选项列表使用switch / case语句。至于如何在代码运行后清空字段，只需将userInput和compOutput值设置为＆＃34;＆＃34;他们跑完之后。当然，通过这样做，你实际上并没有显示compOutput，所以它并没有真正发挥作用。另外，这里是fiddle。

＆＃13;

function getUserChoice() {
  var userChoice = document.getElementById('userInput').value;
  return userChoice.toLowerCase();
}

function getComputerChoice() {

  var computerChoice = Math.random();

  if (computerChoice < 0.34) {
    computerChoice = "rock";
  } else if (computerChoice < 0.67) {
    computerChoice = "paper";
  } else {
    computerChoice = "scissors";
  }

  return computerChoice;
}

compare = function compare() {
  var choice1 = getUserChoice();
  var choice2 = getComputerChoice();
  document.getElementById("compOutput").value = choice2;  
  var winnerEl = document.getElementById("winOutput");

  switch (true) {
    case (choice1 === choice2):
      winnerEl.value = "It's a tie!";
      break;
    case (choice1 === "rock"):
      switch (choice2) {
        case "paper":
          winnerEl.value = "Paper beats Rock - Computer wins!";
          break;
        case "scissors":
          winnerEl.value = "Rock beat Scissors - User wins!";
          break;
      }
      break; // End choice1 === rock

    case (choice1 === "paper"):
      switch(choice2){
        case "rock":
          winnerEl.value = "Paper beats Rock - User wins!";
          break;
        case "scissors":
          winnerEl.value = "Scissors beat Paper - Computer wins!";
          break;
      }
      break;
    case (choice1 === "scissors"):
      switch(choice2){
        case "rock":
          winnerEl.value = "Rock beats Scissors - Computer wins!";
          break;
        case "paper":
          winnerEl.value = "Scissors beats Paper - User wins!"
          break;
      }
      break;
    default:
      alert("Please enter either rock, paper or scissors.");
      break;
  }
}

＆＃13;

<form>
  <table align="center">
    <tr>
      <td>
        <h5>Rock, Paper, Scissors?</h5>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" id="userInput">
      </td>
    </tr>
    <tr>
      <td>
        <h5>Computer Choice</h5>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" id="compOutput">
      </td>
    </tr>
    <tr>
      <td>
        <h5>Winner</h5>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" id="winOutput">
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" id="generate" value="Click Here" onclick="compare()">
      </td>
    </tr>
  </table>
</form>

＆＃13;

简单的javascript摇滚纸剪刀游戏

3 个答案: