Untitled

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>First Loop</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<style>
		.show{
			background-color:yellow;
		}
	</style>
    <script type="text/javascript">
		function flush(){
			$("#greetings").html("");
			$("#errors").html("");
			$("#errors").removeClass("show");
		}
        function greetMeThreeTimes()
        {
			flush();
            var name = document.getElementById('txtName').value;

            for (var counter=0; counter<3; counter=counter+1)
            {
                $('#greetings').append("Hello, " + name + "<br />");
            }
        } //end greetMeThreeTimes

        function greetMeHowManyTimes()
        {
			flush();
            var name2 = document.getElementById('txtName2').value;
            var greetNum = $("#greetNum").val();
            var regex = /^\d+$/;


            if(regex.test(greetNum) == false){
				$("#errors").html("You didn't enter a number");
				$("#errors").addClass("show");
				return
			}

            if(greetNum < 1 || greetNum > 20){
				$("#errors").html("You must choose between 1 and 20 times");
				$("#errors").addClass("show");
			}else{
				for(i = 0; i < greetNum; i++){
					$('#greetings').append("Hello, " + name2 + "<br />");
				}
			}

        }
    </script>
</head>
<body>
<p>Type in your name and I will greet you 3 times!</p>
    <input type="text" id="txtName">
    <input type="button" value="Greet Me!" onclick="greetMeThreeTimes()">

    <p>How many times would you like to be greeted? (1-20 times)</p>
    <input type="text" id="txtName2">
    <input type="text" id="greetNum">
    <input type="button" value="Greet Me!" onclick="greetMeHowManyTimes()">
<hr>
    <div id="greetings">  <!-- Section to output the greeting -->
    </div>
    <div id="errors">
    </div>

</body>
</html>