CODEWITHSUNDEEP
javascriptjquerycsshtml
user1896446
user1896446

Reputation:

Making an invisible div turn visible on click not working

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

Upvotes: 0

Views: 1969

Answers (3)

user2579060
user2579060

Reputation:

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

});

Upvotes: 0

Jaydev
Jaydev

Reputation: 435

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.

Upvotes: 0

Catalin Deaconescu
Catalin Deaconescu

Reputation: 443

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)

Upvotes: 1

Related Questions