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：无法设置null的属性'src'

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元素和图像元素）

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

从HTML代码将参数传递给JS函数

4 个答案: