0

Multiple drop down lists, how to target iframe with jpeg.

Once I have chosen the multiple options, I want target an iframe within the page with a jpeg. This jpeg will be different depending on the chosen answers. I hope that makes sense. I have the drop down lists, and the iframe set up, but I don't know how to use java well enough. Do I use the submit button to somehow trigger a function in javascript? if so how? I am very new to this, I may be way off. :)

3rd Mar 2017, 6:49 AM
Carl Moore
7 Respostas
+ 4
Check the link below: I have just a little improve what I suggested, to make you an example... It's not very hard, you have to handle only few things. You will necessarly success ;) And you can easily add some functionnalities, styling enhancement progressively ^^ https://code.sololearn.com/WY02MBh5davY/#html
3rd Mar 2017, 2:57 PM
visph
visph - avatar
+ 4
Paste ( and study ;) ) this code in the JS tab ( or somewhere linked to your html ): window.addEventListener('load', function main() { var selects = document.getElementsByTagName('select'); var iframe = document.getElementsByTagName('iframe')[0]; iframe = iframe.contentWindow.document || iframe.contentWindow; var i = selects.length; while (i--) selects[i].addEventListener('change',refresh); function refresh() { var i = selects.length; var r = {}; while (i--) r[selects[i].id] = selects[i][selects[i].selectedIndex].value; log(r); } function log(o) { var s = []; for (var k in o) s.push(k+': '+o[k]); s = '{ '+s.join(', ')+' }'; iframe.write(s); // console.log(s); } }); Feel free to ask for some explanation ^^
3rd Mar 2017, 6:04 PM
visph
visph - avatar
+ 3
Using <iframe> for that purpose is too much heavy for nothing ^^ Just target an <img> element instead, or even whatever element styled with a css background image... <select onchange="setimg(this);"> <option value="image.url">image 1</option> <option value="image.url">image 1</option> <option value="image.url">image 1</option> </select> <img id="out"> function setimg(o) { document.getElementById("out").src = o.options[o.selectedIndex].value; } [ edit ] For the second way, through css, you need to target the style property of element, whatever with inlined css ( 'style' property ), or using classes facilities, by using the 'className' property... each with its correct syntax rules applied, obviously :P
3rd Mar 2017, 1:48 PM
visph
visph - avatar
+ 1
Thank you visph. I will have to play around with that code, to get exactly what you mean, but I appreciate your help. I am seriously addicted to this coding, I only wanted to show the kids that it could be done by anyone, now I have been up for days. I should have started with something easier. lol
3rd Mar 2017, 2:30 PM
Carl Moore
0
Hi visph, thank you for your response. I understand what you mean now. What I had in mind was similar, but with more options before load in the image. I have had a go at doing it myself, with your help, but have no idea how I can link all the options to one image when I press ok, have a look at my attempt and you will see what I mean hopefully. https://code.sololearn.com/W8Bn1loWFHV7/#html
3rd Mar 2017, 5:23 PM
Carl Moore
0
Holy-Macaroni, ok. That might take some studying, but I will give it a go. I will be in touch. :) Thank you visph.
3rd Mar 2017, 6:29 PM
Carl Moore
0
Hi visph I will have to come back to this project when I know more js, it is really confusing me. Thanks for your help.
4th Mar 2017, 12:13 AM
Carl Moore