將參數從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函數

回答

相關問題