PragProg Customers

Programming Elm: need to wait for DOMContentLoaded to getElementById?

gcapell

gcapell

Programming Elm: need to wait for DOMContentLoaded to getElementById?

When we first create picshare.js we’re told to link it from our HTML with

<script>
Elm.Picshare.init({node: document.getElementById('main')});
</script>

but when I try this it looks like the getElementById doesn’t find anything (I’ve got the script in my head node).
When I wrap it in a document.addEventListener('DOMContentLoaded', (event) => {Elm.Picshare.init ... things work OK.
Was I doing something wrong?

1 comment
/book-programming-elm#suggestion
4 980 1

Most Liked

jfairbank

jfairbank

Author of Programming Elm

Hi, @gcapell!

Thanks for the question and sorry for missing your question so long ago. We’ve been transitioning over with the new Prag site changes to these forums.

You can definitely place the script tags in the head if you like and then use the DOMContentLoaded event to kick off the initialization as you’ve already done.

The intent in the book was to place the script before the closing </body> tag, replacing the <!-- REPLACE ME --> comment. As long as the script tags are below the <div id="main"> tag, you don’t need the DOMContentLoaded event as that element will be available by that point. I can see how the book could be misleading, though, since it doesn’t explicitly say to put the scripts in the body.

Sorry for the confusion and glad you had figured out a way to fix it with the event.

Cheers!

2
Post #2

Popular Prag Prog topics Top

abtin
PragProg Customers

Distributed Services With Go - gogoproto on linux
page 20: … protoc command… I had to additionally run the following go get commands in order to be able to compile protobuf code using go...
/book-distributed-services-with-go#errata
14 2915 7
New
edruder
PragProg Customers

Docker for Rails Developers: Notes for Rails 6.1, Ruby 2.7.2
I thought that there might be interest in using the book with Rails 6.1 and Ruby 2.7.2. I’ll note what I needed to do differently here. ...
/book-docker-for-rails-developers
9 1170 1
New
rmurray10127
PragProg Customers

Intuitive Python: docker run… denied error (page 2)
Title: Intuitive Python: docker run… denied error (page 2) Attempted to run the docker command in both CLI and Powershell PS C:\Users\r...
#errata/book-intuitive-python
9 1256 4
New
nicoatridge
PragProg Customers

Kotlin and Android Development: Could not get unknown property ‘kotlin_version’…
Hi, I have just acquired Michael Fazio’s “Kotlin and Android Development” to learn about game programming for Android. I have a game in p...
/book-kotlin-and-android-development-featuring-jetpack
0 7935 6
New
brunogirin
PragProg Customers

Python Testing with pytest, Second Edition: error when running tox in parallel (page 151)
When trying to run tox in parallel as explained on page 151, I got the following error: tox: error: argument -p/–parallel: expected one...
#errata/book-python-testing-with-pytest-second-edition
0 1102 1
New
oaklandgit
PragProg Customers

Hands-on Rust: Failed to Load Texture error (page 121)
Hi, I completed chapter 6 but am getting the following error when running: thread 'main' panicked at 'Failed to load texture: IoError(O...
/book-hands-on-rust
2 1302 3
New
hazardco
PragProg Customers

Agile Web Development with Rails 7: Example code does not work delete method (page 78)
On page 78 the following code appears: &lt;%= link_to ‘Destroy’, product, class: ‘hover:underline’, method: :delete, data: { confirm...
#suggestion/book-agile-web-development-with-rails-7
1 1263 2
New
Henrai
PragProg Customers

The Ray Tracer Challenge: Cannot get rid of acne When implement Shadows in Chapter 8.
Hi, I’m working on the Chapter 8 of the book. After I add add the point_offset, I’m still able to see acne: In the image above, I re...
#question/book-the-ray-tracer-challenge
1 1015 4
New
a.zampa
PragProg Customers

Kotlin and Android Development featuring Jetpack: error concerning function getCurrentStandings in BaseballDao.java
@mfazio23 I’m following the indications of the book and arriver ad chapter 10, but the app cannot be compiled due to an error in the Bas...
#question/book-kotlin-and-android-development-featuring-jetpack
1 3324 6
New
dtonhofer
PragProg Customers

The Definitive ANTLR 4 Reference - "Java.g4" grammer (used on page 40) no longer passes ANTLR
@parrt In the context of Chapter 4.3, the grammar Java.g4, meant to parse Java 6 compilation units, no longer passes ANTLR (currently 4....
#errata/book-the-definitive-antlr-4-reference
0 1003 3
New

Other popular topics Top

malloryerik
Frontend Developer Forum>Chat/Discussions

Svelte - what do you think about it?
Any thoughts on Svelte? Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue...
#opinions/svelte
54 3310 17
New
axelson
Cross-Platform Dev Forum>Apps/Libraries/Tools

Obsidian – a cross platform app to help you create a knowledge base with Markdown files
I’ve been really enjoying obsidian.md: It is very snappy (even though it is based on Electron). I love that it is all local by defaul...
#macos#windows#linux/markdown#obsidian#apps
38 3782 19
New
AstonJ
Code Editors

Onivim 2 Code Editor
Thanks to @foxtrottwist’s and @Tomas’s posts in this thread: Poll: Which code editor do you use? I bought Onivim! :nerd_face: https://on...
#code-editors/onivim/revery
88 5068 32
New
Exadra37
macOS Developer Forum>Chat/Discussions

Your Mac Isn't Yours - worse, it spies on you and sends it home unencrypted
On modern versions of macOS, you simply can’t power on your computer, launch a text editor or eBook reader, and write or read, without a ...
sneak.berlin
#macos#macs#apple#privacy#mac-privacy#big-sur
24 3384 24
New
mafinar
Journals & Book Clubs

Programming Crystal Book Club
Crystal recently reached version 1. I had been following it for awhile but never got to really learn it. Most languages I picked up out o...
/crystal/book-programming-crystal#book-club
155 4122 65
New
PragmaticBookshelf
In The Spotlight

Spotlight: James Stanier (Author) Interview and AMA!
Author Spotlight James Stanier @jstanier James Stanier, author of Effective Remote Work , discusses how to rethink the office as we e...
#pragprog#remote/book-effective-remote-work
29 3856 12
New
PragmaticBookshelf
Backend Developer Forum>Learning Resources

Agile Web Development with Rails 7
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
#pragprog#web-development/ruby/rails#published-book/book-agile-web-development-with-rails-7
32 2728 9
New
AstonJ
General Dev Chat

Chris Seaton, the creator of TruffleRuby, has died
Chris Seaton, the creator of TruffleRuby has died. It appears from suicide :cry: He left this note on Twitter on the weekend: And one...
/ruby#mental-health
4 2131 2
New
PragmaticBookshelf
In The Spotlight

Spotlight: Sophie DeBenedetto (Author) Interview and AMA!
Author Spotlight: Sophie DeBenedetto @SophieDeBenedetto The days of the traditional request-response web application are long gone, b...
/elixir/phoenix#liveview/book-programming-phoenix-liveview
37 2988 14
New
CommunityNews
In The News

Review of Linux on Minisforum V3 AMD Ryzen Tablet
A Brief Review of the Minisforum V3 AMD Tablet. Update: I have created an awesome-minisforum-v3 GitHub repository to list information fo...
mudkip.me
#review#linux#amd
0 1252 0
New
Back to top

Latest in PragProg

The Definitive ANTLR 4 Reference: Build-in types commented ;-) as user-defined types (Page 66)
PragProg Customers
The Definitive ANTLR 4 Reference: No download link provided for TestEnum2.java (Page 197)
PragProg Customers
Build Websites with Hugo: Using with recent Hugo versions
PragProg Customers
Hotwire Native for Rails Developers: how can i hide a tab bar? (page 76)
PragProg Customers
Ash Framework: Incorrect return of {:ok, ...} for bang (!) function (page 20)
PragProg Customers
Powerful Command-Line Applications in Go: ListAction example missing args (page 241)
PragProg Customers
Agile Web Development with Rails 8_B6.0(page 148)
PragProg Customers
Advanced Hands-on Rust: Workspace Dependencies (B4.0 page 41)
PragProg Customers
Agile Web Development with Rails 8_B6.0(page 139)
PragProg Customers
Effective Haskell: duplicate extension (page xx)
PragProg Customers
Agile Web Development with Rails 8_B6.0(page 126)
PragProg Customers
Hotwire Native for Rails Developers: env.local? true -> false (page 237)
PragProg Customers
Kotlin Coroutine Confidence: error handling suggestion (page 43) (Solved)
PragProg Customers
Kotlin Coroutine Confidence: misleading image or text (p 20ish)
PragProg Customers
Kotlin Coroutine Confidence: not using kotlin style builder pattern (page 19ish)
PragProg Customers
Kotlin Coroutine Confidence: TimerApplication: won't app finish before timer?
PragProg Customers
Real-World Event Sourcing: duplicated paragraph (p. 30)
PragProg Customers
Agile Web Development with Rails 8_B6.0 "headless_chrome" related (page 189)
PragProg Customers
Real World Event Sourcing: typo, data elided for readability (p. 32)
PragProg Customers
I cannot download PDF versions of two books I purchased
PragProg Customers

View all threads ❯

Latest (all)

The many fallacies of 'AI won't take your job, but someone using AI will'
Industry & Culture
Procedural Textures with Hash Functions
In The News
Size matter (in PostgreSQL)
In The News
Django: See you at PyCon US in Pittsburgh!
Backend News
Kotlin Notebook Arrives in IntelliJ IDEA
Backend News
Ruby 3.5.0 preview1 Released
Backend News
Clojure Deref (Apr 17, 2025)
Backend News
Kubuntu 25.04 Plucky Puffin released
Linux News
Deep Learning is Not So Mysterious or Different
In The News
Quantum Speedup Found for Huge Class of Hard Problems | Quanta Magazine
In The News
GIMP - GIMP 3.0 Released
In The News
Google is gifting a year of Gemini Advanced to every college student in the US
In The News
Kotlin v2.1.21-RC released!
Backend News
WebSharper 9.0.0.547 released!
Backend News
Spring v7.0.0-M4 and v6.1.19 released!
Backend News

View all threads ❯

We ❤️ helpful members!

We reward our most helpful members via our MOTM scheme - by giving away a whopping 25 books per year!

Member of the Month

Devtalk Sponsors

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

AppSignal

Catch errors, track performance, monitor hosts and more.

WyeWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Popular Portals

Devtalk Sponsors

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

Erlang Solutions

We build trusted fault-tolerant systems that scale to billions of users.

AppSignal

Catch errors, track performance, monitor hosts and more.

WyeWorks

Enabling companies to succeed by building software people love.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement See our Roadmap