PDA

View Full Version : Help needed with tables and radio buttons!



Staalkoppie
04-20-2012, 03:16 PM
Hi guys. Noob at Javascrip and html and this is semi-impossible to me currently.

I am working on an assignment where I have 10 image files of 10 different countries. the instruction is to create a page that contains a table with 2 columns in a single row.
In the first column, create a list of radio buttons that contains the names of the 10 countries. In the second column, display the flag of the country selected in an ?anchor? element. I am required to use the "onclick" event handler. I have been battling with this for hours, as this book I'm learning from makes assumptions as to the syntax I understand, without explaining it...

Would someone please be as kind as to set me on the right path. I have included the sorry piece of code I came up with, that I gathered from other sites and tutorials.

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Flags</title>


<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1"/>
</head>
<body>


<script type="text/javascript">

var cuba = "cuba.jpg";
var argentina="argentina.jpg";

</script>



<form name="flagList" action="" method="get">
<p>Click on the country name to view its flag.</p>

<p>
<input type="radio" name="flag" onclick=document.flagList.flagJpg.value=cuba"/>
Cuba<br/>
<input type="radio" name="flag" onclick=document.flagList.flagJpg.value=argentina"/>
Argentina<br/>
</p>

<p>
<textarea name="flagJpg" cols="75" rows="20" style="background-color: blue; border: none; overflow :hidden; font: 10px tohoma; color:#3F3F3F:></textarea>
</P>


</form>
</body>