0

html5/js ゲーム im プログラミングのログイン/登録システム/メニューを作成しようとしています。

現時点では、メニューに使用するさまざまな div を含む html ページをセットアップしました。

<!DOCTYPE html>
<html>
<head>
<title>TBG basic structure</title>
<script src="JS/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="JS/game.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
</head>
<body>
<section id="wrapper">
<header>
    <h1><img src="images/title.png" width="467" height="184"/></h1>

</header>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Leagues</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>
<article id="container">
    <div id="load-new">
        <p>LOAD/NEW</p>
    </div>
    <div id="reg">
        <p>REGISTER</p>
    </div>
    <div id="login">
        <p>LOGIN</p>
    </div>
    <div id="access">
        <p>ACCESS</p>
        <button id="login-but" onclick="login2()">Login</button>
        <button id="reg-but" onclick="register()">Register</button>
    </div>
    <canvas id="TBG" width="640" height="416">
        Please use a more up to date browser
    </canvas>
    <div id="GUI">
        <div id="health">
            <p><img src="images/heart.png"/>: <span class="gameHealth"></span></p>
            </div>
        <div id="energy">
            <p><img src="images/energy.png"/>: <span class="gameEnergy"></span></p>
        </div>
        <div id="table_container"></div>
    </div>
</article>

</section>
</body>
</html>

基本的に、ユーザーの決定により、javascript/jquery を使用してメニューの正しい部分を非表示にしたいと考えています。

したがって、ユーザーに表示される最初の div はアクセス div であり、上記のアクセス div 内のボタンで確認できるように、「ログイン」または「登録」という 2 つのオプションをユーザーに提供します。

基本的に、ボタンの1つが押されたときにJSがアクセスdivを非表示にし、ユーザーが押したボタンに応じてログインdivまたはreg divを表示するようにします。

これが私が現時点で持っているJです：

$(document).ready(function(){

var loadScr = $("#load-new");
var regScr = $("#reg");
var loginScr = $("#login");
var accessScr = $("#access");

    loadScr.hide();
    regScr.hide();
    loginScr.hide();

    function login()
    {
        accessScr.hide();
        loginScr.show();
    }

    function register()
    {
        accessScr.hide();
        regScr.show();
    }

});

ボタンの onclick 機能が JS とやり取りしていないようです。ユーザーがログインボタンをクリックしたときに呼び出されるログイン機能に test と言ったアラートを配置したため、これを知っていますが、応答がありませんでした。

私はかなりばかげたことをしていますか？

ありがとう

4

1 に答える 1

1

最初にすべきことは、要素を追加type="button"することです。一部のブラウザーは要素をデフォルトで<button>処理するため、ページがリロードされる可能性があります。また、「-」は属性で有効な文字ではないため、「_」に置き換えました。<button>type="submit"id

<button id="login_but" type="button">Login</button>
<button id="reg_but" type="button">Register</button>

また、ボタンから属性を削除しましたonclick。これは、クリック イベントをプログラムで割り当てる方がよいためです (「目立たない」JavaScript 手法)。次に、2 つの関数をドキュメント対応から移動し、要素への参照を保持することを忘れます。jQuery で ID セレクターを使用すると、信じられないほど高速になります。JS は次のようになります。

function login()
{
    $('#access').hide();
    $('#login').show();
}

function register()
{
    $('#access').hide();
    $('#reg').show();
}

$(function() {

    $('#login_but').click(login);
    $('#reg_but').click(register);

    $('#load-new').hide();
    $('#reg').hide();
    $('#login').hide();

});
于 2013-03-07T16:17:26.277 に答える