Update a table cell with a randomly generated number-CodePudding

I am very new to javascript. I have only been working with it for a week. I have been trying to update the html table column with a 0 value to a random number generated by javascript. This is what I have tried so far, with the function "plays", but it produces no output. What errors do I have and what am I missing from my code? Any help would be greatly appreciated.

<table class="content-table">
<tbody id="groupH" onload="plays()">
<tr>
            <td>4</td>
              <td>Poland</td>
              <td>3</td>
              <td>1</td>
                <td id='updateDraw'>0</td>
                <td>2</td>
                <td>2</td>
                <td>5</td>
                <td>-3</td>
                <td>3</td>
              </tr>
          </tbody>
</table>

<!-- Update points table as page refreshes-->
    <script>
    function plays(){
document.getElementById("updateDraw").innerHTML = Math.floor(Math.random()* 10);
}
</script>

CodePudding user response：

You can check it

<table class="content-table">
  <tbody id="groupH">
    <tr>
      <td>4</td>
      <td>Poland</td>
      <td>3</td>
      <td>1</td>
      <td id='updateDraw'>0</td>
      <td>2</td>
      <td>2</td>
      <td>5</td>
      <td>-3</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

<!-- Update points table as page refreshes-->
<script>
  function plays(){
    document.getElementById("updateDraw").innerHTML =
    Math.floor(Math.random() * 10);
  }
  
  window.onload = function () {
    plays();
  }
</script>

CodePudding user response：

There is no onload on a tbody element. This is raised when the window loads:

function plays() {
  document.getElementById("updateDraw").innerHTML = Math.floor(Math.random() * 10);
}

window.addEventListener("load", plays);

<table class="content-table">
  <tbody id="groupH">
    <tr>
      <td>4</td>
      <td>Poland</td>
      <td>3</td>
      <td>1</td>
      <td id='updateDraw'>0</td>
      <td>2</td>
      <td>2</td>
      <td>5</td>
      <td>-3</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Another way is to attach the onload call to the <body> tag:

<body onload="plays()">
  <table class="content-table">
    <tbody id="groupH">
      <tr>
        <td>4</td>
        <td>Poland</td>
        <td>3</td>
        <td>1</td>
        <td id='updateDraw'>0</td>
        <td>2</td>
        <td>2</td>
        <td>5</td>
        <td>-3</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>

  <!-- Update points table as page refreshes-->
  <script>
    function plays() {
      document.getElementById("updateDraw").innerHTML = Math.floor(Math.random() * 10);
    }
  </script>
</body>