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 1000 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 1000 1
Last post

Popular Pragmatic Bookshelf topics Top

jamis
PragProg Customers

The Ray Tracer Challenge: various errata
The following is cross-posted from the original Ray Tracer Challenge forum, from a post by garfieldnate. I’m cross-posting it so that the...
#errata/book-the-ray-tracer-challenge
4 2434 3
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 1177 1
New
herminiotorres
PragProg Customers

Concurrent Data Processing in Elixir: various errata
Hi @Margaret , On page VII the book tells us the example and snippets will be all using Elixir version 1.11 But on page 3 almost the en...
#errata/book-concurrent-data-processing-in-elixir
15 1549 13
New
raul
PragProg Customers

Distributed Services with Go: Chapter 1 Suggestions
Hi Travis! Thank you for the cool book! :slight_smile: I made a list of issues and thought I could post them chapter by chapter. I’m rev...
#errata/book-distributed-services-with-go
2 1185 3
New
AndyDavis3416
PragProg Customers

Modern Front-End Development for Rails: ERROR in tsconfig.json Chapter_01/01
@noelrappin Running the webpack dev server, I receive the following warning: ERROR in tsconfig.json TS18003: No inputs were found in c...
/book-modern-front-end-development-for-rails
3 1438 3
New
jskubick
PragProg Customers

Kotlin and Android Development featuring Jetpack: $kotlin_version ? (page 8)
I’m running Android Studio “Arctic Fox” 2020.3.1 Patch 2, and I’m embarrassed to admit that I only made it to page 8 before running into ...
#errata/book-kotlin-and-android-development-featuring-jetpack
0 1698 3
New
brunogirin
PragProg Customers

Python Testing with pytest, Second Edition: error when installing editable package (page 178)
When installing Cards as an editable package, I get the following error: ERROR: File “setup.py” not found. Directory cannot be installe...
#errata/book-python-testing-with-pytest-second-edition
0 1739 1
New
AufHe
PragProg Customers

Agile Web Development with Rails 7: page 113 - Seeing the list of products
I’m a newbie to Rails 7 and have hit an issue with the bin/Dev script mentioned on pages 112-113. Iteration A1 - Seeing the list of prod...
#question/book-agile-web-development-with-rails-7
0 2631 9
New
NaplesDave
PragProg Customers

Kotlin and Android Development featuring Jetpack:Page 44, Can't build project
@mfazio23 I am following along and I have gotten up to adding the data binding items. The project has built alright until I added the da...
#question/book-kotlin-and-android-development-featuring-jetpack
1 837 5
New
dachristenson
PragProg Customers

Kotlin and Android Development featuring Jetpack: End Ch. 11 app runs but consistently crashes
I’ve got to the end of Ch. 11, and the app runs, with all tabs displaying what they should – at first. After switching around between St...
#question/book-kotlin-and-android-development-featuring-jetpack
0 936 8
New

Other popular topics Top

PragmaticBookshelf
Backend>Learning Resources

Distributed Services with Go
Take your Go skills to the next level by learning how to design, develop, and deploy a distributed service. Start from the bare essential...
pragprog.com
#pragprog/go#published-book/book-distributed-services-with-go
1 4310 0
New
AstonJ
General Dev>Hardware

Planck vs Preonic vs Subatomic (Keyboards)
I ended up cancelling my Moonlander order as I think it’s just going to be a bit too bulky for me. I think the Planck and the Preonic (o...
/keyboards#mechanical-keyboards#ortholinear#planck#preonic
105 17596 47
New
AstonJ
General Dev>Hardware

BIIP MT3 Extended 2048 Custom Keycap Set (Drop)
This looks like a stunning keycap set :orange_heart: A LEGENDARY KEYBOARD LIVES ON When you bought an Apple Macintosh computer in the e...
/keyboards#apple#keycaps#mechanical-keyboards
14 6713 7
New
AstonJ
General Dev>Dev Chat

How fast do you type? Check your WPM here!
Do the test and post your score :nerd_face: :keyboard: If possible, please add info such as the keyboard you’re using, the layout (Qw...
typing-speed-test.aoeu.eu
/keyboards
82 7682 31
New
foxtrottwist
General Dev>Dev Chat

Warp—The blazingly fast, Rust-based terminal
A few weeks ago I started using Warp a terminal written in rust. Though in it’s current state of development there are a few caveats (tab...
/rust#terminal
52 6785 22
New
PragmaticBookshelf
Community>In The Spotlight

Spotlight: Erin Dees (Author) Interview and AMA!
Author Spotlight Erin Dees @undees Welcome to our new author spotlight! We had the pleasure of chatting with Erin Dees, co-author of ...
#author-spotlight/ruby/rails/book-effective-testing-with-rspec-3/book-seven-more-languages-in-seven-weeks/book-cucumber-recipes#rspec
24 4247 11
New
PragmaticBookshelf
Backend>Learning Resources

Server-Driven Web Apps with htmx
Build modern server-driven web applications using htmx. Whatever programming language you use, you’ll write less (and cleaner) code. ...
pragprog.com
#pragprog#web-development#published-book/book-server-driven-web-apps-with-htmx
6 5257 3
New
NewsBot
Backend>Official News

Node.js v22.14.0 released!
Node.js v22.14.0 has been released. Link: Release 2025-02-11, Version 22.14.0 'Jod' (LTS), @aduh95 · nodejs/node · GitHub
github.com
/nodejs#official-news
0 4251 0
New
PragmaticBookshelf
Backend>Learning Resources

Simplicity
Fight complexity and reclaim the original spirit of agility by learning to simplify how you develop software. The result: a more humane a...
pragprog.com
#pragprog#published-book/book-simplicity
10 6553 8
New
PragmaticBookshelf
Backend>Learning Resources

Advanced Functional Programming with Elixir
Use advanced functional programming principles, practical Domain-Driven Design techniques, and production-ready Elixir code to build scal...
joekoski.com
#pragprog/elixir#published-book#functional-programming/book-advanced-functional-programming-with-elixir
43 4989 22
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.

EEF

Supporting innovation across the BEAM ecosystem.

coders51

We build reliable cloud platforms for business-critical systems.

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 move you from confusion to "Aha, now I get it!"

Linux New Media

Publishing Linux Magazine, ADMIN, and MakerSpace for 25+ years.

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.

EEF

Supporting innovation across the BEAM ecosystem.

coders51

We build reliable cloud platforms for business-critical systems.

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 move you from confusion to "Aha, now I get it!"

Linux New Media

Publishing Linux Magazine, ADMIN, and MakerSpace for 25+ years.

View all our sponsors ❯

We're in Beta

About us Mission Statement See our Roadmap