Generate HTML based on User Input Javascript

Question

Here is my problem, I need to create a javascript function that takes 2 variables that the user has chosen, and choose what images to produce in 20 divs based on those variables.

I've been trying to figure this out for several days but have gotten no where.

so vars are: year, quarter

images are named by region and the divs are pre-set. so an image would be "regionone_2005_q1.png"

So what I'm looking for is advice on how to solve this issue. I need the browser not to load the image unless it's been asked for based on the user input. I can't use "hide" because it still loads the image and I can't swap out the image based on the code.

I am having trouble finding any tutorials on using javascript variables within html. The catch for this program is that I HAVE to use server side scripting.

Don't provide a value for the src attribute of the images, and they wont load. Then set the src attribute in your function. The browser will then download the image and display it. — Chad
– Chad, Commented Dec 22, 2011 at 16:57
Sorry for the delay, just got back from lunch.I've had very little experience in AJAX to date, but will most likely be using that in later versions. @Usman solved it! — Phil Royer
– Phil Royer, Commented Dec 22, 2011 at 19:05

Muhammad Usman · Accepted Answer · 2011-12-22 17:09:32Z

1

Live Demo: http://jsfiddle.net/LvsJH/

HTML

<img id="myimage" src="#" />

JavaScript

myimage = document.getElementById('myimage');
//I have added a Google image, use your desired image here
myimage.setAttribute('src','http://www.google.com.bd/images/nav_logo99.png');

Put the JS on certain event or after the DOM is ready.

answered Dec 22, 2011 at 17:09

Muhammad Usman

12.5k6 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Generate HTML based on User Input Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related