
I'm getting into client-side scripting using javascript.
I am attempting to build a football team fixture application. The user would able to enter the number and name of the teams and then applicaion would generate a fixture list. I was knocking about using DOM techniques but with minimal success. I used a nested for loop for generating the fixture list but it's not would I'd like. I would like to generate the fixtures on a weekly basis.
I've included code for anyone to view and offer advice.
The following code is the HTML page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/footballTemp.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Star Football</title>
<script language="javascript" type="text/javascript" src="selectTeamNo.js">
</script>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="logo">
<img src="images/starfootball.png" alt="starFootballlogo" width="453" height="105" />
</div>
<div id="menu"><a href="home.html">Home</a> | <a href="sponsorship.html">Sponsorship</a> | <a href="news.html">News</a> | <a href="weather.html">Weather</a><a href="#"></a> | <a href="blogger.html">Blogger</a> | </div>
<div id="content"><!-- InstanceBeginEditable name="content" -->
<div id = "heading">Star Football League</div><br /><br />
<div id = form1> <form name="form1">
<table width="380">
<tr>
<td colspan="2" align="left"><b>Input Team</b>
<b> :</b>
<td width="276">
<input type="text" name="name"/> </tr>
<tr>
<td width="82" align="right">
<td width="33">
<td width="276"> </tr>
<tr>
<td width="82" align="right">
<td width="33">
<td width="276">
<input type="button" Value="Submit Team"
onclick="insert(this.form.name.value),show();"/>
<input type="button" Value="Fixtures"
onclick="insert(this.form.name.value),show2();"/>
</tr>
</table>
</form>
</div>
<table width="561" height="62" border="2" bordercolor="#FFFFFF">
<tr><td width="181" height="54" align="left" valign="top"> <div id="myDiv"></div></td>
<td width="169"><div id="myDiv2"></div></td></tr></table>
<!-- InstanceEndEditable --></div>
<div id="footer">Copyright 2010 starfootball.com</div>
</body>
<!-- InstanceEnd --></html>
**//This is the javascript code I used from an external file**
var array = new Array();
//Create new method/fuction
function insert(val){
array[array.length]=val;
}
function show() {
var string="<b>These are the chosen teams :</b><br>";
j = 8
for(i = 0; i < 8; i++) {
string =string+array[i]+"<br>";
}
if(array.length > 0)
document.getElementById('myDiv').innerHTML = string ;
}
var hometeam = new Array();
var awayteam = new Array();
function show2()
{
var string
hometeam = array
awayteam = array
var string2="<tr><td><b>Fixtures :</b><br></td></tr>";
for(i = 0; i < 8; i++) {
for(j = 1+i; j < 8; j++) {
string2 =string2+hometeam[i]+" vs " +hometeam[j]+" "+"<br>";
}
}
if(hometeam.length > 0)
document.getElementById('myDiv2').innerHTML = string2 ;
}
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.