Question

我正在学习Javascript，这是我为自己做点什么的第一次尝试，如果解决方案非常简单，请原谅我。我正在尝试自动进行纸牌游戏的得分保持。当我单击提交按钮时，没有任何反应。

<div class="container body-content">
        <div class="row mt-4 justify-content-center">
            <div class="col-auto">
                <img class="img-fluid logo" alt="cards" src="img/cards.png">
            </div>
            <div class="col-4">
                <h1>Shayne's Golf Tally</h1>
            </div>
        </div>
        <div class="row justify-content-center text-center round">
            <div class="col">
                <h2 id="round">Round: 0</h2>
            </div>
        </div>
        <div class="row justify-content-center text-center mt-3">
            <div class="col-3">
                <h3 class="names">Shayne</h3>
                <h3 id="shayne">0</h3>
            </div>
            <div class="col-3">
                <h3 class="names">Amber</h3>
                <h3 id="amber">0</h3>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-3 centered input-spacing">
                <input class="form-control input-form" id="inputShayne">
            </div>
            <div class="col-3 centered input-spacing">
                <input class="form-control input-form" id="inputAmber">
            </div>
        </div>
        <div class="row justify-content-center text-center mt-4">
            <div class="col">
                <button class="btn btn-primary" onclick="tallyScore()">Submit</button>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="golf.js"></script>

和javascript：

var round = 0;
var scoreShayne = 0;
var scoreAmber = 0;

function tallyScore() {
    round += 1;
    document.getElementById(round).innerHTML = "Round: " + round;
    scoreShayne += document.getElementById("inputShayne").value;
    scoreAmber += document.getElementById("inputAmber").value;
    document.getElementById(shayne).innerHTML = scoreShayne;
    document.getElementById(amber).innerHTML = scoreAmber;
}

Answer 1

此代码中的一些要求，只是为了查看;）

// global values
var round       = 0
,   scoreShayne = 0
,   scoreAmber  = 0
;

// use constants to prevent the JS interpreter from recalculating each call
const hmi_round       = document.getElementById('round')
,     hmi_shayne      = document.getElementById('shayne')
,     hmi_amber       = document.getElementById('amber')
,     hmi_inputShayne = document.getElementById('inputShayne')
,     hmi_inputAmber  = document.getElementById('inputAmber')
;

function tallyScore()
{
  hmi_round.textContent = "Round: " + ++round;  //  ++round is a direct increment (different from round++ )

  hmi_shayne.textContent = scoreShayne += hmi_inputShayne.valueAsNumber; // HTML5 as valueAsNumber
  hmi_amber.textContent  = scoreAmber  += hmi_inputAmber.valueAsNumber;  // instead of parseInt(hmi_inputAmber.value)

  hmi_inputShayne.value = "0";  // reset values for the next round
  hmi_inputAmber.value  = "0";
}

<div class="container body-content">
  <div class="row mt-4 justify-content-center">
    <div class="col-auto">
      <img class="img-fluid logo" alt="cards" src="img/cards.png">
    </div>
    <div class="col-4">
      <h1>Shayne's Golf Tally</h1>
    </div>
  </div>
  <div class="row justify-content-center text-center round">
    <div class="col">
      <h2 id="round">Round: 0</h2>
    </div>
  </div>
  <div class="row justify-content-center text-center mt-3">
    <div class="col-3">
      <h3 class="names">Shayne</h3>
      <h3 id="shayne">0</h3>
    </div>
    <div class="col-3">
      <h3 class="names">Amber</h3>
      <h3 id="amber">0</h3>
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-3 centered input-spacing">
      <input class="form-control input-form" id="inputShayne" type="number"min="0" value="0">   <!-- don't forget to set the type -->
    </div>
    <div class="col-3 centered input-spacing">
      <input class="form-control input-form" id="inputAmber" type="number" min="0" value="0">  <!-- don't forget to set the type -->
    </div>
  </div>
  <div class="row justify-content-center text-center mt-4">
    <div class="col">
      <button class="btn btn-primary" onclick="tallyScore()">Submit</button>
    </div>
  </div>
</div>

当我单击提交按钮时，JS代码无法执行（或执行任何操作）

1 个答案: