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

Using JavaScript with Hype
4

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