JavaScript Problem - Help

JavaScript
1

Hi Guys,

I am making a website for my boss using PHP and Javascript. I have limited knowledge in this field and I am badly stuck at one place. I have been using javascript functions to print some details and I have put 3 functions together in one if loop. I don’t know what the problem is but only one information is getting printed. So either only the last function is being called in the if loop, or the output from all 3 (same) functions in ‘if loop’ is getting printed over one another:

Following is the code:

<html>

<head>

	&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
	&lt;meta name="description" content="Fabric Collections of M&S Textiles, Australia" /&gt;
	&lt;title&gt;Collections&lt;/title&gt;
	&lt;link rel="SHORTCUT ICON" href="http://www.mstexaustralia.com/mns.ico" /&gt;

<Script language=“JavaScript”>
function changeFabric()
{
var fabric=document.form1.selectFabric.value;
if(fabric == “Amicitia”)
{
showFabric(“AMICB”,“Amicitia”,“A Napanangka”,“amicitiablack”);
showFabric(“AMICE”,“Amicitia”,“A Napanangka”,“amicitiaecru”);
showFabric(“AMIC-B”,“Amicitia”,“A Napanangka”,“amicitiaburg”);
}
}

function showFabric(code,fabricName,designer,fabricImage,space)
{
	var divText = document.getElementById("div1");
    	div1.innerHTML = "&lt;h2&gt;Fabric Code: "+code+" &lt;br/&gt;"+fabricName+" by: "+ designer+"&lt;/h2&gt;&lt;img src='fabric/"+fabricImage+".JPG' width='200' height='200' alt='Image of AMICB' title='AMICB'/&gt;&lt;br/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a class='enlarge' href=\\"#\\" onclick=\\"window.open('fabric/"+code+".htm');\\"&gt;[enlarge]";
}

</Script>

</head>

Can anyone please tell me what is wrong and why only one information is being printed instead of 3?

Thanks in advance

Cheers,
Sam

2

Hi felgall and AllanP,

Thanks a lot for your help guys. I will try out both the solutions and see which one works.

Thanks Again

Sam

3

All three are being shown in the same field ne after the other.

The line in the showFabric function commencing with div1.innerHTML = is overwriting that div’s content with the new infor each time the function is called.

If you add a + before that = is should then add the new info to the end of what is already there instead of overwriting it.

4

I think this is doing what you want. You will need to provide the img files and the .htm pages to make it all work. I have tested it in all major browsers.

<html>

<head>

<style type=“text/css”>
<!–
.enlarge { cursor: pointer; }
–>
</style>
<script type=“text/JavaScript”>
<!–
var F=new Array();
F[0]={code:“AMICB”,fabricName:“Amicitia”,designer:“A Napanangka”,f_img:“amicitiablack” }
F[1]={code:“AMICE”,fabricName:“Amicitia”,designer:“A Napanangka”,f_img:“amicitiaecru” }
F[2]={code:“AMIC-B”,fabricName:“Amicitia”,designer:“A Napanangka”,f_img:“amicitiaburg” }
// --------------------------------
function writePage()
{ var build=“”;
for(var i=0;i<F.length;i++)
{ build+=‘<h3>Fabric Code: ‘+F[i].code+’<br\/>’+F[i].fabricName+’ ‘;
build+=‘by: ‘+ F[i].designer+’<\/h3>
<p><img src="fabric/’+F[i].f_img+’.jpg" ‘;
build+=‘alt=“Image of ‘+F[i].code+’” title="’+F[i].code+’" width=“100” height=“100”><\/p>
‘;
build+=’<p class=“enlarge” onclick=“buildPage(\‘’+F[i].code+‘.htm\’)”>[enlarge]<\/p>
';
}
// write to page div
var divObj = document.getElementById(“div1”);
divObj.innerHTML = build
}
// ============== end of writePage ======================
var newWindow=null; // global
// open window and run webpage
function buildPage(pgRef)
{ // check to see if it already exists
if(!newWindow || newWindow.closed)
{ newWindow=window.open(pgRef,“xx”,“status=1,height=300,width=300”);
}
else
{ newWindow.focus();
}
}
// ============= end of buildPage ========================
//–>
</script>
</head>

<body onload=“writePage()”>

<div id=“div1”>
</div>
<!-- end div1 –>

</body>

</html>