如何使單選按鈕在JavaScript中工作？

Question

我正在學習JavaScript的基礎知識，但仍然弄錯了一些基礎知識，並試圖使其工作，但失敗。我試圖在選中某個單選按鈕時使消息更改字體重量。的jsfiddle：http://jsfiddle.net/Eg87P/

HTML/JavaScript代碼：

<div id="prob2"> 
    <h1>Radio Buttons</h1> 
    <p id="msg">Message</p> 
    <input type="radio" value="bold" name="rdFontStyle" id="bold"/>Bold<br/> 
    <input type="radio" value="italic" name="rdFontStyle" id="italic"/>Italic<br/> 
    <input type="radio" value="underline" name="rdFontStyle" id="underline"/>Underline<br/> 
    <input type="radio" value="regular" name="rdFontStyle" id="regular"/>Regular<br/> 
    <script type="text/javascript"> 

    function msg1 
    { 
     var msg = document.getElementById("msg"); 

     if(document.getElementById("bold").checked) 
     {  
      if(msg.hasAttribute("style")) 
      { 
       msg.removeAttribute("style"); 
      } 
      msg.style.fontWeight = "bold"; 
     } 
     else if(document.getElementById("italic").checked) 
     { 
      if(msg.hasAttribute("style")) 
      { 
       msg.removeAttribute("style"); 
      } 
      msg.style.fontWeight = "italic"; 
     } 
     else if(document.getElementById("underline").checked) 
     { 
      if(msg.hasAttribute("style")) 
      { 
       msg.removeAttribute("style"); 
      } 
      msg.style.fontWeight = "underline"; 
     } 
     else if(document.getElementById("regular").checked) 
     { 
      if(msg.hasAttribute("style")) 
      { 
       msg.removeAttribute("style"); 
      } 
      msg.style.fontWeight = "normal"; 
     } 
    } 
    msg1(); 
    </script> 
</div> 

Answer 1

打開JavaScript控制檯並閱讀錯誤消息：

Uncaught SyntaxError: Unexpected token {

function msg1應該function msg1()

---

when one of the radio button is checked

如果您想對正在檢查的單選按鈕作出反應，那麼在運行函數之前，您需要針對事件listen。目前你正在運行它。

document.getElementById('prob2').addEventListener('change', msg1); 

---

msg.style.fontWeight = "italic"; 

斜體不是字體重量。這是一種字體風格。

msg.style.fontStyle = "italic"; 

---

msg.style.fontWeight = "underline"; 

下劃線不是字體重量。這是一種文字裝飾。

msg.style.textDecoration = "underline"; 

---

msg.style.fontWeight = "normal"; 

一般是字體重量，但它沒有什麼意義，明確在這裏，因爲它是默認的，你只是刪除了其他風格設置。

Answer 2

當用戶單擊單選按鈕時，您沒有運行msg1（）函數，只在腳本加載時執行一次。
在調用msg1（）的每個單選按鈕上添加一個onClick;
和您的函數定義如前所述。

Answer 3

var msg = document.getElementById("msg"); 

document.getElementById("bold").addEventListener("change", function() { 
     if (msg.hasAttribute("style")) { 
      msg.removeAttribute("style"); 
     } 

     msg.style.fontWeight = "bold"; 
}) 

Answer 4

您從不會在單選按鈕的更改上調用javascript函數。我建議增加以下內容：

<input type="radio" value="bold" name="rdFontStyle" id="bold" onchange="msg1()"/>Bold<br/> 
<input type="radio" value="italic" name="rdFontStyle" id="italic" onchange="msg1()"/>Italic<br/> 
<input type="radio" value="underline" name="rdFontStyle" id="underline" onchange="msg1()"/>Underline<br/> 
<input type="radio" value="regular" name="rdFontStyle" id="regular" onchange="msg1()"/>Regular<br/> 

給一個嘗試，看看會發生什麼=）

編輯：您還需要你的函數的聲明後添加()：

function msg1() 
{ 
... 
} 

而且，你應該使用正確的樣式屬性。以下工作：

<script type="text/javascript"> 

function msg1() 
{ 
    var msg = document.getElementById("msg"); 

    if(document.getElementById("bold").checked) 
    {  
     if(msg.hasAttribute("style")) 
     { 
      msg.removeAttribute("style"); 
     } 
     msg.style.fontWeight = "bold"; 
    } 
    else if(document.getElementById("italic").checked) 
    { 
     if(msg.hasAttribute("style")) 
     { 
      msg.removeAttribute("style"); 
     } 
     msg.style.fontStyle = "italic"; 
    } 
    else if(document.getElementById("underline").checked) 
    { 
     if(msg.hasAttribute("style")) 
     { 
      msg.removeAttribute("style"); 
     } 
     msg.style.textDecoration = "underline"; 
    } 
    else if(document.getElementById("regular").checked) 
    { 
     if(msg.hasAttribute("style")) 
     { 
      msg.removeAttribute("style"); 
     } 
     msg.style.fontStyle = "normal"; 
    } 
} 
</script>