Passing parameters to a JS function from HTML code

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

Use document.getElementById to get image element in your change function

<select id="p1_choise" onchange="change()">
  <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>

JS:

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

Answer 2

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>

Answer 3

A more generic js function will be like this (you can specify the select element and the image element)

<select id="p1_choise" onchange="change(this,document.getElementById('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>

<script>
function change(options,imageElement) {
    var icon = options.value;
    switch (parseInt(icon)) {
        case 1: imageElement.src="rock.jpg"; break;
        case 2: imageElement.src="paper.jpg"; break;
        case 3: imageElement.src="scissors.jpg"; break;
    }
}
</script>

Answer 4

<select id="p1_choise" onchange="change(this)">
  <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>

function change(this) {
    var icon = this.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;
    }
}