Right, i'm trying to convert any input(via a prompt box) into semaphore images. Each semaphore image is named a.gif, b.gif etc etc and a space is called interval.gif.
I've been staring at this all evening now and i cannot establish why the semaphore images are not displaying. Apologies for it not being the tidiest code in the world, i'm still relatively new to JS
Any ideas/suggestions?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
body{font-family: Arial,sans-serif; background-color: #86bfc9;}
#content{float:right; width: 75%;}
</style>
</head>
<body>
<h1>Semaphore Tutor</h1>
<br/><br/>
<input type="button" onclick="show_prompt()" value="Click To Enter Phrase" />
<br/><br/>
<input type="button" onclick="semaphore(phrase)" value="Display Semaphore" />
<br/><br/>
<div id="content"> <div id = "Results"></div> </div>
</body>
<script type="text/javascript">
function show_prompt()
{
var phrase=prompt("Please enter your sentence","");
document.getElementById("Results").innerHTML = "Your phrase was:" + phrase;
}
function semaphore(phrase)
{
var len = phrase.length;
var str1 = "";
var str;
for (var i=0;i<len;i++)
{
if(/\s/.test(phrase[i]))
{
str = "images/semaphore/interval.gif";
} else
{
str = "images/semaphore/" + phrase[i] + ".gif";
}
str1 = str1 + '<img src="' + str + '">';
}
return str1;
}
</script >
</html>
Just because you have no any statements in your script which should display the images. Your code only prepares html fragments which, if inserted into document, would make image (if links are correct).
If you've fetched this code from some other author, I recommend you to try and read some tutorial on this whole stuff - it do not require as much time as you think.
Apologies for it not being the tidiest code in the world
Though you are welcome and pardoned, I suppose people are often averted from discussing anything about poorly styled code. Spend some time reading this: http://google-styleguide.googlecode....criptguide.xml
At least "JavaScript Style Rules / Code Formatting"
you might take a look at a debugger as well - your phrase variable is local to your show_prompt function but needs to be available to the semaphore one as well. Probably the easiest way to solve this is just by making phrase into a global variable:
Code:
var phrase;
function show_prompt()
{
phrase=prompt("Please enter your sentence","");
document.getElementById("Results").innerHTML = "Your phrase was:" + phrase;
}
Just because you have no any statements in your script which should display the images. Your code only prepares html fragments which, if inserted into document, would make image (if links are correct).
you might take a look at a debugger as well - your phrase variable is local to your show_prompt function but needs to be available to the semaphore one as well. Probably the easiest way to solve this is just by making phrase into a global variable:
Thank you, i was concerned as to whether the semaphore function would pick up on the variable. But your code makes total sense so thank you for that snippet. Any recommendations on a debugger?
Reply With Quote
Originally Posted by RodionGork
Bookmarks