使用單選按鈕更改背景顏色

我正在創建一個使用單選按鈕來解決我的問題之一。使用單選按鈕更改背景顏色

我希望單選按鈕改變背景顏色（每個都有不同的值）
例如。按鈕1變爲紅色，而將其更改爲藍色。

的JavaScript

function changeColour() { 
    if("r") 
     document.body.style.backgroundColour="#FF0000"; 
    if("b") 
     document.body.style.backgroundColour="#0000FF"; 
    if("p") 
     document.body.style.backgroundColour="#FF00FF"; 
}

HTML

<div id= "genre"> 
    What do you bust a move to? 
    <form name="music" method="post" action=""> 
     <p> 
     <input type="radio" name="music" value="radio" onBlur="changeColour("b")">Blues 
     <input type="radio" name="music" value="radio" onBlur="changeColour("r")">Rock 
     <input type="radio" name="music" value="radio" onBlur="changeColour("p")">Pop 
    </form> 
</div>

我是新來這個所以任何幫助是值得歡迎的。謝謝。

來源

2013-11-20 user3014211

你很近。我將事件更改爲onclick，而且它的backgroundColor不是Color。下面是一個例子 - http://jsfiddle.net/6jt8h/

<div id= "genre"> 
What do you bust a move to? 
<br> 
<br> 
<form name="music" method="post" action=""> 
<p> 
<input type="radio" name="music" value="radio" onClick="changeColour('b')">Blues 
<br> 
<input type="radio" name="music" value="radio" onClick="changeColour('r')">Rock 
<br> 
<input type="radio" name="music" value="radio" onClick="changeColour('p')">Pop 
<br> 
</form> 
</div> 


function changeColour(value) 
{ 
    var color = document.body.style.backgroundColor; 
    switch(value) 
    { 
     case 'b': 
      color = "#FF0000"; 
     break; 
     case 'r': 
      color = "#0000FF"; 
     break; 
     case 'p': 
      color = "#FF00FF"; 
     break; 
    } 
    document.body.style.backgroundColor = color; 
}

來源

2013-11-20 17:47:06 NaNpx

聲明之間沒有html。卸下<br>
通過在單引號中的值和函數聲明使用它
使用的onclick而不是的onblur
值=「無線電」不是有用
顏色拼寫在美國英語中的JavaScript。您的函數名稱可能拼寫爲changeColur，但backgroundColor必須使用o。這意味着你的HTML將
<input type="radio" name="music" value="radio" onClick="changeColour('b')">Blues
添加標籤，這樣用戶可以在文本中單擊太

它被認爲是很好的做法，包裹在{}所以

function changeColour(val) { 
    var styleBgCol = document.body.style.backgroundColour; 
    if (val=="r") { 
    styleBgCol ="#FF0000"; 
    } 
    else if (val=="b") { 
    styleBgCol="#0000FF"; 
    } 
    else if (val=="p") { 
    styleBgCol="#FF00FF"; 
    } 
}

這裏是我將如何編碼它

Live Demo

<!doctype html> 
<html> 
<head> 
<meta charset="utf.8" /> 
<title>Rock 'n Roll</title> 
<script> 
var cols = { 
    "r":"#FF0000", 
    "b":"#0000FF", 
    "p":"#FF00FF" 
} // no comma after the last 
window.onload=function() { // when the page loads 
    var rads = document.getElementsByName("music"); // all rads named music 
    for (var i=0;i<rads.length;i++) { 
    rads[i].onclick=function() { 
     document.body.style.backgroundColor=cols[this.value]; 
    } 
    } 
} 
</script> 
</head> 
<body> 
<div id= "genre"> 
    What do you bust a move to? 
    <br> 
    <br> 
    <form name="music" method="post" action=""> 
    <input type="radio" name="music" id="bRad" value="b"><label for="bRad">Blues</label> 
    <br> 
    <input type="radio" name="music" id="rRad" value="r"><label for="rRad">Rock</label> 
    <br> 
    <input type="radio" name="music" id="pRad" value="p"><label for="pRad">Pop</label> 
    <br> 
    <br> 
    </form> 
</div> 
</body> 
</html>

來源

2013-11-20 17:29:53 mplungjan

應該是這樣的：

