0

目标：

一个按钮，显示带有“Hello world！”的警报。以及一些无线电按钮在选择第三个按钮时显示警告。

的HTML：

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>hello world</title>
    <link rel="stylesheet" href="style.css">
    <meta name="description" content="">
</head>
<body>
    <div id="main">
        <p>text</p>
        <a href="#">link</a>
        <button>button</button>
        <form>
            <fieldset>
                <legend>Legend</legend>
                    <label for="radio1">Option 1</label>
                        <input type="radio" name="radio-buttons" value="option-1" id="radio1"/>
                    <label for="radio2">Option 2</label>
                        <input type="radio" name="radio-buttons" value="option-2" id="radio2"/>
                    <label for="radio3">Option 3</label>
                        <input type="radio" name="radio-buttons" value="option-3" id="radio3"/>
                        <p id="warn">No, pick another one.</p>
            </fieldset>
        </form>
    </div>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

CSS：

这大部分真的不重要。重要的是 #warn 应该只在选择第三个选项时显示。

a,
button {
    display: block;
    margin-bottom: 1em;
}

fieldset {
    width: 245px;
    height: 75px;
    background: #dfe;
    position: relative;
}

legend {
    background: white;
}

#warn {
    display: none;
    background: #d33;
    color: #fff;
    font-family: helvetica;
    padding: 10px 15px 10px;
    margin: 0 -12px;
    position: absolute;
    top: 52px;
    width: 239px;
}

JavaScript：

我认为问题出在我的事件处理程序中，但我不确定。顺便说一句，是的，我知道这里有一些无关紧要的东西；就像我说的那样，我只是在胡闹。

// variables
var p        = document.getElementsByTagName("p");
var a        = document.getElementsByTagName("a");
var button   = document.getElementsByTagName("button");
var fieldset = document.getElementsByTagName("fieldset");

var radio1   = document.getElementById("radio1");
var radio2   = document.getElementById("radio2");
var radio3   = document.getElementById("radio3");

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

// functions
function prepareEventHandlers() {

    button.onclick = function() {
        alert("Hello world!")
    };

    radio3.onfocus = function() {
        warn.setAttribute("display","inherit")
    }
}

// window onload
window.onload = function() {
    prepareEventHandlers();
}
4

2 回答 2

4

注意函数的名称：

document.getElementsByTagName()
                // ^ That's an "s", so the function
                //   returns an array of elements.

button.onclick不起作用，因为button是一组按钮（我会命名它buttons），所以你必须迭代：

for (var i = 0; i < button.length; i++) {
  button[i].onclick = ...
}

由于您只有一个按钮，我只会给它一个id并使用它document.getElementById()来获取单个按钮并附加onclick处理程序。

于 2012-08-19T04:46:34.527 回答
3

首先，像这样去按钮，

var button   = document.getElementsByTagName("button")[0];

getElementsByTagName返回匹配元素的数组...

对于单选按钮试试这个

display是一个CSS属性。用作不会隐藏或显示内容display。您必须使用属性HTML attribute访问属性。像，CSSstyle

radio3.onclick = function() {
        warn.style.display = "inherit";
    }
于 2012-08-19T04:48:14.663 回答