Jump to content

Javascript input to show a specific image

<!DOCTYPE HTML>
<html>
<body>
<link href="newcss.css" rel="stylesheet" type="text/css" />
<div id="drop">
<p> Birthday </p> 
<select id="mon">
<option name ="month" value = "SELECT"> SELECT </option>                
<option name ="month" value = "JANUARY"> JANUARY </option>
<option name ="month" value = "FEBRUARY"> FEBRUARY </option>
<option name ="month" value = "MARCH"> MARCH </option>
<option name ="month" value = "APRIL"> APRIL </option>
<option name ="month" value = "MAY"> MAY </option>
<option name ="month" value = "JUNE"> JUNE </option>
<option name ="month" value = "JULY "> JULY  </option>
<option name ="month" value = "AUGUST"> AUGUST </option>
<option name ="month" value = "SEPTEMBER"> SEPTEMBER </option>
<option name ="month" value = "OCTOBER"> OCTOBER </option>
<option name ="month" value = "NOVEMBER"> NOVEMBER </option>
<option name ="month" value = "DECEMBER"> DECEMBER </option>
</select>
<select id="da">
<option name = "date" value = "1"> 1 </option>
<option name = "date" value = "2"> 2 </option>
<option name = "date" value = "3"> 3 </option>
<option name = "date" value = "4"> 4 </option>
<option name = "date" value = "5"> 5 </option>
<option name = "date" value = "6"> 6 </option>
<option name = "date" value = "7"> 7 </option>
<option name = "date" value = "8"> 8 </option>
<option name = "date" value = "9"> 9 </option>
<option name = "date" value = "10"> 10 </option>
<option name = "date" value = "11"> 11 </option>
<option name = "date" value = "12"> 12 </option>
<option name = "date" value = "13"> 13 </option>
<option name = "date" value = "14"> 14 </option>
<option name = "date" value = "15"> 15 </option>
<option name = "date" value = "16"> 16 </option>
<option name = "date" value = "17"> 17 </option>
</select>

<select id="ya">
<option name = "year" value = "2000"> 2000 </option>
<option name = "year" value = "2001"> 2001 </option>
<option name = "year" value = "2002"> 2002 </option>
<option name = "year" value = "2003"> 2003 </option>
<option name = "year" value = "2004"> 2004 </option>
<option name = "year" value = "2005"> 2005 </option>
<option name = "year" value = "2006"> 2006 </option>
<option name = "year" value = "2007"> 2007 </option>
<option name = "year" value = "2008"> 2008 </option>
<option name = "year" value = "2009"> 2009 </option>
<option name = "year" value = "2009"> 2010 </option>
</select>
</div>
<div id="dummy">
<button onclick="cmd()">Command</button><br>
</div>
<script>
function cmd(){
var e=document.getElementById("mon");
var temp=e.options[e.selectedIndex].text;
document.write(temp);
var x=temp.elements["month"].value;
document.getElementById("demo").innerHTML=x+"<br>";
}
</script>
<p id="demo">
</p>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

I need to make a java script program to show a specific image when a given month day and year is entered in a specific function,  i want to know is how can i make a configurable and stylable page where in i can show an image like a chinese zodiac , birth stone and birth flower. 

Link to comment
Share on other sites

Link to post
Share on other sites

this is the area that i want to add a background image but i cant seem to put a specific image here, i just made a sample base on the users input , pls help 

linus.png

Link to comment
Share on other sites

Link to post
Share on other sites

First off, If you are going to put that much code straight up in a post, please use the code tags, also a spoiler would be much appreciated. Secondly, this question is very in-depth and is almost impossible to explain without doing it for you. I suggest you follow some tutorials on web development, because this is some pretty basic stuff. A great resource is codecademy.com. To actually answer your question, you should look into using JQuery. JQuery allows you to link your HTML code to your JavaScript, enabling you to use simple switch statements to achieve your goal.

PRO TIP: Do not fully submerge your PC in molasses. 

Link to comment
Share on other sites

Link to post
Share on other sites

Hah, I'm pretty sure codecademy won't solve your issue.

I can write it for you in jQuery, just send me a zip of all files you got.

Link to comment
Share on other sites

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×