otuv

otuv

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?

Showing Posts 1 to 7

zimt28

zimt28

The easiest way might be to define your function on window - window.onClick = function .... Not the best solution, but should do the job.

peerreynders

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.

Modern JavaScript Explained For Dinosaurs

dimitarvp

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

In the past 8 months I’ve spammed a link to that article 6 times (including this one).

peerreynders

peerreynders

Maybe put this one on your play queue: A Framework Author’s Case Against Frameworks

otuv

otuv OP

I’m sure it will. I was just a bit vauge as to what the question was. I got it to work the other way around but I wanted to find out why it did not work.

otuv

otuv OP

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.

— All posts loaded —

Where Next? Top

Trending in Questions Top

stjefim
Hello! Suppose you are building workflow (order / task / payment) processing system with the following requirements: Each workflow con...
New
Blokh
Hey guys, I’ve got a huge CSV ( around 10 GB ) that needs to be processed hourly Do you guys have any suggestions what is the best prac...
New
kszambelanczyk
Hello! Could someone please give me a help/sample code, how to delete a file from s3 using waffle/waffle_ecto from Phoenix app. I creat...
New
Onor.io
I have what I’ve heard referred to as a “lookup table” in my database. This is a way of assigning codes to common values. One common lo...
New
jaybe78
Hello, I’m developing a online persistent chat system (what’s app) like using elixir/dynamodb/aws for a mobile app(flutter). The diffic...
New
Trolleger
What approach to take when sending live updates to “random” users Hi! I have a question, I have a little chat app, and when I create a DM...
New
widianto
I think I’ve found a small improvement I could contribute to &lt;%= web_namespace %&gt;.CoreComponents (installer/templates/phx_web/compo...
New

Other Trending Topics Top

garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
mcass19
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
wintermeyer
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
New
webofbits
Aludel - LLM Evaluation Workbench Aludel is an embeddable Phoenix LiveView dashboard for evaluating and comparing LLM prompts across mult...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews