Question

I have s select list that should change an image when an option is selected. I have the following code:

<select id="p1_choise" onchange="change(image)">
  <option value=0>Choose</option>
  <option value=1>Rock</option>
  <option value=2>Paper</option>
  <option value=3>Scissors</option>
</select>

<p><img src="rps.jpg" id="image"></p>

And then in my .ps file I have this:

function change(image) {
    var icon = document.getElementById("p1_choise").value;
    switch (parseInt(icon)) {
        case 1: document.getElementById(image).src="rock.jpg"; break;
        case 2: document.getElementById(image).src="paper.jpg"; break;
        case 3: document.getElementById(image).src="scissors.jpg"; break;
    }
}

But I keep getting

Uncaught TypeError: Cannot set property ‘src’ of null

The image parameter tells the function what image to change. There are other images that might be changed.

How do I pass a parameter correctly?

Thanks!

Answer 1

In the onchange assignment, you have to specify the id value of the img element, that is a string. So you have to quote the argument:

<select id="p1_choise" onchange="change('image')">
  <option value=0>Choose</option>
  <option value=1>Rock</option>
  <option value=2>Paper</option>
  <option value=3>Scissors</option>
</select>