how to overcome `uncaught (in promise)` when reconverting to 'regular' HTML?

Community Help
1

Hi there!

I am trying to re-convert an Observable notebook to ‘regular’ HTML, but am facing difficulties getting the data to ‘print’ to a table data element (<td>) with an assigned id. Printing works just fine to a <span> element with an ID.

In Observable, both methods work just fine, but in “regular” HTML, the

is returning an error:
Uncaught (in promise) TypeError: Cannot set property 'textContent' of null

Here’s a GitHub page showing the error with regular HTML (bottom two items):

And here’s an Observable notebook with things working just fine:

I’ve been searching the Internet for a solution, but coming up short. This Stack Overflow thread suggests that I should be able to add an event listener to help:

document.addEventListener("DOMContentLoaded", function(event) { 
    //Do work
});

… But I can’t get this working at all (no real idea how to nest in this ‘add event listener’ parameter.

Any suggestions?

2

Hello Aaron,
I’m not an expert so I probably don’t understand correctly the problem.
But I do reproduce your error until I put the td in <table> scope.
I guess td is still a reserved tag and you cannot use if not enclosed in <table><tr> ... </tr></table>

2 Likes
3

Thanks Malik! That totally did get things working :slightly_smiling_face:

I can’t say, unfortunately, that I really understand when reserved tags are actually reserved (versus when they are not?). For example, this works without first including <table><tr>...

 var case_name = ['case name'];

    d3.select('case_name')
        .selectAll('td')
        .data(case_name)
        .enter()
        .append('td')
        .text(function(d) { return d; });

I initially tried nesting a <td> element within a <p> element because it produced the behavior I was after: keeping all the records on a single line. <span> worked, which is great, but I kept running down the rabbit hole trying to get past the errors I was experiencing. Your solution shows that I should have just stepped back for a minute and tried to create an actual table first :wink:

In response to a comment you made in your recent question… I, like you, am learning without any non-internet-based human interaction! It’s rough, I agree. Everyone on this forum has been totally helpful and patient with my questions – which I feel must seem ridiculous to more experienced people, but I keep asking anyway. I’ve moved from never having used any sort of programming language a year ago to when I first signed up to Observable to now being able to make minor modifications to graphs and charts, and slowly I;m figuring out how to move these from Observable back into ‘regular’ HTML. It’s a journey! … So yeah, I fully empathize with you.

Thanks again for this tip!

Wishing you an excellent adventure,

Aaron

2 Likes