1

Codecademy.com で JavaScript の学習を終えたばかりで、html ボタンで簡単な機能を試していました。私の問題は、私が学んだ JS が使用可能なコードとどのように同等であるかを理解していないと思います。これらのフォーラムを検索し、document.getElementById.onclick メソッドを試し、onClick="adventure();" を使用してみました。ボタン自体で、何も機能しません。ボタンに JS を適用してブラウザで動作させる方法を教えてください。ありがとうございました。

<!doctype html>
<html>

    <head>

        <script type="text/javascript">

        document.getElementById("adv").onclick = adventure();

        function adventure() {

            if (confirm('I am ready to play!')) {

            var age = prompt("What's your age?");

            if(age < 18) {
                console.log('I cannot stop you from playing, but do so at your own risk!');
            } else {
                console.log('You have a great challenge, ahead. Brace yourself.' + "\r\n");
            }

            console.log("You are walking down the street and you see Shawn beating up your friends and stealing their candy. You feel as though it is your duty to respond. You walk up to him and say, 'Hey, Shawn, knock it off!" + "\r\n");

            console.log("Shawn glares at you." + "\r\n");

            var choice1 = function() {
            var userAnswer = prompt("Do you wish to fight?" + "\r\n");

            if(userAnswer !== "yes" || userAnswer !== "no") {
                console.log("You must choose 'yes' or 'no'.");
                choice1();
            } else if (userAnswer === "yes") {
                console.log("As you go to kick Shawn, he grabs your leg and slams you to the pavement. As the world turns black and your eyes slowly close, you feel the end is near. You cry, and then perish. Goodbye!");
            } else {
                console.log("Good choice, weakling. By playing the coward you will survive. Now where's my beer?");
            }

            };
        }

        </script>

    </head>


    <body>

        <input id="adv" type="button" onclick="adventure();" value="Start Your Adventure" />

    </body>

</html>
4

4 に答える 4

1

問題は、次の行です。

document.getElementById("adv").onclick = adventure();

タグが定義される前は意味がありません。すでに属性adventureから関数を呼び出しているため、この行を削除してみてください。onclick

于 2012-11-13T21:15:50.167 に答える
0

DOM要素の作成後に必ずクエリを実行する必要があります。スクリプトタグは、要素がインスタンス化される前に実行されます。.onloadしたがって、コードを：でラップします。

 window.onload = function() {
     ...
 };

また、adventure();この場合、関数を時期尚早に呼び出します。adventure代わりに次のように関数を渡します。

document.getElementById('adv') = adventure;
于 2012-11-13T21:13:27.313 に答える
0

Tengiz と David からの回答はどちらも部分的に正しいですが、コードに「}」がなく、choice1 が閉じられていません。デモ用にフィドルを作成しました。インラインの onclick を削除すると、すべてがうまくいくはずです。

document.getElementById("adv").onclick = adventure;
function adventure() {

            if (confirm('I am ready to play!')) {

            var age = prompt("What's your age?");

            if(age < 18) {
                console.log('I cannot stop you from playing, but do so at your own risk!');
            } else {
                console.log('You have a great challenge, ahead. Brace yourself.' + "\r\n");
            }

            console.log("You are walking down the street and you see Shawn beating up your friends and stealing their candy. You feel as though it is your duty to respond. You walk up to him and say, 'Hey, Shawn, knock it off!" + "\r\n");

            console.log("Shawn glares at you." + "\r\n");

            var choice1 = function() {
                var userAnswer = prompt("Do you wish to fight?" + "\r\n");
            }
            if(userAnswer !== "yes" || userAnswer !== "no") {
                console.log("You must choose 'yes' or 'no'.");
                choice1();
            } else if (userAnswer === "yes") {
                console.log("As you go to kick Shawn, he grabs your leg and slams you to the pavement. As the world turns black and your eyes slowly close, you feel the end is near. You cry, and then perish. Goodbye!");
            } else {
                console.log("Good choice, weakling. By playing the coward you will survive. Now where's my beer?");
            }

            };
        }

http://jsfiddle.net/UuBSj/9/

于 2012-11-13T21:25:14.850 に答える
0

次の行を削除するか

document.getElementById("adv").onclick = adventure();

あなたが持っているので

<input id="adv" type="button" onclick="adventure();" value="Start Your Adventure" />

onclick="adventure();"または、入力要素からインラインイベントハンドラーを削除して、使用できます

window.onload=function(){
    document.getElementById("adv").onclick = adventure;
}
function adventure()
{
    // code goes here
}

より高度なイベント処理については、こちらをご覧ください。

于 2012-11-13T21:24:00.280 に答える