0

目標：

「Hello world!」でアラートを表示するボタン。3番目のラジオボタンが選択されたときに警告を表示するいくつかのラジオボタン。

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:

これのほとんどは実際には問題ではありません。重要なのは、3 番目のオプションが選択された場合にのみ表示される #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.onclickbuttonはボタンの配列であるため機能しません(名前を付けますbuttons)。反復する必要があります。

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

ボタンは 1 つしかないので、1 つのボタンをフェッチしてハンドラーをアタッチするためにidを使用します。document.getElementById()onclick

于 2012-08-19T04:46:34.527 に答える
3

まず、このようなボタンに移動し、

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

getElementsByTagName一致した要素の配列を返します...

ラジオボタンの場合 これを試してください

displayはCSSプロパティです。displayとして使用すると、HTML attributeコンテンツが表示または非表示になりません。CSS属性を使用してプロパティにアクセスする必要がありstyleます。お気に入り、

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