0

試してみましたが、これをデバッグする方法がわかりません。ユーザーが [REDEEM THIS OFFER NOW!] をクリックするまで、div は表示されません。ボタン。「パネル」div は、コンテンツの上に表示されるはずです。ユーザーがテキスト フィールドに何も入力しない場合は、赤に変わります。

<div id="centreblock">
            <h1>WOW! AMAZING!!!</h1>
            <img src="images/ipad.gif" width="100%" height="250">
            <h2>Congratulations! You won a free iPad! Enter your name, address, and phone number        to have it delivered now.</h2>
    <form action="">
    <label for="firstName">First Name: </label>
    <input type="text" size="12" id="firstName" name="firstName" maxlength="30">
    <br>
    <p id="output"></p>
    <input type="button" id="popup" value="REDEEM THIS OFFER NOW!">
    <br>
    </form>
    </div>
    <div id="panel">
        <h1 id="output-inside"></h1>
    </div>
    <script src="http//code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/script.js"></script>

Javascript

//script.js
var firstName;

function newPanel() {
    $('#panel').show();
    $('#output-inside').text('Congrats ' + firstName + ', your iPad will be delivered to you in the next century') 
}

function panelCheck() {
    firstName = $('#firstName').val();
    if (firstName != '') {
        $('#firstName').removeClass('error');
        $('#output').text('');
        newPanel();
    } else {
        $('#firstName').addClass('error').focus();
        $('#output').text('We need your name');
    }
}
$(function() {
    $('#panel').hide();
    $('#popup').click(function() {
        panelCheck();
    });
    $('#firstName').keypress(function(e) {
        if (e.keyCode === 13) {
            panelCheck();
        }
    });
    $('#close-panel').click(function() {
        $('#panel').hide();
    });
});
4

3 に答える 3

1

このようなことを試してみませんか？

<div id="centreblock">      
<form action="" id="panel2">
    <h1>WOW! AMAZING!!!</h1>
    <h2>Congratulations! You won a free iPad! Enter your name, address, and phone number to have it delivered now.</h2>
    <label for="firstName">First Name: </label>
    <input type="text" size="12" id="firstName" name="firstName" maxlength="30" />
    <br />
    <p id="output"></p>
    <input type="button" id="popup" value="REDEEM THIS OFFER NOW!" />
    <br />
</form>
<div id="panel">
    <h1 id="output-inside"></h1>
</div>


function newPanel() {
$('#panel').show();
$('#output-inside').text('Congrats ' + firstName + ', your iPad will be delivered to you in the next century');
$('#panel2').hide();}

ここに動作するデモがありますhttp://jsfiddle.net/FJrKq/3/

いくつかの要素の順序を編集し、パネルが表示されたら一部を非表示にしました。(また、見やすく、ページをすばやく編集できるように、一部のテキストを削除しました)

于 2013-03-10T08:47:42.063 に答える
0

JavaScriptコードを次のように記述します。

$('document').ready(function(){
   // your code
});

この範囲外で関数を記述します。

追加

position:absolute

スタイルブロックの「#panel」に。

于 2013-03-10T08:19:25.070 に答える
0

jQuery行の開始時に使用する必要があります

$('document').ready(function(){
   // your code here

var firstName;

function newPanel() {
    $('#panel').show();
    $('#output-inside').text('Congrats ' + firstName + ', your iPad will be delivered to you in the next century') 
}

function panelCheck() {
    firstName = $('#firstName').val();
    if (firstName != '') {
        $('#firstName').removeClass('error');
        $('#output').text('');
        newPanel();
    } else {
        $('#firstName').addClass('error').focus();
        $('#output').text('We need your name');
    }
}
$(function() {
    $('#panel').hide();
    $('#popup').click(function() {
        panelCheck();
    });
    $('#firstName').keypress(function(e) {
        if (e.keyCode === 13) {
            panelCheck();
        }
    });
    $('#close-panel').click(function() {
        $('#panel').hide();
    });
});

});
于 2013-12-06T14:54:29.073 に答える