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 984 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

jeffmcompsci
PragProg Customers

Design and Build Great Web APIs: typo (page, 19, third bullet in URL list)
Title: Design and Build Great Web APIs - typo “https://company-atk.herokuapp.com/2258ie4t68jv” (page 19, third bullet in URL list) Typo:...
#errata#pragprog/book-design-and-build-great-web-apis
8 1916 7
New
Mmm
PragProg Customers

Hands-on Rust: Build depending on bracket-lib fails
Hi, build fails on: bracket-lib = “~0.8.1” when running on Mac Mini M1 Rust version 1.5.0: Compiling winit v0.22.2 error[E0308]: mi...
#question/book-hands-on-rust
1 1214 1
New
Chrichton
PragProg Customers

Programming Phoenix LiveView: B03 (page 56-57) auth exercise
Dear Sophie. I tried to do the “Authorization” exercise and have two questions: When trying to plug in an email-service, I found the ...
#question/book-programming-phoenix-liveview
1 1179 3
New
adamwoolhether
PragProg Customers

Distributed Services With Go: Unable to pass readiness/liveness checks. (page 210, 215)
I’m not quite sure what’s going on here, but I’m unable to have to containers successfully complete the Readiness/Liveness checks. I’m im...
/book-distributed-services-with-go
5 1394 5
New
digitalbias
PragProg Customers

Build a Weather Station with Elixir and Nerves: Problem connecting to Postgres with Grafana
Title: Build a Weather Station with Elixir and Nerves: Problem connecting to Postgres with Grafana on (page 64) If you follow the defau...
#errata/book-build-a-weather-station-with-elixir-and-nerves
0 1931 4
New
brunogirin
PragProg Customers

