How to create an html table with data that can change using JS

Question

I'm trying to create an online calculator, using a table, with a tag that will have an output that changes. The output is the result of whatever math function is used on the calculator. So if someone puts in 5*5, the th should show 25. I tried using a variable, output, in javascript, and then using document.getElementsByTagName("th").innerHTML(output), to have it changing, but that didn't work. Then I tried the same command without a variable, and instead just directly inserting a string in the innerHTML and it still wasn't working. I also tried write(), but that didn't work either. Any ideas on what I can try?

This is my table (the id's and classes are just some style attributes in my css file):

<table class="center" style = "width:20%">
    <tr>
        <th colspan="4" id = "final">0</th>
    </tr>
    <tr id = "opRow">
        <td>+</td>
        <td>-</td>
        <td>x</td>
        <td>/</td>
    </tr>
    <tr class = "dataRow">
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td rowspan = "4" id = "eqBut">=</td>
    </tr>
    <tr class = "dataRow">
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr class = "dataRow">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class = "dataRow">
        <td style = "width:26%" id = "acBut">ac</td>
        <td>0</td>
        <td>.</td>
    </tr>
</table>

itishrishikesh · Accepted Answer · 2021-10-25 08:51:52Z

2

getElementsByTagName() returns an array and so you'll have to reference it like this:

document.getElementsByTagName("th")[0]

assuming that you only have 1 th tag on your current page.

plus innerHTML is a property of an element and not a method, so you'll have to rewrite:

document.getElementsByTagName("th")[0].innerHTML = output

Also, your current implementation should be throwing some errors in your browser console log please do check it out.

answered Oct 25, 2021 at 8:51

itishrishikesh

3373 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cătălin · Accepted Answer · 2021-10-25 09:19:44Z

1

Method / function

getElementsByTagName

is returning an array with all available tags from your html, then you've only 1 th in your table so is result the th tag from your table is first [0], now use method mention to select th tag and select first element [0]

innerHTML - used to rewrite data as I know

and use it to rewrite cell.

So use that :

document.getElementsByTagName("th")[0].innerHTML = 52;

To check if is working try this :

document.addEventListener("DOMContentLoaded", function(){
    document.getElementsByTagName("th")[0].innerHTML = 52;
});

Well, I hope that you understand what I want to say. Thanks.

answered Oct 25, 2021 at 9:19

Cătălin

6110 bronze badges

Collectives™ on Stack Overflow

How to create an html table with data that can change using JS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related