Accidentally Included Script Three Times

Enter your name and see what happens.

by mkennedy

HTML

<html>
<body>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"> </script>
    
    <!-- INCLUDE OUR SCRIPT -->
    <script src="https://s3.amazonaws.com/michael-kennedy/blog/JavaScriptTwiceExamples/bad-example2.js" type="text/javascript"> </script>
    
    <h1>Sample Repeated JS File (bad version)</h1>
    <div>
        Enter your name: 
        <input type=text /><br />
        <button id="nameIt">Tell Me Your Name</button>
    </div>
    <div id="nameOut"></div>
    
    <!-- Imagine lots more content here. -->
    
    <!-- OOPS, I DID IT AGAIN -->
    <script src="https://s3.amazonaws.com/michael-kennedy/blog/JavaScriptTwiceExamples/bad-example2.js" type="text/javascript"> </script>
        <script src="https://s3.amazonaws.com/michael-kennedy/blog/JavaScriptTwiceExamples/bad-example2.js" type="text/javascript"> </script>
</body>
</html>

CSS

body {padding: 10px;} 
h1 {font-size: 1.5em; padding: 10px; padding-left: 0px;}
#nameIt{margin: 5px; margin-left: 133px;}
#nameOut {color: red; font-size: 1.25em;}

JavaScript

/*
THE SCRIPT REFERENCED ON S3 IS BASICALLY THIS JS.
*/

/*
$(document).ready(function() {
    $("#nameIt").click(function(e) {
       var name= $("input[type=text]").val();    
       $("#nameOut").append("<div>Hi there "+name+"</div>");
    });
});

*/