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

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 2081 1
New
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:...
#pragprog#errata/book-design-and-build-great-web-apis
8 1941 7
New
yulkin
PragProg Customers

Programming Flutter: Image.toByteData() does not exist (page40)
your book suggests to use Image.toByteData() to convert image to bytes, however I get the following error: "the getter ‘toByteData’ isn’t...
/book-programming-flutter#question
1 4102 2
New
simonpeter
PragProg Customers

Web Development with Clojure, Third Edition: (create-migration "guestbook") not working (page 9)
When I try the command to create a pair of migration files I get an error. user=&gt; (create-migration "guestbook") Execution error (Ill...
#errata/book-web-development-with-clojure-third-edition
5 1788 4
New
curtosis
PragProg Customers

Build a Weather Station with Elixir and Nerves: 'mix deps.get' does not work if user has not created a keyfile (page 16)
Running mix deps.get in the sensor_hub directory fails with the following error: ** (Mix) No SSH public keys found in ~/.ssh. An ssh aut...
#errata/book-build-a-weather-station-with-elixir-and-nerves
2 1457 3
New
fynn
PragProg Customers

Build a Weather Station with Elixir and Nerves: SGP30 vs SGP40
This is as much a suggestion as a question, as a note for others. Locally the SGP30 wasn’t available, so I ordered a SGP40. On page 53, ...
#suggestion/book-build-a-weather-station-with-elixir-and-nerves
0 1292 2
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 1420 5
New
Charles
PragProg Customers

Programming Phoenix LiveView: book not updated to version 1.6 (p. 18)
In general, the book isn’t yet updated for Phoenix version 1.6. On page 18 of the book, the authors indicate that an auto generated of ro...
#errata/book-programming-phoenix-liveview
9 2051 12
New
kevinjyh
PragProg Customers

Python Testing with pytest, Second Edition:Abou epub format
Is the book’s epub format available to read on Google Play Books?
#question/book-python-testing-with-pytest-second-edition
0 1126 3
New
creminology
PragProg Customers

Real Time Phoenix Errata P17: Getting first sample working with Phoenix 1.6.x
Skimming ahead, much of the following is explained in Chapter 3, but new readers (like me!) will hit a roadblock in Chapter 2 with their ...
#errata/book-real-time-phoenix
6 1116 5
New

Other popular topics Top

PragmaticBookshelf
Backend>Learning Resources

Seven Languages in Seven Weeks
Ruby, Io, Prolog, Scala, Erlang, Clojure, Haskell. With Seven Languages in Seven Weeks, by Bruce A. Tate, you’ll go beyond the syntax—and...
pragprog.com
#pragprog/clojure/erlang/haskell/prolog/ruby/scala#published-book/book-seven-languages-in-seven-weeks
5 5730 1
New
dasdom
General Dev>Dev Chat

Standing Desks
No chair. I have a standing desk. This post was split into a dedicated thread from our thread about chairs :slight_smile:
#workspace#opinions
177 9886 77
New
PragmaticBookshelf
Data Science

Genetic Algorithms in Elixir
From finance to artificial intelligence, genetic algorithms are a powerful tool with a wide array of applications. But you don't need an ...
#pragprog#ai/elixir#published-book/book-genetic-algorithms-in-elixir
25 5243 6
New
AstonJ
Backend>Questions

Erlang's not installing on macOS Big Sur "You are natively building Erlang/OTP for a later version of MacOSX than current version"
Just done a fresh install of macOS Big Sur and on installing Erlang I am getting: asdf install erlang 23.1.2 Configure failed. checking ...
#macos/erlang#big-sur#asdf
10 6212 8
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
Science/Tech>Health & Diet

David Sinclair's new Lifespan podcast
We’ve talked about his book briefly here but it is quickly becoming obsolete - so he’s decided to create a series of 7 podcasts, the firs...
#health#podcasts#bio-hackers#david-sinclair
87 6790 49
New
PragmaticBookshelf
General Dev>Learning Resources

A Common-Sense Guide to Data Structures and Algorithms in Python, Volume 1
Big O Notation can make your code faster by orders of magnitude. Get the hands-on info you need to master data structures and algorithms ...
pragprog.com
#pragprog/python#published-book/book-a-common-sense-guide-to-data-structures-and-algorithms-in-python-volume-1
24 5988 11
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
General Dev>Learning Resources

Write Better with Vale
Lint your docs like code: turn any style guide into enforceable rules with Vale and publish clear, consistent content every time. ...
pragprog.com
#pragprog#published-book#vale/book-write-better-with-vale
8 9973 5
New
xiji2646-netizen
AI>Chat

Has anyone tried the Karpathy CLAUDE.md rules? (97.8k stars)
There’s a GitHub repo at forrestchang/andrej-karpathy-skills that’s sitting at 97.8k stars. It’s a single CLAUDE.md file with four behavi...
#claude
0 37 1
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