如何使單選按鈕在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控制台並閱讀錯誤消息：

未捕獲到的SyntaxError：意外令牌{

function msg1應該是function msg1()

---

當單選按鈕之一被選中時

如果要對選中的單選按鈕做出反應，則需要在運行功能之前先監聽事件。 目前，您正在立即運行它。

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

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>