使不可见的div在点击时可见

Question

I have tried but can't seem to figure out how to debug this. The div should be invisible until the user clicks on the "REDEEM THIS OFFER NOW!" button. The "panel" div is supposed to appear over the content. If the user does not enter anything into the text field it should turn red.

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

Answer 1

why don't you try something like this ?

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

here's a working demo http://jsfiddle.net/FJrKq/3/

I've edited the order of some of your elements and also hidden some of them once the panel is displayed. (also I've removed some of the text so it would be easier to see and quickly edit the page)

Answer 2

Write your JavaScript code into:

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

Write your functions outside of this scope.

Add

position:absolute 

to "#panel" in style block.

Answer 3

You should be use in your start of jQuery line

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

});