Javascript function is not being called from button press

cedwards93 · 03-05-2013, 08:27 PM

Hey guys im really new to xhtml and javascript

The problem i am getting is when i click submit the function greeting is not being called.

the function should get the value from the text field store that as var name, then print a message based on the time of day.

i just cannot get the button to run the function!

Please if you have a fix, can you keep it simple so i can understand.

Thanks

the button should call the function greeting(), when i click the button nothing happens.

Code:

<!--?xml version='1.0' encoding='UTF-8'?-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />

        
<title>Che16 CS15020 Assignment</title>

<!-- =========== style sheet =========== -->

<link rel="stylesheet" href="css/assignmentDefault.css" title="Default stylesheet"/>

<!-- =========== end of page style =========== -->
<script type="text/javascript">
<!-- // ======== name and welcome greeitng java script ===============

function greeting()
{


var today = new Date();
var hours = today.getHours();

var name = document.forms[0].user.value;
alert ("You typed: " + name); // de bugging line
	
		if (hours < 12) //MESSAGE FOR MORNING
		alert("Good Morning " +name);
		else if (hours >= 12 && hours < 18) //MESSAGE FOR AFTERNOON 
		alert(("Good Afternoon " +name);
		else if (hours >= 18) //MESSAGE FOR EVENING (6pm-8pm)
		alert("Good Evening " +name);
else
alert("you did not enter a name, you will not get a greeting")

}

		
// -->
</script>

</head>

<body>
<div class="banner">

<!-- backgorund image for banner is displayed via stylesheet -->

</div>

<hr />
<div id="menuArea">

	
	<ul>
			<li><a href="#">Practicals</a>
				<ul>
					<li><a href="prac1.html">Prac 1</a></li>
					<li><a href="prac2.html">Prac 2</a></li>
				</ul>
			</li>
		<li><a href="about.html">About</a></li>
		<li><a href="cv.html">CV with markup</a></li>
		<li><a href="personalInfo.html">Personal Information</a></li>
		<li><a href="references.html">References</a></li>
		<li><a href="index.html">Return home</a></li>
	</ul>
	
</div>

<div id="contentArea">


<h1>Welcome to my CS15020 Assignment</h1>

<p class="subHeading"> <h2>This is a h2 blue test</h2> </p>
<form action="">
<p class="standard"> Please enter your name, then click submmit: </p>
<p><input name="user" size="7" type="text"> </p> <p><input name="submitBttn" onclick="greeting()" value="submit" type="button"> </p>
</form>
<p class="standard"> blah blahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
<p class="standard"> blah blahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
<p class="standard"> blah blahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
</div>
</body>



<div class="footer">
<hr />

<p class="footer"> The information provided on this and other pages by me, Chris Edwards (che16@aber.ac.uk) <a href="mailto:che16@aber.ac.uk">Click here to email me</a>, is
under my own personal responsibility and not that of Aberystwyth University. Similarly,
any opinions expressed are my own and are in no way to be taken as those of A.U.</p>

<p class="footer"> Visit my <a href="references.html"> References page </a> where you can find the external points of reference i used for this assigment.
All rights reserved</p>

<p class="footer"> Css and XHTML Markup on this page Validate to W3 standards </p>
<p class="footer">
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valid CSS!" />
    </a>
</p>

</div>
</body>
</html>

Old Pedant · 03-06-2013, 01:56 AM

Want to kick yourself?

Code:

alert(("Good Afternoon " +name);

You should always have the same number of ( as you have ). Same with [ and ]. Same with { and }

You would find this *INSTANTLY* if you would just learn to use the JavaScript debugger!

Might I suggest that you use the CHROME browser?

Bring up your page in Chrome. Then hit the F12 key. Then click on the "Console" tab. VOILA! There will be your error(s). And on the right side it will show you the line number and if you click on that line number it will show you your code on that line.

There is much much more the debugger can do, but start by learning that, at the very least.