使用JavaScript中的單選按鈕更改圖像
[英]Change image with radio buttons in javascript
問題描述
我一直在尋找一些時間來找到一種方法來更改網頁中的圖像，具體取決於選擇了表單中的哪個單選按鈕，而我嘗試過的每種方法均未成功。 我假設必須有一個相對簡單的方法來執行此操作，因為這並不是一個令人難以置信的復雜更改，但是我對javascript很陌生，所以我可能做錯了什么。 （這是我第一次使用StackOverflow，所以如果我問一個愚蠢的問題，我深表歉意）
這是我的Javascript函數
function changeCardLogo() {
switch(document.test.creditCard.value){
case "Visa":
document.getElementById("cardLogo").innerHTML= "<img height=75 src='Graphics/visaLogo.svg'>";
break;
case "MasterCard":
document.getElememtById("cardLogo").innerHTML= "<img height=75 src='Graphics/masterCardLogo.png'>";
break;
case "PayPal":
document.getElementById("cardLogo").innerHTML= "<img height=75 src='Graphics/paypalLogo.jpg'>";
break;
}
}
我的單選按鈕
<p><b>Payment Method</b><br>
<input type="radio" name="creditCard" value="Visa" checked onClick="changeCardLogo()"> Visa <br>
<input type="radio" name="creditCard" value="MasterCard" onClick="changeCardLogo()"> MasterCard <br>
<input type="radio" name="creditCard" value="PayPal" onClick="changeCardLogo()"> PayPal <br></p>
*注意：單選按鈕位於名為“ form1”的表單中，但是由於某些原因，當我包含標簽時，代碼無法正確顯示
我的圖像在這個div內發生了變化
<div id="cardLogo" height=75></div>
任何人都可以提供的任何幫助將不勝感激！
4 個解決方案
解決方案1
2 2014-10-13 18:24:09
您有一些錯誤。 首先，要獲取表單數據值，您需要使用：
document.forms["form1"].creditCard.value
而不是（當您的表單名稱為form1時為什么要調用“測試”屬性？）
document.test.creditCard.value
其次，要通過ID獲取節點，正確的函數名稱是getElementById（看一下MasterCard的情況）。
解決方案2
1 2014-10-13 18:40:38
Le的意思是您擁有此form並且在表示圖像名稱的單選按鈕上設置了data-*屬性：
<form name="myForm">
<p><b>Payment Method</b><br>
<input data-img="visaLogo.svg" type="radio" name="creditCard" value="Visa" checked> Visa <br>
<input data-img="masterCardLogo.png" type="radio" name="creditCard" value="MasterCard"> MasterCard <br>
<input data-img="paypalLogo.jpg" type="radio" name="creditCard" value="PayPal"> PayPal <br></p>
<div id="cardLogo" height=75></div>
</form>
比您可能會使用的類似： http ： //jsfiddle.net/axnrtosa/2/
var cards = document.myForm.creditCard;
var logo = document.getElementById("cardLogo");
var event = new Event('change');
for(var i=0; i<cards.length; i++)
cards[i].addEventListener('change', changeCardLogo, false);
cards[0].dispatchEvent(event); // Trigger change
function changeCardLogo() {
var img = document.createElement('img');
img.src= "Graphics/"+ this.dataset.img;
logo.innerHTML = ""; // Remove old image
logo.appendChild( img ); // Append new image
}
解決方案3
1 2014-10-13 18:54:38
有很多方法可以得到想要的東西，另一種方法是：
<html>
<script>
function changeImg(value){
var img = document.getElementById("img");
switch(value){
case "mastercard": img.src="MasterCard.jpg";break;
case "visa": img.src="Visa.jpg";break;
case "paypal": img.src="PayPal.jpg";break;
default: return false;
}
}
</script>
<body>
<img src="MasterCard.jpg" id="img"/>
MasterCard: <input type="radio" name="card" value="mastercard" checked onclick="changeImg(this.value)"/>
visa: <input type="radio" name="card" value="visa" onclick="changeImg(this.value)"/>
paypal: <input type="radio" name="card" value="paypal" onclick="changeImg(this.value)" onclick="changeImg(this.value)"/>
</body>
</html>
解決方案4
0 2014-10-13 18:47:02
找不到元素（及其值）“ document.test.creditCard.value”。
您必須通過Thibault Bach編寫的方式來訪問它，或者可以在函數調用中將單選按鈕的值作為參數傳遞，如下所示：
<p><b>Payment Method</b><br>
<input type="radio" name="creditCard" value="Visa" checked onClick="changeCardLogo(this.value)"> Visa <br>
<input type="radio" name="creditCard" value="MasterCard" onClick="changeCardLogo(this.value)"> MasterCard <br>
<input type="radio" name="creditCard" value="PayPal" onClick="changeCardLogo(this.value)"> PayPal <br></p>
<div id="cardLogo" height="75"></div>
<script>
function changeCardLogo(v) {
var target = document.getElementById("cardLogo");
switch(v){
case "Visa":
target.innerHTML= "<img height=75 src='Graphics/visaLogo.svg'>";
break;
case "MasterCard":
target.innerHTML= "<img height=75 src='Graphics/mastercardLogo.png'>";
break;
case "PayPal":
target.innerHTML= "<img height=75 src='Graphics/paypalLogo.jpg'>";
break;
}
}
</script>
Javascript / Jquery Change選擇列表到Radio Buttons
[英]Javascript/Jquery Change Select list to Radio Buttons
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.