otuv
Access function in app.js
Hi,
I try to do a rather simple js interaction but fail.
In my html (index.html.eex) I got
<button onclick="doClick()">Click me!<button>
and in my app.js I got the corresponding function
function doClick() { console.log('did it') }
But I get
ReferenceError: doClick is not defined
Do I explicitly make it available somehow?
Marked As Solved
peerreynders
<button id="myBtn">Click me!<button>
// somewhere in the top level of app.js
const btn = document.getElementById('myBtn');
btn.addEventListener('click', doClick, false);
MDN: EventTarget.addEventListener
Phoenix uses a bundler (Phoenix < 1.4 ? Brunch : webpack 4). This deliberately keeps everything out of the global space so the markup can’t find that function. Meanwhile JavaScript has no problem reaching into the DOM.
Also Liked
dimitarvp
That article was legit the first useful JS post I’ve read in years. Finished it five days ago and most of what I didn’t understand was suddenly clear.
The ecosystem is still frustrating and dysfunctional – it’s JS after all – but at least it makes sense in its own way. And I now know what to reach for and when.
peerreynders
peerreynders
Last Post!
otuv
I expected something like this and there it is.
It does explain the huge jump from w3school’s Hello World to (virtualy) anything in production. Thank you.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Courses that'll move you from confusion to "Aha, now I get it!"
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"