Lost output? no errors

Eadmanday · 03-19-2013, 09:21 PM

Ok so i am getting no output for my translate page. I am kinda lost in where the error is popping up because i am not getting any errors.
HTML code

Code:

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pirate Translator</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/styles.css">

</head>	
<body>
<h1>Land Lubber's Pirate Translator</h1>
<p>Simple click on the buttons to translate words and/or phrases from english to pirate talk.</p><hr />

<form id="pirateForm" name="pirateForm">
  <tbody id ="body">
  
  </tbody>
</form>
	<textarea id="input"></textarea>
	<textarea id="output" readonly></textarea>	
	<input type="button" id="trans" onclick="changetext();" value="translate" />
	<div>

	<input type="button" id="clearText" onclick="clear();" value="Clear Text" />
	</div>

<script src="js/pirate7.js"></script>


</body>
</html>

Javascript code

Code:

document.getElementById("trans").onclick = function changetext()
{
var phrases =[["hello", "ahoy"], ["hi", "yo-ho-ho"], ["pardon me", "avast"], ["excuse me", "arr"], ["my", "me"],["friend", "me bucko"], ["sir", "matey"], ["madam" , "pround beauty"], ["miss", "comely wench"], ["stranger", "scurvy dog"], ["officer", "foul blaggart"], ["where", "whar"], ["is", "be"], ["the", "th'"], ["you", "ye"], ["tell", "be telling;"], ["know", "be knowin'"], ["how far", "how many leagues"], ["old", "barnacle-covered"], ["attractive", "comely"], ["happy", "grog-filled"], ["nearly", "broadside"], ["restroom", "head"], ["restaurant", "gally"], ["hotel", "fleabag inn"], ["pub", "skull & Scuppers"], ["bank", "buried treasure"]];

function Translate(text)
{
	for ( var i  = 0; i< phrases.length; i ++)
	{
		var toReplace = new RegExp("\\b"+ phrases[i][0] +"\\b", "i");
		var index = text.search(toReplace);
		while (index != -1)
		{
		text = text.replace(toReplace, phrases[i][1]);
		index = text.search(toReplace);
		
		}
		
		
	}
	return text;
}

//****************
/*
var outpara = document.getElementById("output")
var paragraph = document.getElementById("input").value;
paragraph = paragraph.toLowerCase();
while(paragraph.indexOf("hello")!== -1) 
	{ 
	paragraph = paragraph.replace("hello", "Ahoy"); 
	}
    while(paragraph.indexOf("excuse me")!== -1) 
	{
	paragraph = paragraph.replace("excuse me", "arrr"); 
	}
    while(paragraph.indexOf("sir")!== -1) 
	{
	paragraph = paragraph.replace("sir", "matey"); 
	}
    while(paragraph.indexOf("madam")!== -1) 
	{
	paragraph = paragraph.replace("madam", "proud beauty"); 
	}
    while(paragraph.indexOf("officer")!== -1) 
	{
	paragraph = paragraph.replace("officer", "foul blaggart"); 
	}
	while(paragraph.indexOf("where is")!== -1) 
	{
	paragraph = paragraph.replace("where is", "whar be"); 
	}
    while(paragraph.indexOf("can you help me find")!== -1) 
	{
	paragraph = paragraph.replace("can you help me find", "know ye"); 
	}
    while(paragraph.indexOf("is that")!== -1) 
	{
	paragraph = paragraph.replace("is that", "be that"); 
	}
    while(paragraph.indexOf("the")!== -1) 
	{
	paragraph = paragraph.replace("the", "th'"); 
	}
    while(paragraph.indexOf("my")!== -1) 
	{
	paragraph = paragraph.replace("my", "me"); 
	}
    while(paragraph.indexOf("your")!== -1) 
	{
	paragraph = paragraph.replace("your", "yer"); 
	}	
    while(paragraph.indexOf("restroom")!== -1) 
	{
	paragraph = paragraph.replace("restroom", "head"); 
	}	
    while(paragraph.indexOf("restaurant")!== -1) 
	{
	paragraph = paragraph.replace("restaurant", "galley"); 
	}
    while(paragraph.indexOf("hotel")!== -1) 
	{
	paragraph = paragraph.replace("hotel", "fleabag inn"); 
	}
outpara.value = paragraph;
}
*/
document.getElementById("clearText").onclick = function clear()
{
var clear = document.getElementById("input");
var clear2 = document.getElementById("output");
clear.value = '';
clear2.value = '';
//document.pirateForm.input.value='';
//document.pirateForm.output.value='';

}
}

