Question

当选择单选按钮并调用processRadioButtons函数时，我试图显示一条消息。

在Safari - Mac中，我根本看不到这条消息。在Chrome和Firefox中，我看到它只是一秒钟。我也尝试使用.innerHTML方法enter link description here并粘贴在我的行中：

            document.getElementById("method_message").innerHTML = "You selected a method";

使用他们的代码和文本在Safari Mac中正常工作并留在页面上。

有谁知道为什么文字没有出现或者看起来不长？

<!DOCTYPE html>
<html>
<head>
    <script>
        function processRadioButtons() {

        if(document.frmFrequentMethods.frequentMethod[0].checked  == true) 
        {
            document.getElementById("method_message").innerHTML = "You selected a method";
        }
    }

    </script>

<style type="text/css"> 
input[type="radio"]{
  margin: 0 20px 0 20px;
}
</style>
</head>
<body>

<form name = "frmFrequentMethods">
    <fieldset> <legend>Frequently Used Transportation Methods</legend>      
         </p>
            <input type="radio" name="frequentMethod" value="car" checked = "checked">car
            <input type="radio" name="frequentMethod" value="walk">walk
            <input type="radio" name="frequentMethod" value="bike">bike
             <SPAN STYLE=color:blue ID="method_message"></SPAN>

         </p>    
        <input type="submit" value="Get Method of Transportation" onClick="processRadioButtons()">   
    </fieldset> 
</form>

</body>
</html>

Answer 1

与评论中指出的Pointy一样，您拥有的是submit按钮。点击它将提交表格，整个页面将被刷新。

正如我从评论中所理解的，如果您想在选择单选按钮后给出反馈，您可以使用它的onclick事件而不是提交按钮单击以执行以下操作。

HTML

<input type="radio" name="frequentMethod" value="car" onClick="processRadioButtons(this)" checked="checked" />
<input type="radio" name="frequentMethod" value="walk" onClick="processRadioButtons(this)">walk
<input type="radio" name="frequentMethod" value="bike" onClick="processRadioButtons(this)">bike

JS

function processRadioButtons(elm) {
 var message = document.getElementById("method_message");
 if(elm.value  == "car") 
   message.innerHTML = "You selected a method";
 else
   message.innerHTML = "";
}

HTML DOM .innerHTML属性值未在浏览器中显示

1 个答案: