5 Replies - 2676 Views - Last Post: 10 October 2009 - 01:22 AM

#1 sankwa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 18-August 09

dictionary with javascript

Post icon  Posted 09 October 2009 - 01:50 AM

I am doing a distionary page with javascript and im trying to get it so that the definitions come up when the word they are for is clicked on. I seem to be missing something and cant work out what it is i need.
her is my javascript
// Javascript Document
var filename = "dictionary.js";

function loaded(which)
{
	alert(which + " loaded");
}

/**/
function showInfo(which)
{
	
	var placeholder = document.getElementById("definition");
	

	var source = whichInfo.getAttribute("href");
	
	
	placeholder.setAttribute(source);
	alert("showInfo called");
	
	return false;
}

function prepareList()
{
	if (!document.getElementsByTagName || !document.getElementById) 
	return false;
	
	var words = document.getElementById("words");
	
	if (!words) return false;
	
	var links = words.getElementsByTagName("a"); 
for(var i = 0; i < links.length; i++) 
			{ 
		   		links[i].onclick = function(){ 
				showInfo(this); 
				return false; 
			}
		}

	alert("prepare list done");
}

function init()
{
	prepareList();
}

loaded(filename);
window.onload = init;


here is my html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dictionary DOM Scripting</title>
<link href="../styles/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dictionaryScripts/dictionary.js"> </script>
</head>

<body>
<div class="page">
<div class="nav">
<ul>
<li><a href="../home.html">Home</a></li>
<li><a href="../form/form.html">Form</a></li>
<li><a href="dictionaryCSS.html">Dictionary with CSS</a></li>
<li><a href="dictionaryDOM.html">Dictionary with DOM scripting</a></li>
<li><a href="discussionPage.html">Discussion</a></li>
</ul>
</div>
<div class="header">
<h1>Dictionary with DOM Scripting</h1>
</div>
<div class="mainContent">
<div id="words">
<h2>L</h2>
<p>Click on the word to get a definition</p>
<dt><a href="lecturer.html">LECTURER, n.</a></dt>
<dt><a href="learning.html">LEARNING, n</a></dt>
<dt><a href="liar.html">LIAR, n.</a></dt>
<dt><a href="love.html">LOVE, n.</a></dt>
</div>
<div id="definition">Choose a definition</div>
</div>
</div>
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: dictionary with javascript

#2 arthurakay  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 226
  • Joined: 17-February 09

Re: dictionary with javascript

Posted 09 October 2009 - 06:48 AM

First of all, do you get any errors? If so, where? Does any part of the script work? Does something unexpected happen? You have to give us some more details here...

Unless I'm missing something, you never declare "whichInfo"
var source = whichInfo.getAttribute("href");



Should you be using the variable "which" here?

I can't help you much more than that unless you tell us some more details.
Was This Post Helpful? 0
  • +
  • -

#3 sankwa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 18-August 09

Re: dictionary with javascript

Posted 09 October 2009 - 07:45 AM

View Postarthurakay, on 9 Oct, 2009 - 05:48 AM, said:

First of all, do you get any errors? If so, where? Does any part of the script work? Does something unexpected happen? You have to give us some more details here...

Unless I'm missing something, you never declare "whichInfo"
var source = whichInfo.getAttribute("href");



Should you be using the variable "which" here?

I can't help you much more than that unless you tell us some more details.


I know that the prepareList function is being created, however the showInfo function isnt being called and im not sure where this is going wrong..

This post has been edited by sankwa: 09 October 2009 - 07:53 AM

Was This Post Helpful? 0
  • +
  • -

#4 arthurakay  Icon User is offline

  • D.I.C Head

Reputation: 22
  • View blog
  • Posts: 226
  • Joined: 17-February 09

Re: dictionary with javascript

Posted 09 October 2009 - 08:34 AM

showInfo(this);
 


If the showInfo() method isn't being called, then this line is the problem. The variable "this" probably refers to something unexpected.

If I had to guess, this line should probably be:
showInfo(links[i]);
 


Try using Firebug to see if you can debug what the variables are and if they have the values you expect.
Was This Post Helpful? 0
  • +
  • -

#5 sankwa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 18-August 09

Re: dictionary with javascript

Posted 09 October 2009 - 09:35 PM

View Postarthurakay, on 9 Oct, 2009 - 07:34 AM, said:

showInfo(this);
 


If the showInfo() method isn't being called, then this line is the problem. The variable "this" probably refers to something unexpected.

If I had to guess, this line should probably be:
showInfo(links[i]);
 


Try using Firebug to see if you can debug what the variables are and if they have the values you expect.


feel free to correct me if im wrong but "this" seems to be some sort of key word like "function" "var" "return" "false" ect...

"this" was working when I did an image gallery that worked much in the same way as I want this dictionary to. However, instead of having a "blank placeholder" image that is being replaced I have an empty div instead.
Was This Post Helpful? 0
  • +
  • -

#6 sankwa  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 47
  • Joined: 18-August 09

Re: dictionary with javascript

Posted 10 October 2009 - 01:22 AM

I have progressed with this myself the showInfo function is now working as expected, but I am having trouble adding elements to the dom i.e. getting my information to show up.
here is my new code
// Javascript Document
var filename = "dictionary.js";
function loaded(which)
{
	alert(which + " loaded");
}

function showInfo(whichInfo)
{
	var definition = document.getElementById("definition");
	var source = whichInfo.getAttribute("href");
	definition.setAttribute("href", source);
	
	alert("showInfo called");
	
	return false;
}

function addInfo()
{
	var wordDef = "ya mum";
		
		var dd = document.createElement("dd");
		
		var defText = document.createTextNode(wordDef);
	
		dd.appendChild(defText);
	
		dt.appendChild(dd);
	alert("addInfo called");
}

function prepareDefinition()
{
	if (!document.getElementsByTagName || !document.getElementById) 
	return false;
	
	var words = document.getElementById("words");
	
	if (!words) return false;
	
	var links = words.getElementsByTagName("a"); 
for(var i = 0; i < links.length; i++) 
			{ 
		   		links[i].onclick = function()
				{ 
					showInfo(this); 
					return false; 
				}
			}

}

function init()
{
	prepareDefinition();
	addInfo();
}
loaded(filename);
window.onload = init;



I tried by adding another function and calling it in the showInfo but i dont understand why it cant simply all be in the same function.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1