I want to insert a row to a table and fill cells of the new row with information from HTML elements

Question

I have an HTML table and want the body of the table to be filled in upon clicking a submit button from another HTML file in the same folder.

TABLE

<table class="tbl-upcoming">
                        <thead>
                            <th>Game</th>
                            <th>Pick</th>
                            <th>Odds</th>
                            <th>Confidence</th>
                        </thead>
                        <tbody>
                        <!--JAVASCRIPT FUNCTION FILLS OUT TABLE-->
                        </tbody>
                    </table>

SUBMIT BUTTON WITH INPUTS THAT ARE TO BE SUBMITTED

<div class="popup-content">
                    <h2>My Bet</h2>
                    <div class="content-line">
                        <span>Pick:</span>
                        <p class="choice" id="bet-choice"></p>
                    </div>
                    <div id="choice-odds" class="content-line">
                        <span>Odds:</span>
                        <input type="text" class="choice" id="odds-choice">
                    </div>
                    <div id="choice-conf" class="content-line">
                        <span>Confidence (1-10):</span>
                        <input type="number" class="choice" id="conf-choice" min="0" max="10">
                    </div>
                    <button class="close-btn" onclick="togglePopup()">&times;</button>
                    <button class="submit-btn" onclick="addBet()">Submit</button>
                </div>

JAVASCRIPT

var list1 = [];
var list2 = [];
var list3 = [];
var n = 1;
var x = 0;

function addBet() {
    var betChoice = document.getElementById("bet-choice").innerHTML;
    var oddsChoice = document.getElementById("odds-choice").innerHTML;
    var confChoice = document.getElementById("conf-choice").innerHTML;

    document.getElementById("popup-1").classList.toggle("active");

    var table = document.querySelector('.tbl-upcoming');
    var newRow = table.insertRow(n);

    list1[x] = betChoice;
    list2[x] = oddsChoice;
    list3[x] = confChoice;
    var cell1 = newRow.insertCell(0);
    var cell2 = newRow.insertCell(1);
    var cell3 = newRow.insertCell(2);
    cell1.innerHTML = list1[x];
    cell2.innerHTML = list2[x];
    cell3.innerHTML = list3[x];

    n++;
    x++;
}

The table remains unchanged after I click submit. Here is the error I get when I inspect the console

Uncaught TypeError: Cannot read properties of null (reading 'insertRow')
    at addBet (app.js:22:24)
    at HTMLButtonElement.onclick (bet-page.html:103:67)

Any ideas on what I'm doing wrong?

it's saying that the variable `table` is null; is your script in the same file as the table? — mykaf, Nov 16 '22 at 19:07
Unable to reproduce the error from the code provide. Please provide a runnable code snippet that illustrates the problem. — Yogi, Nov 16 '22 at 19:37

score 0 · Answer 1 · answered Nov 16 '22 at 20:31

The document object which you are referring to in the javascript file, corresponds to the document where the submit button is.

var table = document.querySelector('.tbl-upcoming');

If you console log the document object:

<div class="popup-content">
<h2>My Bet</h2>
<div class="content-line">
    <span>Pick:</span>
    <p class="choice" id="bet-choice"></p>
</div>
<div id="choice-odds" class="content-line">
    <span>Odds:</span>
    <input type="text" class="choice" id="odds-choice">
</div>
<div id="choice-conf" class="content-line">
    <span>Confidence (1-10):</span>
    <input type="number" class="choice" id="conf-choice" min="0" max="10">
</div>
<button class="close-btn" onclick="togglePopup()">×</button>
<button class="submit-btn" onclick="addBet()">Submit</button>

You won't find any table or element with the table-upcoming class That's why it gives you this error:

   Uncaught TypeError: Cannot read properties of null (reading 'insertRow')
at addBet (stackoverflow.js:16:24)
at HTMLButtonElement.onclick (stackoverflow2.html:20:51)

You can use the examples explained in this post [link](https://stackoverflow.com/questions/17502071/transfer-data-from-one-html-file-to-another) — Antonio Ramos, Nov 16 '22 at 20:36

I want to insert a row to a table and fill cells of the new row with information from HTML elements

1 Answers1