Question

我无法弄清楚为什么这不起作用！我想在DOM中显示按钮值！

<input type="button" value="Stone" onclick="userWeapon(this), getResult()">
<input type="button" value="Scissor" onclick="userWeapon(this), getResult()">
<input type="button" value="Paper" onclick="userWeapon(this), getResult()">

这里我使用了函数userWeapon（getValue）。当我在控制台中记录它时，它正在工作。但如果我想将该值打印到屏幕上，我会收到参考错误。你知道为什么吗？

var weapons = ['Stone', 'Scissor', 'Paper'];
var scoreUser;
var scoreEnemy;

function enemyWeapon() {
    // Get a random number from 1 - 3
    var randNumber = Math.floor(Math.random() * 3);
    // get the weapon with randNumber (0-2) from the weapons array
    var enemyWeapon = weapons[randNumber];
    return enemyWeapon;
}

function userWeapon(getValue) {
    var userWeapon = getValue.value;
    console.log(userWeapon);
    return userWeapon;
}

function showEnemyWeapon() {
    var elShowEnemyWeapon = document.getElementById('enemy');
    elShowEnemyWeapon.innerHTML = enemyWeapon();
}

function showUserWeapon() {
    var elShowUserWeapon = document.getElementById('user');
    elShowUserWeapon.innerHTML = userWeapon(getValue);
}


function getResult() {
    showUserWeapon();
    showEnemyWeapon();
}

*, *:before, *:after {
    box-sizing: border-box;
}

.container {
    width: 960px;
    margin: 0 auto;
}

section.flex-content {
    display: flex;
    flex-direction: row;
    border: 1px solid black;
    justify-content: space-around;
}

div {
    border: 1px solid red;
}

td {
    border: 1px solid red;
}

table {
    margin: auto;
}

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>Stone Scissor Paper</title>
    <link rel="stylesheet" href="css/stone-scissor-paper.css">
</head>

<body>
    <div class="container">
        <section class="flex-content">
            <div id="user">1</div>
            <div id="enemy">2</div>
        </section>
        <section class="flex-content">
            <input type="button" value="Stone" onclick="userWeapon(this), getResult()">
            <input type="button" value="Scissor" onclick="userWeapon(this), getResult()">
            <input type="button" value="Paper" onclick="userWeapon(this), getResult()">
    </section>
    <section>
        <table>
            <tr>
                <th>You</th>
                <th>Computer</th>
            </tr>
            <tr>
                <td>3</td>
                <td>1</td>
            </tr>
        </table>
    </section>
    </div>
    <script src=" js/stone-scissor-paper.js "></script>
</body>

</html>

Answer 1

您正在调用两个函数，而不是调用一个函数并传递一个参数。这是您应该执行的代码。我还添加了一些优化措施，以使其速度更快（这无关紧要）。我也没有添加更改分数的方法，因为我认为您可以做到。如果您需要更多有关更改分数的帮助，请在下面评论，我会帮助您。

var weapons = ['Stone', 'Scissor', 'Paper'];
var scoreUser;
var scoreEnemy;

function enemyWeapon() {
    // Get a random number from 1 - 3
    // get the weapon with randNumber (0-2) from the weapons array
	return weapons[Math.floor(Math.random() * 3)];
}

function userWeapon(getValue) {
    return getValue;
}

function showEnemyWeapon() {
    document.getElementById('enemy').innerHTML = enemyWeapon();
}

function showUserWeapon(userChoice) {
    document.getElementById('user').innerHTML = userWeapon(userChoice);
}


function getResult(userChoice) {
    showUserWeapon(userChoice);
    showEnemyWeapon();
}

*, *:before, *:after {
    box-sizing: border-box;
}

.container {
    width: 960px;
    margin: 0 auto;
}

section.flex-content {
    display: flex;
    flex-direction: row;
    border: 1px solid black;
    justify-content: space-around;
}

div {
    border: 1px solid red;
}

td {
    border: 1px solid red;
}

table {
    margin: auto;
}

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <title>Stone Scissor Paper</title>
    <link rel="stylesheet" href="css/stone-scissor-paper.css">
</head>

<body>
<script src="scratch_2.js"></script>
<div class="container">
    <section class="flex-content">
        <div id="user">1</div>
        <div id="enemy">2</div>
    </section>
    <section class="flex-content">
        <input id="stone" type="button" value="Stone" onclick="getResult(this.value)">
        <input id="scissor" type="button" value="Scissor" onclick="getResult(this.value)">
        <input id="paper" type="button" value="Paper" onclick="getResult(this.value)">
    </section>
    <section>
        <table>
            <tr>
                <th>You</th>
                <th>Computer</th>
            </tr>
            <tr>
                <td>3</td>
                <td>1</td>
            </tr>
        </table>
    </section>
</div>
<script src=" js/stone-scissor-paper.js "></script>
</body>
</html>

Answer 2

您几乎拥有它，只需对代码进行2次修改：

1）将div添加到HTML中以更新最近点击的按钮。

2）删除内联事件处理程序，并将其添加到JavaScript。

如下所示：

init();

function init() {
  //This is the DOM el we'll updated
  var el = document.querySelector('#display');
  //Add event listeners to your buttons
  document.querySelectorAll('input[type="button"]').forEach(btn => {
    btn.addEventListener('click', e => {
      el.innerHTML = userWeapon(e.target);
    });
  });
}

var weapons = ['Stone', 'Scissor', 'Paper'];
var scoreUser;
var scoreEnemy;

function enemyWeapon() {
  // Get a random number from 1 - 3
  var randNumber = Math.floor(Math.random() * 3);
  // get the weapon with randNumber (0-2) from the weapons array
  var enemyWeapon = weapons[randNumber];
  return enemyWeapon;
}

function userWeapon(getValue) {
  var userWeapon = getValue.value;
  console.log(userWeapon);
  return userWeapon;
}

function showEnemyWeapon() {
  var elShowEnemyWeapon = document.getElementById('enemy');
  elShowEnemyWeapon.innerHTML = enemyWeapon();
}

function showUserWeapon() {
  var elShowUserWeapon = document.getElementById('user');
  elShowUserWeapon.innerHTML = userWeapon(getValue);
}


function getResult() {
  showUserWeapon();
  showEnemyWeapon();
}

<input type="button" value="Stone">
<input type="button" value="Scissor">
<input type="button" value="Paper">
<div id="display"></div>

Stone Scissor Paper：ReferenceError

2 个答案: