4 Replies - 3790 Views - Last Post: 09 November 2011 - 12:50 AM

#1 edwards12691  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 18
  • Joined: 12-February 10

DOM difficulties with buttons

Posted 31 October 2011 - 09:58 AM

Hey everyone. I'm having issues with my homework, and I have no clue what I'm doing wrong. We have to have a picture of ourselves over a small paragraph, and get the picture to move to the different corners of the paragraph using buttons. Mine isn't really doing anything, and I can't find where I made a stupid mistake. Any help would be hugely appreciated. Thanks a ton!
<?xml version = "1.0"?>
<!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><title>Homework 5</title><style type = "text/css"><!--`
	p {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		font-size: 1.5em;
		width: 10em;}
	img {
		height: 10em;
		width: 7.5em;
		opacity: .75;}--></style>
<script type = "javascript"><!--
	function move(direction){
		var dom = document.getElementById("me").style;
		switch(direction){
			case 1:
			  dom.top = "0%";
			  dom.left = "40%";
			  break;
			case 2:
			  dom.top = "0%";
			  dom.left = "60%";
			  break;
			case 3:
			  dom.top = "20%";
			  dom.left = "40%";
			  break;
			case 4:
			  dom.top = "20%";
			  dom.left = "40%";
			  break;
		}
	}--></script>
</head>
<body>
	<p>TEXT TEXT TEXT TEXT TEXT 
        TEXT TEXT TEXT TEXT TEXT 
        TEXT TEXT TEXT TEXT TEXT 
        TEXT TEXT TEXT TEXT TEXT 
	<input type = "button" id = "nw" value = "Northwest" onclick = 
		"move(1);">
	<input type = "button" id = "ne" value = "Northeast" onclick = 
		"move(2);"><br />
	<input type = "button" id = "sw" value = "Southwest" onclick = 
		"move(3);">
	<input type = "button" id = "se" value = "Southeast" onclick = 
		"move(4);">
	</p><div id = "me" style = "position: absolute; top: 0%; left: 40%;">
	<img src = "img.jpg" /></div>
	<a href = "part2.html">Part 2</a>
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: DOM difficulties with buttons

#2 codeprada  Icon User is offline

  • Changed Man With Different Priorities
  • member icon

Reputation: 947
  • View blog
  • Posts: 2,355
  • Joined: 15-February 11

Re: DOM difficulties with buttons

Posted 01 November 2011 - 09:36 PM

The script type should be 'text/javascript' and you also need to remove the HTML comments in your script. They're causing syntax errors.
Was This Post Helpful? 0
  • +
  • -

#3 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

Re: DOM difficulties with buttons

Posted 08 November 2011 - 06:57 AM

View Postedwards12691, on 31 October 2011 - 09:58 AM, said:

Hey everyone. I'm having issues with my homework, and I have no clue what I'm doing wrong. We have to have a picture of ourselves over a small paragraph, and get the picture to move to the different corners of the paragraph using buttons. Mine isn't really doing anything, and I can't find where I made a stupid mistake. Any help would be hugely appreciated. Thanks a ton!
<?xml version = "1.0"?>
<!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><title>Homework 5</title><style type = "text/css"><!--`
	p {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		font-size: 1.5em;
		width: 10em;}
	img {
		height: 10em;
		width: 7.5em;
		opacity: .75;}--></style>
<script type = "javascript"><!--
	function move(direction){
		var dom = document.getElementById("me").style;
		switch(direction){
			case 1:
			  dom.top = "0%";
			  dom.left = "40%";
			  break;
			case 2:
			  dom.top = "0%";
			  dom.left = "60%";
			  break;
			case 3:
			  dom.top = "20%";
			  dom.left = "40%";
			  break;
			case 4:
			  dom.top = "20%";
			  dom.left = "40%";
			  break;
		}
	}--></script>
</head>
<body>
	<p>TEXT TEXT TEXT TEXT TEXT 
        TEXT TEXT TEXT TEXT TEXT 
        TEXT TEXT TEXT TEXT TEXT 
        TEXT TEXT TEXT TEXT TEXT 
	<input type = "button" id = "nw" value = "Northwest" onclick = 
		"move(1);">
	<input type = "button" id = "ne" value = "Northeast" onclick = 
		"move(2);"><br />
	<input type = "button" id = "sw" value = "Southwest" onclick = 
		"move(3);">
	<input type = "button" id = "se" value = "Southeast" onclick = 
		"move(4);">
	</p><div id = "me" style = "position: absolute; top: 0%; left: 40%;">
	<img src = "img.jpg" /></div>
	<a href = "part2.html">Part 2</a>
</body>
</html>


Well change type = "javascript" to language = "javascript" OR type="text/javascript".Also remove the HTML comments tags which you have used in your javascript code.
Was This Post Helpful? -2
  • +
  • -

#4 arvindthakur  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 133
  • Joined: 07-June 11

Re: DOM difficulties with buttons

Posted 09 November 2011 - 12:18 AM

View Postarvindthakur, on 08 November 2011 - 06:57 AM, said:

View Postedwards12691, on 31 October 2011 - 09:58 AM, said:

Hey everyone. I'm having issues with my homework, and I have no clue what I'm doing wrong. We have to have a picture of ourselves over a small paragraph, and get the picture to move to the different corners of the paragraph using buttons. Mine isn't really doing anything, and I can't find where I made a stupid mistake. Any help would be hugely appreciated. Thanks a ton!
<?xml version = "1.0"?>
<!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><title>Homework 5</title><style type = "text/css"><!--`
	p {
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		font-size: 1.5em;
		width: 10em;}
	img {
		height: 10em;
		width: 7.5em;
		opacity: .75;}--></style>
<script type = "javascript"><!--
	function move(direction){
		var dom = document.getElementById("me").style;
		switch(direction){
			case 1:
			  dom.top = "0%";
			  dom.left = "40%";
			  break;
			case 2:
			  dom.top = "0%";
			  dom.left = "60%";
			  break;
			case 3:
			  dom.top = "20%";
			  dom.left = "40%";
			  break;
			case 4:
			  dom.top = "20%";
			  dom.left = "40%";
			  break;
		}
	}--></script>
</head>
<body>
	<p>TEXT TEXT TEXT TEXT TEXT 
        TEXT TEXT TEXT TEXT TEXT 
        TEXT TEXT TEXT TEXT TEXT 
        TEXT TEXT TEXT TEXT TEXT 
	<input type = "button" id = "nw" value = "Northwest" onclick = 
		"move(1);">
	<input type = "button" id = "ne" value = "Northeast" onclick = 
		"move(2);"><br />
	<input type = "button" id = "sw" value = "Southwest" onclick = 
		"move(3);">
	<input type = "button" id = "se" value = "Southeast" onclick = 
		"move(4);">
	</p><div id = "me" style = "position: absolute; top: 0%; left: 40%;">
	<img src = "img.jpg" /></div>
	<a href = "part2.html">Part 2</a>
</body>
</html>


Well change type = "javascript" to language = "javascript" OR type="text/javascript".Also remove the HTML comments tags which you have used in your javascript code.


Ok may be I am wrong.I have done my defined changes in this code and runned it in IE9 and now it is working.So could you gouys please explain what is the correct answer of this.
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,262
  • Joined: 08-June 10

Re: DOM difficulties with buttons

Posted 09 November 2011 - 12:50 AM

removing the HTML comments (they are invalid JS syntax, cf. Error Console).
same goes for the CSS.

the type attribute should read "text/javascript" or "application/javascript", but since this is HTML (and not XHTML (unless you use the .xhtml extension)) wrong values would be ignored.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1