SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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:

    <html>

    <head>

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

    <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 = "<h2>Fabric Code: "+code+" <br/>"+fabricName+" by: "+ designer+"</h2><img src='fabric/"+fabricImage+".JPG' width='200' height='200' alt='Image of AMICB' title='AMICB'/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a class='enlarge' href=\"#\" onclick=\"window.open('fabric/"+code+".htm');\">[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. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,784
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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>\n<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>\n';
    build+='<p class="enlarge" onclick="buildPage(\''+F[i].code+'.htm\')">[enlarge]<\/p>\n';
    }
    // 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>

  4. #4
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •