Img source change depend on chosen option from select

Question

I SOLVE THE PROBLEM. I JUST REMOVED THE VAR iimg AND ADDED INTO THE FUNCTION

document.getElementByID("compareimg1").src = "../images/galaxy_s4.png";

The form tag:

<form>
            <select id="select1" onchange="func1()">
                <option disabled selected value="choose1">
                    CHOOSE
                </option>
                <option value="i2g" id="i2g">
                    iPhone 2g
                </option>
            </select>
        </form>

The table tag:

<table id="comparetable1" class="ib5" border="1">
            <tr>
                <td id="logotd">
                    <img src="../images/logo.png" id="logoimg" />
                </td>
                <td id="compareimg1td">
                    <img id="compareimg1" />
                </td>
                <td id="compareimg2td">
                    <img src="../images/galaxy_s.png" id="compareimg2" />
                </td>
            </tr>
        </table>

And the script:

<script>
            var ip2g = document.getElementById("i2g");
            var iimg = document.getElementById("compareimg1").src;
            function func1(){
                if (ip2g.selected === true){
                    iimg = "../images/galaxy_s4.png";
                }
            }
        </script>

The problem is that when I choose an option from the dropdown menu, it doesn't load an image in the table.

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

The problem is that typeof iimg is string, so updating iimg won't change the image src (only objects are passed by reference).

So you need:

var ip2g = document.getElementById("i2g");
var iimg = document.getElementById("compareimg1");
function func1(){
    if (ip2g.selected === true){
        iimg.src = "../images/galaxy_s4.png";
    }
}

edited May 23 '17 at 11:59

Community

1
1

answered Jan 13 '16 at 13:37

Alexander Mikhalchenko

4,525
3
32
56

score 1 · Answer 2 · answered Jan 13 '16 at 13:41

1

How about comparing the select value and changing src like this?

var iimg = document.getElementById("compareimg1");

function func1(){
    if (document.getElementById("select1").value == "i2g"){
         iimg.src = "../images/galaxy_s4.png";
    }
}

answered Jan 13 '16 at 13:41

Lucas Rodrigues

1,234
2
11
22

Img source change depend on chosen option from select

2 Answers2