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

但我不断得到

未捕获的类型错误：无法将属性“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;
    }
}