Question

出于某种原因，我的JS似乎没有在我的页面上工作。在开始处理一些更简单的问题之前，我已经完成了node.js服务器。我确定它正盯着我，但我无法发现它。我试图在我的表中添加行但它不起作用。我试过添加其他js似乎没有任何工作，我知道它正在直视着我，但我无法发现它。非常感谢。继承我的index.html和index.js

function addBat() {
  var table = document.getElementById("batters"),
    [0];
  var newBat = document.getElementById('batterName').value;

  var newRow = table.InsertRow(1);
  var cel1 = newRow.insertCell(0);
  cel1.innerHTML = newBat;
}


function init() {
  document.getElementById('addBatter').addEventListener('click', addBat);

}

window.addEventListener("load", init);

<!DOCTYPE HTML>
<html>

<head>
  <script src=index.js></script>
  <link rel="stylesheet" href="style.css">
  <title> Portsmouth Premier League</title>
</head>

<body>
  <div class="AUlogo"> <img src="Athletic-Union.jpg" alt="AU Logo">
  </div>
  <h1> Portsmouth Premier League </h1>
  <div id="clockbox" align='center'></div>

  <a href="addTeam.html"> Add Team </a>

  <div class="teams">
    <h2 id="team1"> Team 1 </h2>
    <h2 id="team2"> Team 2 </h2>
  </div>

  <div class="scores">
    <h2 id="team1Score"> Score 1 </h2>
    <h2 id="team2Score"> Score 2 </h2>
    <hr />
  </div>

  <div class="balls">
    <button type="button">0</button>
    <button type="button">1</button>
    <button type="button">2</button>
    <button type="button">3</button>
    <button type="button">4</button>
    <button type="button">5</button>
    <button type="button">6</button>
    <button type="button">w</button>
    <button type="button">nb</button>
    <button type="button">+</button>
  </div>

  <br>

  <div class="bowling">
    <table>
      <tr>
        <th>Name</th>
        <th>Overs</th>
        <th>Runs</th>
        <th>Wickets</th>
      </tr>
      <tr>
        <td>Bowler 1</td>
        <td></td>
        <td></td>
        <td></td>

    </table>
  </div>

  <div class="batting">
    Add Batter: <input type="text" name="batterName" id="batterName" />
    <button id="addBatter">Add</button>

    <table id="batters">
      <tr>
        <th>Name</th>
        <th>Runs</th>
        <th>Balls</th>
        <th>How Out</th>
      </tr>
      <tr>
        <td>Batter 1</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Batter 2</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>

</body>

</html>

Answer 1

我可以看到两个问题：

您的, [0]函数

addBat

您已将insertRow函数

此外，您的问题实际上并不清楚具体是什么不起作用。还有其他事情应该发生吗？

function addBat() {
  var table = document.getElementById("batters");
  var newBat = document.getElementById('batterName').value;

  var newRow = table.insertRow(1);
  var cel1 = newRow.insertCell(0);
  cel1.innerHTML = newBat;
}


function init() {
  document.getElementById('addBatter').addEventListener('click', addBat);

}

window.addEventListener("load", init);

<!DOCTYPE HTML>
<html>

<head>
  <script src=index.js></script>
  <link rel="stylesheet" href="style.css">
  <title> Portsmouth Premier League</title>
</head>

<body>
  <div class="AUlogo"> <img src="Athletic-Union.jpg" alt="AU Logo">
  </div>
  <h1> Portsmouth Premier League </h1>
  <div id="clockbox" align='center'></div>

  <a href="addTeam.html"> Add Team </a>

  <div class="teams">
    <h2 id="team1"> Team 1 </h2>
    <h2 id="team2"> Team 2 </h2>
  </div>

  <div class="scores">
    <h2 id="team1Score"> Score 1 </h2>
    <h2 id="team2Score"> Score 2 </h2>
    <hr />
  </div>

  <div class="balls">
    <button type="button">0</button>
    <button type="button">1</button>
    <button type="button">2</button>
    <button type="button">3</button>
    <button type="button">4</button>
    <button type="button">5</button>
    <button type="button">6</button>
    <button type="button">w</button>
    <button type="button">nb</button>
    <button type="button">+</button>
  </div>

  <br>

  <div class="bowling">
    <table>
      <tr>
        <th>Name</th>
        <th>Overs</th>
        <th>Runs</th>
        <th>Wickets</th>
      </tr>
      <tr>
        <td>Bowler 1</td>
        <td></td>
        <td></td>
        <td></td>

    </table>
  </div>

  <div class="batting">
    Add Batter: <input type="text" name="batterName" id="batterName" />
    <button id="addBatter">Add</button>

    <table id="batters">
      <tr>
        <th>Name</th>
        <th>Runs</th>
        <th>Balls</th>
        <th>How Out</th>
      </tr>
      <tr>
        <td>Batter 1</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Batter 2</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>

</body>

</html>

我无法发现我的基本错误。 JS和HTML

1 个答案: