通过HTML代码将参数传递给JS函数

Question

我有一个选择列表，当选择一个选项时，该列表应更改图像。 我有以下代码：

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

然后在我的.ps文件中，我有这个：

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;
    }
}

但我不断

未捕获的TypeError：无法将属性'src'设置为null

image参数告诉函数要更改的图像。 还有其他图像可能会更改。

如何正确传递参数？

谢谢！

Answer 1

使用document.getElementById在change函数中获取图像元素

<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

在onchange分配中，您必须指定img元素的id值，即一个字符串。 因此，您必须引用以下参数：

<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

更加通用的js函数将像这样（您可以指定select元素和image元素）

<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;
    }
}