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

Where Next?

View thread on forum
View Programming Elm's book portal
Post errata for this book
Post a suggestion for this book
Post a question about this book
Post a review about this book
Home PragProg Customers
/book-programming-elm#suggestion
4 984 1
Last post

Popular Pragmatic Bookshelf topics Top

telemachus
PragProg Customers

Warnings in Python Testing With Pytest Chapter 2
Python Testing With Pytest - Chapter 2, warnings for “unregistered custom marks” While running the smoke tests in Chapter 2, I get these...
#pragprog#errata/book-python-testing-with-pytest
5 2075 1
New
sdmoralesma
PragProg Customers

Web Development with Clojure, Third Edition: migrations/create not working: p159
Title: Web Development with Clojure, Third Edition - migrations/create not working: p159 When I execute the command: user=&gt; (create-...
#question/book-web-development-with-clojure-third-edition
5 1083 2
New
jdufour
PragProg Customers

The Cucumber for Java Book:
Hello! On page xix of the preface, it says there is a community forum "… for help if your’re stuck on one of the exercises in this book… ...
#question/book-the-cucumber-for-java-book
3 1140 1
New
joepstender
PragProg Customers

Programming Phoenix LiveView: errata and remarks Version B2.0
The generated iex result below should list products instead of product for the metadata. (page 67) iex&gt; product = %Product{} %Pento....
#errata/book-programming-phoenix-liveview
0 1798 20
New
patoncrispy
PragProg Customers

Hands-on Rust: Adequate docs for bracket_lib
I’m new to Rust and am using this book to learn more as well as to feed my interest in game dev. I’ve just finished the flappy dragon exa...
#question/book-hands-on-rust
5 1482 3
New
jskubick
PragProg Customers

Kotlin and Android Development featuring Jetpack: android:tint vs app:tint (chapter 7, p186)
I found an issue in Chapter 7 regarding android:backgroundTint vs app:backgroundTint. How to replicate: load chapter-7 from zipfile i...
#errata/book-kotlin-and-android-development-featuring-jetpack
0 3494 3
New
akraut
PragProg Customers

Programming Phoenix LiveView: Display Image Uploads (pdf p142)
The markup used to display the uploaded image results in a Phoenix.LiveView.HTMLTokenizer.ParseError error. lib/pento_web/live/product_l...
#errata/book-programming-phoenix-liveview
2 2081 9
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 1005 3
New
davetron5000
PragProg Customers

Bug with dx/build - how to workaround until fix is up
Hello faithful readers! If you have tried to follow along in the book, you are asked to start up the dev environment via dx/build and ar...
#errata/book-ruby-on-rails-background-jobs-with-sidekiq
3 1149 19
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...
#errata/book-machine-learning-in-elixir
1 1080 10
New

Other popular topics Top

AstonJ
General Dev>Hardware

Which keyboard do you have?
If it’s a mechanical keyboard, which switches do you have? Would you recommend it? Why? What will your next keyboard be? Pics always w...
#hardware/keyboards#sticky#mechanical-keyboards
144 8363 50
New
AstonJ
Science/Tech>Tech Chat

What are you watching?
Or looking forward to? :nerd_face:
#community
480 9263 251
New
DevotionGeo
Backend>Chat

Would you use Erlang now when there is Elixir?
Why, if your answer is yes?
/elixir/erlang
167 4270 52
New
AstonJ
General Dev>Dev Chat

Which language or framework do you want to learn next?
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
#community#learning
242 5893 95
New
PragmaticBookshelf
Game Dev>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.com
#pragprog/rust#published-book/book-hands-on-rust
118 7548 30
New
Rainer
General Dev>Dev Chat

Do you have any (non-dev) hobbies?
Not sure if following fits exactly this thread, or if we should have a hobby thread… For many years I’m designing and building model air...
#community
200 3458 78
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Paolo Perrotta (Author)
“A Mystical Experience” Hero’s Journey with Paolo Perrotta @nusco Ever wonder how authoring books compares to writing articles?...
#community#author-spotlight/book-programming-machine-learning/book-metaprogramming-ruby-2
31 3435 15
New
PragmaticBookshelf
Community>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 3098 14
New
AstonJ
Backend>Questions

Psql: error: connection to server on socket "/tmp/.s.PGSQL.5432" failed: No such file or directory
If you’re getting errors like this: psql: error: connection to server on socket “/tmp/.s.PGSQL.5432” failed: No such file or directory ...
#macos/rails/postgresql
1 1825 1
New
AnfaengerAlex
Android>Questions

Unresolved Reference to android in build.gradle.kts – Beginner Issue
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
#binding
0 1562 2
New
Back to top

Latest in Programming Elm

Programming Elm Portal ❯

PragProg Customers

Pragmatic Bookshelf PragProg Customers ❯

Latest on Devtalk

Devtalk ❯

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.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

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:

Sub 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.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

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