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()

当选中其中一个单选按钮时

如果您想对正在检查的单选按钮做出反应，那么在运行您的功能之前，您需要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";

Normal是一个font-weight，但在此处显式设置它没有多大意义，因为它是默认设置，你刚刚删除了其他样式。

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>

如何让单选按钮在javascript中工作？

4 个答案: