www.webdeveloper.com
Results 1 to 6 of 6

Thread: Converting text input to Semaphore images

  1. #1
    Join Date
    Mar 2012
    Posts
    6

    Converting text input to Semaphore images

    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>

  2. #2
    Join Date
    Mar 2012
    Location
    Saint-Petersburg, Russia
    Posts
    97
    why the semaphore images are not displaying
    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"

  3. #3
    Join Date
    Nov 2010
    Posts
    1,084
    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;
    }

  4. #4
    Join Date
    Mar 2012
    Posts
    6
    Quote Originally Posted by RodionGork View Post
    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).
    Links are 100% correct.
    I thought using
    Code:
    document.getElementById("Results").innerHTML = str1;
    at the end of the semaphore function would have displayed the output images but that doesn't work. I know its something simple i must be missing.

  5. #5
    Join Date
    Mar 2012
    Posts
    6
    Quote Originally Posted by xelawho View Post
    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?

  6. #6
    Join Date
    Nov 2010
    Posts
    1,084
    depends on which browser you like. The firebug plugin for firefox is OK. Some people prefer the error console of Chrome.

    anything but IE<8, really... although being that IE throws its own errors, it's a good idea to learn to use its developer tools as well

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles