TOTAL NOOB Q: How do I send the ID/Class/Attribute of the item that calls a function to the function?

Sorry if this question is offensively simple, but I don’t know much (read: anything) about Javascript and have up until this point relied mostly on HYPE’s ui functionality to create the (simple) bits and bobs that I’ve been creating with it. However I’m in a situation where the project I’m trying to make requires that little bit more than I’m capable of doing without dipping my toe into some scripting.

I’m also sorry if this is the sort of thing that is asked commonly, but I don’t really know what language to use and therefore have exhausted my Google-fu without any luck.

I’d like to create a function that allows me to use the ID, Class, or even an additional HTML Attribute Value of a button, and then have that button call the script (to load content into an iFrame) and I’d like to be able to reuse the same script for many buttons, each loading a different URL - so, like, I’d like to store the URL (or at least the slug) ‘in’ the button and pass that info to the script to use.

I’ve read MANY of the threads here, and I can’t tell if everyone is so incredibly far ahead of me that it seems like they’re using shorthand for things that I don’t know yet, or if I’m just completely illiterate when it comes to the logic being employed here? Either way, any assistance that could be give would be greatly appreciated.

Progress is a ladder. No one is ahead. We all start somewhere, Elroy.

Just try to be more specific in your question and button_function you need, Elroy and the community will point you in the right direction with examples and hype files. These are door openers.

1 Like

Thanks mate,

I’d like to be able to create a button (or just an element) that when the user click it that button calls the function that loads content into an iframe (I’ve got that bit figured out), but I don’t want to have to create a new function for every button, so I’d like to create a function that when called by any button gets the (for arguments sake, lets say ID) of the button that was pressed, and from that loads the iframe with http://domain/buttonID

So, I can assign each button an ID that corresponds to the URL slug (the last part of the url of a Wordpress page).

I’m sorry if this isn’t making sense.

Put the following into a button handler and define data-url. This will set the first iFrame in your scene. Optionally you can also set data-selector to target a specific iFrame in your scene.

/* button element is passed into this call, see signature ontop */
var btnElm = element;

/* get scene current scene element */
var sceneElm = document.querySelector('#'+hypeDocument.documentId()+' > .HYPE_scene[style*="block"]');

/* get first iframe in scene or if provided by selector */
var selector = (btnElm.dataset.selector) ? btnElm.dataset.selector : 'iframe';
var iframeElm = sceneElm.querySelector(selector);

/* set src on iframe based on dataset */
iframeElm.setAttribute ('src', btnElm.dataset.url);

Here is an example file:

Download:
SetFrameSrcWithButtonDatasetExample.hype.zip

Demo:
SetFrameSrcWithButtonDatasetExample.html

Hope this helps!


Update eleven month later (for future reference):
Since this was published there is a more efficient way to get the scene element:

var sceneElm = document.getElementById(hypeDocument.currentSceneId());
3 Likes

Dude! That’s perfect! Thank you so much. I’ll spend some time tomorrow pulling it apart and putting it back together (which is usually how learn how things work).

Thank you so much for taking the time to put this together.

1 Like

Another dataset tutorial - Thank You Max! :pray:

2 Likes