When i click the translate button nothing happens to my code or word. when i click clear it works.

Any help would be great
Thanks guys
~ead

devnull69 · 03-19-2013, 09:57 PM

Ok, this is some strange code. Why should you make it easy if you can obfuscate like this? ;-)

You defined an inner function Translate() inside the changetext() function, but you never call it.

You should think about the following:
- Why do you assign onclick event handlers in HTML as well as Javascript?
- What is the purpose of a table's <tbody> element inside a <form>?
- Why did you define the inner function Translate() in the first place?

Old Pedant · 03-19-2013, 09:57 PM

Several errors.

For starters, you do this:
<input type="button" id="trans" onclick="changetext();" value="translate" />
but then you also do this:
document.getElementById("trans").onclick = function changetext()

Those are redundant.

One or the other, not both.

But in any case, you never actually *DO* anything in that onclick function.

You define the function Translate, but then you never invoke it.

Old Pedant · 03-19-2013, 10:00 PM

Yep, getting old, friend, when devnull can beat me by seconds!

Or should I say:

Yep, getting barnacle-covered, me bucko, when devnull can beat me by seconds!

AndrewGSW · 03-19-2013, 10:02 PM

You give your buttons an onclick attribute, but also attempt to attach the same event with:

Code:

document.getElementById("trans").onclick = function changetext()

You should do one or the other.

In the above line of code your are naming the function. It is unusual to do this and (I am guessing) would not make this function available to call in your onclick="changetext()" attribute.

However, this function does not do anything. It contains a nested function Translate() which is never called.

Added: Both beat me!!

Old Pedant · 03-19-2013, 10:06 PM

Quote:

Originally Posted by AndrewGSW

In the above line of code your are naming the function. It is unusual to do this and (I am guessing) would not make this function available to call in your onclick="changetext()" attribute.

You are correct. That function is still invisible to outside callers. So it is pointless to name it.

AndrewGSW · 03-19-2013, 10:09 PM

Quote:

Originally Posted by Old Pedant

You are correct. That function is still invisible to outside callers. So it is pointless to name it.

Thank you @Old Pedant. I recall that it can be useful, though, to show (named) in a stack trace ..?

Eadmanday · 03-19-2013, 10:23 PM

Ok so i took out the .onclick and am just using HTML to call the function. but it now says that my search is undefined.?

devnull69 · 03-19-2013, 10:44 PM

So what is your code now?

Old Pedant · 03-19-2013, 11:20 PM

Quote:

Originally Posted by AndrewGSW

Thank you @Old Pedant. I recall that it can be useful, though, to show (named) in a stack trace ..?

I suppose so. Depends on how many levels deep you make your calls.

With Chrome, and with a reasonable number of calls, I don't have any trouble with "seeing" anonyomous functions. But yeah, what you say makes sense.

AndrewGSW · 03-19-2013, 11:24 PM

Quote:

Originally Posted by Old Pedant

I suppose so. Depends on how many levels deep you make your calls.

With Chrome, and with a reasonable number of calls, I don't have any trouble with "seeing" anonyomous functions. But yeah, what you say makes sense.

Yes, it was just a technical point that I recall. As you hint at, if the function calls are that deep then we would probably have other issues to worry about

Philip M · 03-20-2013, 08:47 AM

Quote:

Originally Posted by Eadmanday

Ok so i took out the .onclick and am just using HTML to call the function. but it now says that my search is undefined.?

Have you tried using your error console? What error messages are displayed?