<form name="music" method="post" action=""> 
<p> 
<input type="radio" name="music" value="radio" onBlur="changeColour('b');">Blues 
<br> 
<input type="radio" name="music" value="radio" onBlur="changeColour('r');">Rock 
<br> 
<input type="radio" name="music" value="radio" onBlur="changeColour('p');">Pop 
<br> 
</form> 


function changeColour(color) { 
    if(color=="r"){ 
    document.body.style.backgroundColour="#FF0000"; 
    }else if(color=="b"){ 
    document.body.style.backgroundColour="#0000FF"; 
    }else if(color=="p"){ 
    document.body.style.backgroundColour="#FF00FF"; 
    } 
}

來源

2013-11-20 17:31:29

拼寫錯誤的屬性 – mplungjan

我強烈建議從你的HTML刪除你的JavaScript，並使用JavaScript綁定的事件處理（這使得更容易維護的代碼，因爲你不必通過HTML尋找更新/改變任何東西;它應該全部位於您實現的JavaScript文件/庫中）。這就是說，我建議以下HTML：

<div id="genre">What do you bust a move to? 
    <form name="music" method="post" action="#"> 
     <input type="radio" name="music" value="radio"/>Blues 
     <input type="radio" name="music" value="radio" />Rock 
     <input type="radio" name="music" value="radio" />Pop</form> 
</div>

用下面的JavaScript：

function changeColour (e) { 
    // e.target is the element that triggered the event we're reacting to: 
    var el = e.target; 
    /* el.nextSibling.nodeValue is the text of the next sibling-node, 
     toLowerCase() turns that text into lower-case, 
     [0] gets the first letter of that text: 
    */ 
    switch (el.nextSibling.nodeValue.toLowerCase()[0]) { 
     case 'b' : 
      // 'this' is the element that's handling the event (the div): 
      this.style.backgroundColor = '#00f'; 
      break; 
     case 'r' : 
      this.style.backgroundColor = '#f00'; 
      break; 
     case 'p' : 
      this.style.backgroundColor = '#f0f'; 
      break; 
    } 
} 

/* gets the element with the id of 'genre', and adds a listener to that 
    element, listening for the change event, and triggering the 'changeColour' 
    function when it's detected: 
*/ 
document.getElementById('genre').addEventListener('change', changeColour, true);

JS Fiddle demo。

此外，我建議包裹input元素與label元素，以便點擊label（文本本身）能夠檢查相關input該文本：

<div id="genre">What do you bust a move to? 
    <form name="music" method="post" action="#"> 
     <label> 
      <input type="radio" name="music" value="radio" />Blues</label> 
     <label> 
      <input type="radio" name="music" value="radio" />Rock</label> 
     <label> 
      <input type="radio" name="music" value="radio" />Pop</label> 
    </form> 
</div>

JS Fiddle demo。

它也可以使用JavaScript對象的選擇顏色，關聯例如：

function changeColour(e) { 
    // sets the letter-colour options: 
    var colorMap = { 
     'b' : '#00f', 
     'r' : '#f00', 
     'p' : '#fof' 
    }; 
    var el = e.target, 
     checked = el.nextSibling.nodeValue.toLowerCase()[0]; 
    /* if the relevant letter is in the colorMap object 
     (and generates a truthy value), we set the background-color 
     to whatever is retrieved: 
    */ 
    if (colorMap[checked]){ 
     this.style.backgroundColor = colorMap[checked]; 
    } 
} 

document.getElementById('genre').addEventListener('change', changeColour, true);

JS Fiddle demo。

來源

2013-11-20 17:45:52

認真嗎？在noob上放置nodeValues，兄弟和事件監聽器？雖然我對onload和object的使用已經很好，但是我發現你已經超越了頂層。請告訴我evenListener和nextSibling.nodeValue的附加值超過了我的可讀性更強的腳本嗎？ – mplungjan

'附加值'？這是有爭議的，我選擇了這種方法，因爲這樣我可以避免重複你的方法並提供一個替代方案。此外，我不喜歡使用'onload'，'onclick'等，雖然再次：個人選擇。而且，說實話，我並不認爲這是一個複雜的答案。 –

好吧，夠公平的。我從不使用addEventListener，因爲它不兼容跨瀏覽器，我從不需要添加多個瀏覽器。如果我需要這樣的複雜性，我使用jQuery。至於nodeValues，我自己必須閱讀兩遍才能看到你的意思，而我昨天也沒有開始寫JS;） – mplungjan

使用單選按鈕更改背景顏色

回答

相關問題