如何使单选按钮在javascript中工作

how to make the radio buttons work in javascript?

本文关键字：工作 javascript 何使 单选按钮      更新时间：2023-09-26

我正在学习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>

打开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是一个字体大小，但在这里显式设置它没有什么意义，因为它是默认的，而您刚刚删除了其他样式。

当用户单击单选按钮时，您不会运行msg1（）函数，只会在脚本加载时运行一次
在每个调用msg1（）的单选按钮上添加一个onClick
以及您之前评论的函数定义。

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

您永远不会在更改单选按钮时调用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>
相关文章：