Python Testing with pytest, Second Edition: unrecognized arguments error (page 122)
When I run the coverage example to report on missing lines, I get: pytest --cov=cards --report=term-missing ch7 ERROR: usage: pytest [op...
#errata/book-python-testing-with-pytest-second-edition
0 3933 1
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 1019 4
New
jwandekoken
PragProg Customers

Programming Phoenix LiveView: Live Upload Match Error
Book: Programming Phoenix LiveView, page 142 (157/378), file lib/pento_web/live/product_live/form_component.ex, in the function below: d...
#errata/book-programming-phoenix-liveview
7 1151 10
New
SlowburnAZ
PragProg Customers

Machine Learning in Elixir:Error installing EXLA dependency - Page 25
Getting an error when installing the dependencies at the start of this chapter: could not compile dependency :exla, "mix compile" failed...
/book-machine-learning-in-elixir#errata
1 1065 10
New
dachristenson
PragProg Customers

Kotlin and Android Development featuring Jetpack: No activity_main.xml anymore
I just bought this book to learn about Android development, and I’m already running into a major issue in Ch. 1, p. 20: “Update activity...
#errata/book-kotlin-and-android-development-featuring-jetpack
0 2008 6
New

Other popular topics Top

Devtalk
General Dev Chat

HELLO WORLD (Introductions thread!)
Hello Devtalk World! Please let us know a little about who you are and where you’re from :nerd_face:
#community
476 5558 111
New
DevotionGeo
Backend Developer Forum>Chat/Discussions

What is the reason behind Rust’s web framework, Rocket, not performing as well as expected in the Techempower benchmarks?
I know that these benchmarks might not be the exact picture of real-world scenario, but still I expect a Rust web framework performing a ...
/rust#web-frameworks
36 6266 11
New
AstonJ
Hardware

Poll: Which keyboard layout do you use?
poll poll Be sure to check out @Dusty’s article posted here: An Introduction to Alternative Keyboard Layouts It’s one of the best write-...
colemakmods.github.io
#polls/keyboards
10 5134 11
New
PragmaticBookshelf
Game Developer Forum>Learning Resources

Hands-on Rust: Effective Learning through 2D Game Development and Play
Rust is an exciting new programming language combining the power of C with memory safety, fearless concurrency, and productivity boosters...
#pragprog/rust#published-book/book-hands-on-rust
118 7158 30
New
DevotionGeo
General Dev Chat

The V Programming Language
The V Programming Language Simple language for building maintainable programs V is already mentioned couple of times in the forum, but I...
#programminguages/v
21 10890 7
New
wmnnd
Blogs/Articles/Talks/Podcasts

Failing Big with Elixir and LiveView - A Post-Mortem
Here’s the story how one of the world’s first production deployments of LiveView came to be - and how trying to improve it almost caused ...
pentacent.com
/elixir/phoenix#blog-post#liveview
37 2543 14
New
rustkas
Backend Developer Forum>Chat/Discussions

Using Regular Expressions in Erlang
Intensively researching Erlang books and additional resources on it, I have found that the topic of using Regular Expressions is either c...
/erlang#regular-expressions
91 4938 43
New
Help
Game Developer Forum>Questions/Help

Can I use Java to program a game for Nintendo switch?
I am trying to crate a game for the Nintendo switch, I wanted to use Java as I am comfortable with that programming language. Can you use...
/java#nintendo
8 3251 3
New
First poster: CommunityNews
AI In The News

How to fix the eyes in AI-generated images
aidemos.info
0 2752 0
New
PragmaticBookshelf
In The Spotlight

Spotlight: David Bryant Copeland (Author) Interview and AMA!
Author Spotlight: David Bryant Copeland @davetron5000 We’re so happy to bring you another Author Spotlight, a series where we sit dow...
#author-spotlight/book-agile-web-development-with-rails-6/book-rails-angular-postgres-and-bootstrap-second-edition/book-sustainable-web-development-with-ruby-on-rails
19 3229 15
New
Back to top

Latest in PragProg

Hotwire Native for Rails Developers: Collected Errata from our class at the University of Chicago
PragProg Customers
Agile Web Development with Rails 7 p1.0—May2023: foreman Gem (page 73)
PragProg Customers
The Definitive ANTLR 4 Reference: No download link provided for TestSimple.java (Page 240)
PragProg Customers
Programming Phoenix LiveView: Wrong closing element tag (page 106)
PragProg Customers
Programming Phoenix LiveView: Typo (page 103)
PragProg Customers
Programming Phoenix LiveView: Wrong HTML comment tag in example (page 102)
PragProg Customers
Programming Phoenix LiveView: typo missing word (page 101)
PragProg Customers
Agile Web Development with Rails 8 B7.0: order_mailer_test failing (page 196)
PragProg Customers
Simplicity: Let’s Change Our World — Again
PragProg Customers
Simplicity: "detail"→"derail" (page 74, B2.0)
PragProg Customers
Agile Web Development with Rails 8: Page 9
PragProg Customers
Kotlin Coroutine Confidence: Code does not run (pg 225)
PragProg Customers
Agile Web Development with Rails 8 B7.0: partials folder (page 151)
PragProg Customers
Kotlin Coroutine Confidence: Change function name, maybe (pg 182)
PragProg Customers
Modern Front-End Development for Rails, Second Edition: can't get code to run
PragProg Customers
Kotlin Coroutine Confidence: Book & source code do not match (pg 180)
PragProg Customers
Kotlin Coroutine Confidence: Add formatter off/on comments (pg 162)
PragProg Customers
Kotlin Coroutine Confidence: What's the IntelliJ IDEA inspection? (pg 133 & 141)
PragProg Customers
Kotlin Coroutine Confidence: Add `parallel/v9` (pg 125)
PragProg Customers
Agile Web Development with Rails 8_B7.0 (pages 93/94)
PragProg Customers

View all threads ❯

Latest (all)

Elon Musk is responsible for “killing the world’s poorest children,” says Bill Gates
In The News
Memory Safety Features in Zig
Backend In The News
Hardening GitHub Actions: Lessons from Recent Attacks | Wiz Blog
In The News
Erlang OTP-27.3.4 released!
Backend News (official)
Scala 3.3.6 LTS is now available!
Backend News (official)
AI is Like Cars
Blogs/Articles/Talks/Podcasts
Sony WH-1000XM6 headphone specs and details leak early
Tech Chat
OpenSearch 3.0 Enhances Vector Database Performance, Search Infrastructure and Scalability to Meet AI-driven Demand - OpenSearch
In The News
Waiting for Postgres 18: Accelerating Disk Reads with Asynchronous I/O
Backend In The News
Quarkus 3.22.2 released!
Backend News (official)
React Native v0.80.0-rc.0 released!
Hybrid News (official)
Django security releases issued: 5.2.1, 5.1.9 and 4.2.21
Backend News (official)
Python 3.14.0 beta 1 is here!
Backend News (official)
Crystal: Margret Riegert joins the Core Team
Backend News (official)
Clojure Deref (May 3, 2025)
Backend News (official)

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.

Manning Publications

Develop your skills with books, videos, and courses.

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.

Manning Publications

Develop your skills with books, videos, and courses.

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