0

Hi, so practicing some web development code and the part im stuck on is when a button is clicked it changes to picture and the caption is supposed to change. However no matter what i try the caption remains the same.
The following is part of the code i have.

function showImage(imageFileName) 
    {
    // get image element
    var theImageElement = document.getElementById("cameraImage");
    // change what image is displayed
    theImageElement.src=imageFileName;      

    if(cameraImage= "Canon_20d.jpg")       
    {
    document.getElementById("imageCaption").innerHTML = "Canon 20d";
    }
    else if(cameraImage= "Fuji_s3Pro.jpg")     
    {
    document.getElementById("imageCaption").innerHTML = "Fuji S3 Pro";
    }
    else if(cameraImage= "Fuji_9500.jpg")      
    {
    document.getElementById("imageCaption").innerHTML = "Fuji 9500";
    }
    else (cameraImage= "sony_r1.jpg")      
    {
    document.getElementById("imageCaption").innerHTML = "Sony r1";
    }
}
    </script>
</head>
<body>
<div id="mainContainer">
    <div id="topSection">
        <h1 style="text-align:center; padding-top:20px">COM301 Recipe 7: Camera e-commerce site</h1>
    </div>
    <div id="contentWrapper">
        <div id="contentLeft">
            <p style="text-align:center">Useful Links</p>
            <br />
            <a href="http://www.google.com">Click here for Google</a>
            <br />
            <a href="http://www.bbc.co.uk">Click here for BBC</a>
            <br />
        </div>       
            <div id="contentRight">
        <div style="float:right; margin-top:5px; margin-right:5px">
        <img id="cameraImage"  src="blank.jpg" /> <br />
        <div style="text-align:center" id="imageCaption"> No Image</div>
</div>
            <?php
                // open a file for reading
                $fp = fopen("cameras.txt", "r");
                if ($fp != FALSE) {
                    // set up the table for structured output
                    echo "<table border='2' width='75%' rows='4'>";
                    echo "<tr><th>Make</th><th>Model</th><th>Price</th><th>Rating</th><th>Stock</th><th>Image</th></tr>";
                    // read the data line by line
                    while (($buffer = fgets($fp)) != FALSE)  {
                        // extract the component parts of the line
                        // remove whitespace
                        $buffer = trim($buffer);

                        $data = explode(',', $buffer);
                        // display the data
                        echo "<tr><td align='center'>$data[0]</td>
                        <td align='center'>$data[1]</td>
                        <td align='center'>$data[2]</td>
                        <td align='center'>$data[3]</td>
                        <td align='center'>$data[4]</td>
                        <td align='center'><input type='button' value='Image' onClick='showImage(\"$data[5]\");'/></td></tr>";  
                    }
                    // close table
                    echo "</table>";
                    // close the file
                    fclose($fp);
                }
            ?>

Anyone any idea how i can get the caption to change that appears beneath the picture. Thanks in advance.

2
Contributors
2
Replies
6
Views
5 Years
Discussion Span
Last Post by laura301019
0

The way you use your condition is wrong. One equal sign means "assign" but two equal sings means "comparison" of 2 values. In your case cameraImage= should be cameraImage==.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.