试图学习JavaScript，但在我的页面上什么都不起作用_Javascript

试图学习JavaScript，但在我的页面上什么都不起作用

javascript

试图学习JavaScript，但在我的页面上什么都不起作用,javascript,Javascript,目标是：一个按钮，显示与Hello world有关的警报！以及一些单选按钮，当选择第三个按钮时会显示警告 a, button { display: block; margin-bottom: 1em; } fieldset { width: 245px; height: 75px; background: #dfe; position: relative; } legend { background: white; } #warn

目标是：

一个按钮，显示与Hello world有关的警报！以及一些单选按钮，当选择第三个按钮时会显示警告

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

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>

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

请注意函数的名称：

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处理程序。

首先，像这样转到按钮

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

getElementsByTagName返回匹配元素的数组

单选按钮试试这个

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

radio3.onclick = function() {
        warn.style.display = "inherit";
    }

这段代码是否放在script.js中？如果是，那么您是否给出了该脚本的正确路径？我建议您删除页面中除按钮之外的所有内容，然后继续使用javascript，直到它起作用为止。在那之后，再看更多。你可能会从你的问题中删除所有CSS，因为它看起来不相关。或者，var button=document.getElementsByTagNamebutton[0]；获取第一个按钮，在本例中是唯一的按钮。请注意[0]。但是给按钮一个ID并使用getElementById可能会更好。它可以工作！谢谢，我现在明白了。那么单选按钮警告呢？setAttribute用于HTML属性。由于要更改CSS属性，请使用element.style.display='block'；。这条路的确是正确的。添加[0]修复了按钮问题，单选按钮警告如何？