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

我有选择列表，当选择一个选项时应该更改图像。我有以下代码：将参数从HTML代码传递给JS函数

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

但我不断收到

Uncaught TypeError: Cannot set property 'src' of null

的图像参数告诉函数什么形象改变。还有其他图像可能会更改。

如何正确传递参数？

谢谢！

来源

2012-11-07 Yotam

由于select有一个id，所以可以分开JavaScript和HTML。 – Bakudan

请像这样改变value =“0”。 – sunleo

“onchange =”变化（图像）“'中的图像变量代表什么？它是页面上'img'元素的'id'吗？另外，它是可变的 - 我的意思是有超过1个图像，你想改变'src'的？ – andyb

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

来源

2012-11-07 11:42:10

请发表您的评论，除了你downvotes。 –

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

来源

2012-11-07 11:36:01 Anoop

等待，但是当你调用函数时，你没有传递任何东西...... – Yotam

你不需要传递任何东西。 – Anoop

@Sushil：随着你提到的改变，你需要做'情况1：image.src =“..”'，否则你会得到同样的错误。 – richardtz

-1

一个更通用的js函数将是这样的（你可以指定选择元素和图像元素）

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

来源

2012-11-07 11:37:10 richardtz

该参数告诉功能什么图像改变... – Yotam

已更新，让您可以指定图像和选择元素作为参数 – richardtz

为什么downvote ?,请评论为什么，而不是只是downvote它。 – richardtz

-1

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

来源

2012-11-07 11:39:52

对不起，我不清楚。该参数告诉函数什么图像改变，而不是选择什么.... – Yotam

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

回答

相关问题