HI I am looking into object literals, a topi that I am afraid I really don't know much about. Anyway, I thought I'd try something but I didn't get it to work and I am not sure what I am doing wrong.
I have an HTML page:
<html>
<head>
<title>This is a test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bibendum turpis neque, et pretium arcu euismod eu. Etiam vulputate vitae nunc sit amet laoreet. Sed euismod justo sit amet interdum tincidunt. Donec pulvinar nec justo quis aliquet. Suspendisse at orci sed ante varius vehicula non vel enim. Donec posuere sollicitudin tristique. Aliquam imperdiet erat ultrices odio lobortis viverra. Integer id erat vitae quam elementum elementum non vitae leo. Nam velit enim, cursus id urna vitae, adipiscing congue odio. Nullam eleifend tristique rhoncus. In vel neque a sem mollis convallis. Mauris molestie est sit amet dui imperdiet, a pharetra nibh scelerisque. Nam massa purus, vulputate a purus sed, bibendum porttitor neque.</p>
<p>Proin adipiscing, ipsum eget malesuada sodales, mi purus sollicitudin ligula, sed ultrices massa ipsum id sem. Nulla eu laoreet dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet imperdiet turpis, sit amet rutrum justo. Nunc ultricies, enim eget consectetur laoreet, lorem ipsum posuere nulla, in lacinia lorem risus et ipsum. Nulla eros turpis, faucibus sit amet pharetra eu, pretium eu libero. Nam accumsan ullamcorper odio sit amet ultrices. Vivamus pretium scelerisque quam sed ultrices. Suspendisse euismod in neque quis volutpat.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin urna nisi, pharetra et sodales mollis, mollis sit amet metus. Sed leo dui, condimentum vel fermentum laoreet, interdum vel massa. Praesent sagittis tincidunt auctor. Morbi sit amet diam sit amet metus facilisis tincidunt. Suspendisse non libero ipsum. Sed vitae cursus dui. Nullam pharetra auctor lorem, nec facilisis est lobortis vel. Vestibulum tincidunt turpis ut libero congue pharetra. Aliquam erat volutpat. Nam imperdiet lectus eu dui pulvinar, eget consequat nibh fermentum.</p>
<p>Cras nibh quam, feugiat non libero eget, ultricies eleifend arcu. Donec a eleifend massa. In in pretium sem. Donec ultricies malesuada nisi, quis fringilla est egestas sed. Mauris placerat ac metus eu suscipit. Sed imperdiet eros non justo interdum, vitae dignissim augue dictum. Nullam vulputate quis elit non dictum. Phasellus pretium orci at erat auctor, nec vestibulum ligula consequat. Etiam lacinia, urna ac congue imperdiet, erat eros pulvinar metus, id dapibus magna velit sodales quam. Donec quis dignissim velit. Etiam quis quam et quam convallis ultrices at eu urna. Pellentesque pulvinar erat nibh. Nunc iaculis id lacus a consectetur. In hac habitasse platea dictumst. Nulla vel odio ut nulla vulputate imperdiet vel vel dui. Ut ut ipsum vehicula, vehicula nunc nec, fermentum nunc.</p>
<button>Contact form</button>
<form class="contactForm">
<div class="row">
<label>Enter your name</label>
<input type="text">
</div>
<div class="row">
<label>Enter your surname</label>
<input type="text">
</div>
<div class="row">
<label>Enter your age</label>
<input type="text">
</div>
</form>
</div>
</body>
</html>
And the css that hides the form:
.container{
width:900px;
margin:0 auto;
background-color:pink;
padding:10px;
}
.contactForm{
margin-top:20px;
display:none;
}
.contactForm label{
display:inline-block;
width:200px;
margin-top:10px;
}
.contactForm label input{
margin-left:10px;
}
And then I thought, let's get the form to appear when the button is clicked. Now, everybody knows how to do it really easily without an object literal, but I tought I'd use one and try.
Here is the script:
$(document).ready(function(){
//alert("ohi");
});
var form = { //object literal
init: function(){
//alert("hello!");
console.log($(this));
$("button").click(function(){
console.log("inside the click " + $(this));
});
}
};
form.init();
A couple of things to observe: this script sits in an external file and it is referenced in the HTML inside the head tag as you can see.
So in here I have created an object literal, assigned it an init function that gets called with form.init() and so far so good, but then when I add
$("button").click(function(){
console.log("inside the click " + $(this));
});
things don't work. When I click the button nothing happens, not even an error in the console. Is that because the click function is not inside a document ready?
