Entire page disappears when clicking button/JavaScript function

I’ve set up a JavaScript function to select/block certain pages. I have another JavaScript function on the pages that are being loaded. This function has an onclick event listener that puts text into a form field. Problem I’m having now is that when I click a button to add text to a form field, the entire page disappears. After searching around, one thing that I think might be causing it is that both functions are targeting "button" elements. I’m not sure though. I’ve also tried moving the position of the JavaScript script tags on the page to no avail. Here’s examples of the code I’m using.

Here’s the function controlling showing/blocking of individual pages.

    function showPage(page) {
        document.querySelectorAll('tbody').forEach(tbody => {tbody.style.display = 'none';})

        document.querySelector(`#${page}`).style.display = 'table-row-group';
    }

    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('button').forEach(button => {
            button.onclick = function() {
                showPage(this.dataset.page);
            }           
        });
    });

Here’s an example of a button targetted by this function.

<button class="posbutton" data-page="page1">QB</button>

Here’s the function that’s submitting text to a form field.

function myFunction(txt) {
          var myTxt = txt;
      
          
          if (txt.includes('QB')) {
              document.getElementById("QB_name").value = myTxt;
          }

          else if (txt.includes('RB')) {
              document.getElementById("RB_name").value = myTxt;
          }

          else if (txt.includes('WR')) {
              document.getElementById("WR_name").value = myTxt;
          }

          else if (txt.includes('TE')) {
              document.getElementById("TE_name").value = myTxt;
          }

          else if (txt.includes('K')) {
              document.getElementById("K_name").value = myTxt;
          }
          
      }

Here’s an example of the html element targetted by the showPage function. It also contains a line with the button that’s linked to the myFunction for submitting text.

<tbody id="page1">
               
         {% for q in QBpage %}
              <tr>
                <th scope="row">
                      
                </th>
                    
                <td><h6>{{ q.player_name }}</h6></td>
                <td><input type="button"  class="btn btn-outline-primary btn-sm m-0 waves-effect" onclick="myFunction('{{ player_data.player_name }} {{ player_data.position }}')">Add</input></td>
                <td><h6> {{ q.team }} </h6></td>
                <td><h6> {{ q.position }}  </h6></td>
                <td><h6>{{ q.points }}</h6></td>
                </tr>
                  
         {% endfor %}
</tbody>

Any advice or suggestions are much appreciated.