JavaScript getElementByID() for HTML Table

Question

Learning Javascript at the moment, so please bear with me. I created a table in my connected.html and I am trying to obtain the element between the <td> tags in my event-page.js. I used document.getElementByID("tokens"), however I get null, I want to get 12. I think I have to do more with document.getElementByID("tokens") I used .innerText and .innerHTML but those didn't work. Any help would be appreciated! Sorry for such a simple problem.

*Note: The function in event-page.js is called when a button is clicked by the user.

connected.html

<html>
<head>
</head>
<body>
    <table>
        <tr>
            <td colspan="4" class="info">Tokens</td>
        </tr>
        <tr>
            <td id="tokens">12</td>
        </tr>
    </table>
</body>
</html>

event-page.js

chrome.extension.onMessage.addListener(function(request, sender, sendResponse){
    if (request.action.split(':')[0] === 'got-it'){

        yt_name = (request.action.split(':')[1])

        console.log(yt_name)

        let table = document.getElementById("tokens")

        console.log(table)
    }
})

I this a content script? https://developer.chrome.com/extensions/content_scripts Please provide a more complete example. At this point it's unclear how the HTML document and the JavaScript file are wired together. — Felix Kling, Apr 01 '20 at 10:41
@VLAZ I saw that! I couldn't find a reference in `.getElementById()` with a table though... — Chris, Apr 01 '20 at 10:41
Background scripts cannot access the DOM of the web page afaik. You need a content script that accesses the DOM and communicates with your background script. This has nothing to do with how JavaScript or the DOM works but with how Chrome extensions work. — Felix Kling, Apr 01 '20 at 10:45
@FerinPatel I did not link the event-page.js in html page...if I am suppose to how would I approach that? — Chris, Apr 01 '20 at 10:47
@FelixKling Oh yikes, I know that rule! However, connected.html is an .html I created for the user to view, so the event-page.js still can't access the DOM? — Chris, Apr 01 '20 at 10:51
@FerinPatel Wait...in the connected.html do I need to include `` , if I do, event-page.js should be able to identify the element? — Chris, Apr 01 '20 at 10:54
Wait, so `connected.html` is supposed to be rendered as part of the Chrome extension? As I said before, please provide more context. We cannot know how all these files are related. — Felix Kling, Apr 01 '20 at 10:59
@FerinPatel I added that one line into connected.html however, still *null* — Chris, Apr 01 '20 at 11:03
@FelixKling Very sorry, not sure how well I can explain it through text. The way it is structured is that there is a popup.html. When a button is pressed in the popup.html, it then executes `chrome.browserAction.setPopup({ popup: "connected.html" })` , by executing that API, it will add a new popup .html — Chris, Apr 01 '20 at 11:08

score 0 · Answer 1 · answered Apr 01 '20 at 11:07

0

This Works, that means your EventListener are called before the DOM is loaded.

let table = document.getElementById("tokens")
console.log(table)

    <table>
        <tr>
            <td colspan="4" class="info">Tokens</td>
        </tr>
        <tr>
            <td id="tokens">12</td>
        </tr>
    </table>

answered Apr 01 '20 at 11:07

Ferin Patel

3,424
2
17
49

That makes sense, I think I need to check the structure of my program. Thank you! – Chris Apr 01 '20 at 11:13

JavaScript getElementByID() for HTML Table

1 Answers1