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

Popular Pragmatic Bookshelf topics Top

duke_meister
PragProg Customers

The Ray Tracer Challenge - where are the errata?
As per the title, thanks.
/book-the-ray-tracer-challenge
6 1676 4
New
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
jesse050717
PragProg Customers

Web Development with Clojure, Third Edition: Issue adding Shadow CLJS
Title: Web Development with Clojure, Third Edition, pg 116 Hi - I just started chapter 5 and I am stuck on page 116 while trying to star...
#question/book-web-development-with-clojure-third-edition
4 1194 4
New
Alexandr
PragProg Customers

Programming Machine Learning: Incorrect formula
Hi everyone! There is an error on the page 71 in the book “Programming machine learning from coding to depp learning” P. Perrotta. You c...
#errata/book-programming-machine-learning
5 1335 4
New
jeremyhuiskamp
PragProg Customers

Web Development with Clojure, Third Edition (vB17.0): create table syntax invalid
Title: Web Development with Clojure, Third Edition, vB17.0 (p9) The create table guestbook syntax suggested doesn’t seem to be accepted ...
#errata/book-web-development-with-clojure-third-edition
0 1835 1
New
gilesdotcodes
PragProg Customers

Modern CSS with Tailwind: setting up Rails app
In case this helps anyone, I’ve had issues setting up the rails source code. Here were the solutions: In Gemfile, change gem 'rails' t...
#errata/book-modern-css-with-tailwind
3 1276 2
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 3982 1
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 1266 2
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 2623 9
New
redconfetti
PragProg Customers

Docker for Rails Developers - 'docker-machine' command deprecated (page 156)
Docker-Machine became part of the Docker Toolbox, which was deprecated in 2020, long after Docker Desktop supported Docker Engine nativel...
/book-docker-for-rails-developers#suggestion
0 896 0
New

Other popular topics Top

AstonJ
General Dev>Dev Chat

What are you listening to?
A thread that every forum needs! Simply post a link to a track on YouTube (or SoundCloud or Vimeo amongst others!) on a separate line an...
#community#music
202 4935 102
New
AstonJ
Science/Tech>Tech Chat

What are you watching?
Or looking forward to? :nerd_face:
#community
483 11078 254
New
AstonJ
General Dev>Code Editors

SpaceVim vs SpaceMacs
SpaceVim seems to be gaining in features and popularity and I just wondered how it compares with SpaceMacs in 2020 - anyone have any thou...
/vim#spacevim#spacemacs/emacs#code-editors
30 3990 14
New
First poster: bot
Backend>In The News

Bit – A modernized Git CLI written in Go
github.com
/go#git
1 5741 0
New
PragmaticBookshelf
Backend>Learning Resources

Concurrent Data Processing in Elixir
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
pragprog.com
#pragprog/elixir#published-book/book-concurrent-data-processing-in-elixir
78 5131 24
New
AstonJ
General Dev>Dev Chat

Languages Without Garbage Collection
Continuing the discussion from Thinking about learning Crystal, let’s discuss - I was wondering which languages don’t GC - maybe we can c...
#garbage-collection
21 5189 7
New
mafinar
Backend>Chat

Data Structures and Algorithms with Elixir
This is going to be a long an frequently posted thread. While talking to a friend of mine who has taken data structure and algorithm cou...
/elixir#algorithms#data-structures
108 10628 31
New
AstonJ
General Dev>Code Editors

Doom-Emacs: Can't find emacs in your PATH
If you get Can't find emacs in your PATH when trying to install Doom Emacs on your Mac you… just… need to install Emacs first! :lol: bre...
#macos/emacs#doom-emacs
4 5350 0
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 3803 11
New
AstonJ
AI>In The News

DeepSeek (671B) running on a cluster of 8 Mac Mini Pros with 64GB RAM each
This is cool! DEEPSEEK-V3 ON M4 MAC: BLAZING FAST INFERENCE ON APPLE SILICON We just witnessed something incredible: the largest open-s...
#ai#macs/deepseek
0 5576 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.

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!"

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