Inserting url into iframe src from a field on button click

Develop, Build & Integrate CMS Development
,
1

What the title says. Trying to code a custom module so that the 3d viewer module dosen’t load at all until the user clicks on a button.

HTML:

<div id="viewer_btn" class="show3dvbtn">View interactive 3D model</div><div id="viewer_bg" class="viewer_bg viewer_container" style="background-image: url('{{ module.cover_image.src }}');"><iframe id="viewer_ifr" class="viewer" frameborder="0" width="100%" height="720"></iframe></div>

JS:

document.getElementById('viewer_btn').onclick = function(){var vwr = ("{{ module.url_field.href }}");alert(vwr);document.getElementById('viewer_ifr').src=vwr;

“url_field” is just what it sounds like - a URL field with this url in it and the URL type set to external: Viewer

I’m reasonably proficient with HTML and CSS but HUBL and JS im not very familiar with.

Replacing {{ module.url_field.href }} in the JS with Viewer works perfectly, but it needs to come from a field as this module will be on a lot of different pages.

Judging by the alert theres nothing being passed to the “vwr” variable at all.

Thanks

2

Found the solution - not sure if it wasn’t there or I didn’t notice earlier, but just noticed 1 error - HubL in module.js or module.css will not be parsed. So moved the JS to HTML section and all now works.