JavaScript Problem - Help

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:



	&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;link rel="SHORTCUT ICON" href="" /&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=\\"'fabric/"+code+".htm');\\"&gt;[enlarge]";



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

Thanks in advance


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


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.

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.



<style type=“text/css”>
.enlarge { cursor: pointer; }
<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.focus();
// ============= end of buildPage ========================

<body onload=“writePage()”>

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