Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    JS Help - Implementing Visual Outputs w/in If/Else Statements

    Hello,

    I am new to learning JavaScript and wanted to create a page that would output different visuals according to what the user entered into a prompt. I was hoping to assign certain visual outputs to ranges of letters in the entry as well as based on their position within the users entry.

    For example, if I would enter "Hello" the page would output a square because for the range G-L in the 0 position (first character). Where as if I were to enter "Apple" then the output could be a triangle because of the range A-F in position 0.

    However, my problem was making this visual output happen. Currently when ran the page provides the raw skeleton and returns the info about what was entered. Tells you what characters were entered and for each position what range the letter fell in.

    I just need to be able to tell the page what to do with that information and that happens to be where I am currently stuck.

    Any constructive guidance, advice, hints etc are appreciated and welcomed!

    Thank you.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="created" content="Tue, 22 May 2012 23:51:38 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>


    <script>

    var name;





    function show_prompt()
    {
    var name = prompt("Enter any word (max number of characters is 6) No upper case!:");
    if (name!=null && name!="")


    /* First Position */

    if ((name.charAt(0) == "a") || (name.charAt(0) == "b") || (name.charAt(0) == "c") || (name.charAt(0) == "d") || (name.charAt(0) == "e") || (name.charAt(0) == "f"))
    {
    document.write("<br>The word contains a letter between A and F in the first character. ");
    }
    else
    {
    }

    if ((name.charAt(0) == "g") || (name.charAt(0) == "h") || (name.charAt(0) == "i") || (name.charAt(0) == "j") || (name.charAt(0) == "k") || (name.charAt(0) == "l"))
    {
    document.write("<br>The word contains a letter between G and L in the first character. ");
    }
    else
    {
    }


    if ((name.charAt(0) == "m") || (name.charAt(0) == "n") || (name.charAt(0) == "o") || (name.charAt(0) == "p") || (name.charAt(0) == "q") || (name.charAt(0) == "r") || (name.charAt(0) == "s"))
    {
    document.write("<br>The word contains a letter between M and S in the first character. ");
    }
    else
    {
    }


    if ((name.charAt(0) == "t") || (name.charAt(0) == "u") || (name.charAt(0) == "v") || (name.charAt(0) == "w") || (name.charAt(0) == "x") || (name.charAt(0) == "y") || (name.charAt(0) == "z"))
    {
    document.write("<br>The word contains a letter between T and Z in the first character. ");
    }
    else
    {
    }

    document.write("<br>The first letter is '" + name.charAt(0) + "'. </br>");


    /* Second Position */


    if ((name.charAt(1) == "a") || (name.charAt(1) == "b") || (name.charAt(1) == "c") || (name.charAt(1) == "d") || (name.charAt(1) == "e") || (name.charAt(1) == "f"))
    {
    document.write("<br>The word contains a letter between A and F in the second character. ");
    }
    else
    {
    }

    if ((name.charAt(1) == "g") || (name.charAt(1) == "h") || (name.charAt(1) == "i") || (name.charAt(1) == "j") || (name.charAt(1) == "k") || (name.charAt(1) == "l"))
    {
    document.write("<br>The word contains a letter between G and L in the second character. ");
    }
    else
    {
    }


    if ((name.charAt(1) == "m") || (name.charAt(1) == "n") || (name.charAt(1) == "o") || (name.charAt(1) == "p") || (name.charAt(1) == "q") || (name.charAt(1) == "r") || (name.charAt(1) == "s"))
    {
    document.write("<br>The word contains a letter between M and S in the second character. ");
    }
    else
    {
    }


    if ((name.charAt(1) == "t") || (name.charAt(1) == "u") || (name.charAt(1) == "v") || (name.charAt(1) == "w") || (name.charAt(1) == "x") || (name.charAt(1) == "y") || (name.charAt(1) == "z"))
    {
    document.write("<br>The word contains a letter between T and Z in the second character. ");
    }
    else
    {
    }

    document.write("<br>The second letter is '" + name.charAt(1) + "'. </br>");




    /* Third Position */

    if ((name.charAt(2) == "a") || (name.charAt(2) == "b") || (name.charAt(2) == "c") || (name.charAt(2) == "d") || (name.charAt(2) == "e") || (name.charAt(2) == "f"))
    {
    document.write("<br>The word contains a letter between A and F in the third character. ");
    }
    else
    {
    }

    if ((name.charAt(2) == "g") || (name.charAt(2) == "h") || (name.charAt(2) == "i") || (name.charAt(2) == "j") || (name.charAt(2) == "k") || (name.charAt(2) == "l"))
    {
    document.write("<br>The word contains a letter between G and L in the third character. ");
    }
    else
    {
    }


    if ((name.charAt(2) == "m") || (name.charAt(2) == "n") || (name.charAt(2) == "o") || (name.charAt(2) == "p") || (name.charAt(2) == "q") || (name.charAt(2) == "r") || (name.charAt(2) == "s"))
    {
    document.write("<br>The word contains a letter between M and S in the third character. ");
    }
    else
    {
    }


    if ((name.charAt(2) == "t") || (name.charAt(2) == "u") || (name.charAt(2) == "v") || (name.charAt(2) == "w") || (name.charAt(2) == "x") || (name.charAt(2) == "y") || (name.charAt(2) == "z"))
    {
    document.write("<br>The word contains a letter between T and Z in the third character. ");
    }
    else
    {
    }


    document.write("<br>The third letter is '" + name.charAt(2) + "'. </br>");


    /* Fourth Position */


    if ((name.charAt(3) == "a") || (name.charAt(3) == "b") || (name.charAt(3) == "c") || (name.charAt(3) == "d") || (name.charAt(3) == "e") || (name.charAt(3) == "f"))
    {
    document.write("<br>The word contains a letter between A and F in the fourth character. ");
    }
    else
    {
    }

    if ((name.charAt(3) == "g") || (name.charAt(3) == "h") || (name.charAt(3) == "i") || (name.charAt(3) == "j") || (name.charAt(3) == "k") || (name.charAt(3) == "l"))
    {
    document.write("<br>The word contains a letter between G and L in the fourth character. ");
    }
    else
    {
    }


    if ((name.charAt(3) == "m") || (name.charAt(3) == "n") || (name.charAt(3) == "o") || (name.charAt(3) == "p") || (name.charAt(3) == "q") || (name.charAt(3) == "r") || (name.charAt(3) == "s"))
    {
    document.write("<br>The word contains a letter between M and S in the fourth character. ");
    }
    else
    {
    }


    if ((name.charAt(3) == "t") || (name.charAt(3) == "u") || (name.charAt(3) == "v") || (name.charAt(3) == "w") || (name.charAt(3) == "x") || (name.charAt(3) == "y") || (name.charAt(3) == "z"))
    {
    document.write("<br>The word contains a letter between T and Z in the fourth character. ");
    }
    else
    {
    }


    document.write("<br>The fourth letter is '" + name.charAt(3) + "'. </br>");


    /* Fifth Position */


    if ((name.charAt(4) == "a") || (name.charAt(4) == "b") || (name.charAt(4) == "c") || (name.charAt(4) == "d") || (name.charAt(4) == "e") || (name.charAt(4) == "f"))
    {
    document.write("<br>The word contains a letter between A and F in the fifth character. ");
    }
    else
    {
    }

    if ((name.charAt(4) == "g") || (name.charAt(4) == "h") || (name.charAt(4) == "i") || (name.charAt(4) == "j") || (name.charAt(4) == "k") || (name.charAt(4) == "l"))
    {
    document.write("<br>The word contains a letter between G and L in the fifth character. ");
    }
    else
    {
    }


    if ((name.charAt(4) == "m") || (name.charAt(4) == "n") || (name.charAt(4) == "o") || (name.charAt(4) == "p") || (name.charAt(4) == "q") || (name.charAt(4) == "r") || (name.charAt(4) == "s"))
    {
    document.write("<br>The word contains a letter between M and S in the fifth character. ");
    }
    else
    {
    }


    if ((name.charAt(4) == "t") || (name.charAt(4) == "u") || (name.charAt(4) == "v") || (name.charAt(4) == "w") || (name.charAt(4) == "x") || (name.charAt(4) == "y") || (name.charAt(4) == "z"))
    {
    document.write("<br>The word contains a letter between T and Z in the fifth character. ");
    }
    else
    {
    }


    document.write("<br>The fifth letter is '" + name.charAt(4) + "'. </br>");


    /* Sixth Position */


    if ((name.charAt(5) == "a") || (name.charAt(5) == "b") || (name.charAt(5) == "c") || (name.charAt(5) == "d") || (name.charAt(5) == "e") || (name.charAt(5) == "f"))
    {
    document.write("<br>The word contains a letter between A and F in the sixth character. ");
    }
    else
    {
    }

    if ((name.charAt(5) == "g") || (name.charAt(5) == "h") || (name.charAt(5) == "i") || (name.charAt(5) == "j") || (name.charAt(5) == "k") || (name.charAt(5) == "l"))
    {
    document.write("<br>The word contains a letter between G and L in the sixth character. ");
    }
    else
    {
    }


    if ((name.charAt(5) == "m") || (name.charAt(5) == "n") || (name.charAt(5) == "o") || (name.charAt(5) == "p") || (name.charAt(5) == "q") || (name.charAt(5) == "r") || (name.charAt(5) == "s"))
    {
    document.write("<br>The word contains a letter between M and S in the sixth character. ");
    }
    else
    {
    }


    if ((name.charAt(5) == "t") || (name.charAt(5) == "u") || (name.charAt(5) == "v") || (name.charAt(5) == "w") || (name.charAt(5) == "x") || (name.charAt(5) == "y") || (name.charAt(5) == "z"))
    {
    document.write("<br>The word contains a letter between T and Z in the sixth character. ");
    }
    else
    {
    }


    document.write("<br>The sixth letter is '" + name.charAt(5) + "'. </br>");

    /* Current method for having some sort of output to help verify that I have something correct.
    */


    {
    document.write("<p>The word you typed is" + " " + name.toLowerCase() + ".</p>");
    }
    }





    function init(event) {
    name =
    document.write(name)


    }


    </script>

    </head>
    <body>



    <!-- <canvas id="visual" width="150" height="150"></canvas> -->

    <input style="text-align: center;" type="button" onclick="show_prompt()" value="Click on me!" />


    <!-- Need the Canvas to appear AFTER the prompt has been entered -->





    </body>
    </html>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    simplified somewhat - you will have to provide your own image paths, and validate in case of incorrect entries...
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    img{
    display:none;
    }
    </style>
    
    </head>
    <body>
    <input type="text" maxlength="6" id="txt" />
    <input type="button" value="show me" onclick="getLetters()"/>
    <div id="results">
    <img src=""></img>
    <img src=""></img>
    <img src=""></img>
    <img src=""></img>
    <img src=""></img>
    <img src=""></img>
    </div>
    <script>
    
    function getLetters(){
    var pics=document.getElementById("results").getElementsByTagName("img")
    for (var a = 0; a < pics.length; a++) {
    pics[a].style.display="none"
    	}
    var str=document.getElementById("txt").value.toLowerCase()
    for (var i = 0; i < str.length; i++) {
    pics[i].src=getPics(str[i])
    pics[i].style.display="block"
    	}
    }
    
    function getPics(lett){
    if (lett.charCodeAt()>=97&&lett.charCodeAt()<=102){
    var pic="tri.jpg"
    } else if (lett.charCodeAt()>=103&&lett.charCodeAt()<=108){
    var pic="sqr.jpg"
    } else if (lett.charCodeAt()>=109&&lett.charCodeAt()<=115){
    var pic="circ.jpg"
    } else if (lett.charCodeAt()>=116&&lett.charCodeAt()<=122){
    var pic="rect.jpg"
    	}
    return pic;	
    }
    </script>
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    itzjt (06-06-2012)

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ... and the "no image file" version

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .shapes{
    float:left;
    margin-right:10px;
    }
    </style>
    
    </head>
    <body>
    <input type="text" maxlength="6" id="txt" />
    <input type="button" value="show me" onclick="getLetters()"/>
    <div id="results">
    </div>
    <script>
    
    function getLetters(){
    var res=document.getElementById("results");
    while (res.hasChildNodes()) {
    res.removeChild(res.firstChild)
    	}
    var str=document.getElementById("txt").value.toLowerCase()
    for (var i = 0; i < str.length; i++) {
    res.appendChild(getPics(str[i]))
    	}
    }
    
    function getPics(lett){
    var thediv=document.createElement("div")
    thediv.className="shapes"
    if (lett.charCodeAt()>=97&&lett.charCodeAt()<=102){
    thediv.style.width="50px";
    thediv.style.height="50px";
    thediv.style.backgroundColor="red";
    } else if (lett.charCodeAt()>=103&&lett.charCodeAt()<=108){
    thediv.style.width="0px";
    thediv.style.height="0px";
    thediv.style.borderLeft="25px solid transparent";
    thediv.style.borderRight="25px solid transparent";
    thediv.style.borderBottom="50px solid blue";
    } else if (lett.charCodeAt()>=109&&lett.charCodeAt()<=115){
    thediv.style.width="50px";
    thediv.style.height="0px";
    thediv.style.borderLeft="25px solid transparent";
    thediv.style.borderRight="25px solid transparent";
    thediv.style.borderBottom="50px solid green";
    } else if (lett.charCodeAt()>=116&&lett.charCodeAt()<=122){
    thediv.style.width="0px";
    thediv.style.height="0px";
    thediv.style.borderLeft="25px solid transparent";
    thediv.style.borderRight="25px solid transparent";
    thediv.style.borderTop="50px solid yellow";
    	}
    return thediv;	
    }
    </script>
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    itzjt (06-07-2012)

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for your help Xelawho!

    I have a question in regards to the "no image file" version you provided.

    } else if (lett.charCodeAt()>=103&&lett.charCodeAt()<=108){
    thediv.style.width="0px";
    thediv.style.height="0px";
    thediv.style.borderLeft="25px solid transparent";
    thediv.style.borderRight="25px solid transparent";
    thediv.style.borderBottom="50px solid blue";
    Say I wanted to create different outputs based on position, would I be able to do something like this:

    Where I changed what position the script looks at for a certain step. If this is correct would it be an additional else if following what you provided me?

    } else if (lett.charCodeAt(2)>=103&&lett.charCodeAt(2)<=108){
    thediv.style.width="0px";
    thediv.style.height="0px";
    thediv.style.borderLeft="25px solid transparent";
    thediv.style.borderRight="25px solid transparent";
    thediv.style.borderTop="75px solid cyan";
    Currently these are the changes I attempted to make. I was able to successfully make the first step output squares of different colors, and can alter size as well. However I attempted to add additional else/ifs for other positions and they don't appear to be working, as triangles are not being returned based on a letters position.

    function getPics(lett){
    var thediv=document.createElement("div")
    thediv.className="shapes"

    /* POSITION 0
    Squares */

    if (lett.charCodeAt(0)>=97&&lett.charCodeAt(0)<=102){
    thediv.style.width="50px";
    thediv.style.height="50px";
    thediv.style.backgroundColor="red";
    } else if (lett.charCodeAt(0)>=103&&lett.charCodeAt(0)<=108){
    thediv.style.width="50px";
    thediv.style.height="50px";
    thediv.style.backgroundColor="blue";
    } else if (lett.charCodeAt(0)>=109&&lett.charCodeAt(0)<=115){
    thediv.style.width="50px";
    thediv.style.height="50px";
    thediv.style.backgroundColor="green";
    } else if (lett.charCodeAt(0)>=116&&lett.charCodeAt(0)<=122){
    thediv.style.width="50px";
    thediv.style.height="50px";
    thediv.style.backgroundColor="yellow";

    /* POSITION 1
    Upright Triangles */


    } else if (lett.charCodeAt(1)>=97&&lett.charCodeAt(1)<=102){
    thediv.style.width="0px";
    thediv.style.height="0px";
    thediv.style.borderLeft="25px solid transparent";
    thediv.style.borderRight="25px solid transparent";
    thediv.style.borderBottom="50px solid red";
    } else if (lett.charCodeAt(1)>=103&&lett.charCodeAt(1)<=108){
    thediv.style.width="0px";
    thediv.style.height="0px";
    thediv.style.borderLeft="25px solid transparent";
    thediv.style.borderRight="25px solid transparent";
    thediv.style.borderBottom="50px solid blue";
    } else if (lett.charCodeAt(1)>=109&&lett.charCodeAt(1)<=115){
    thediv.style.width="0px";
    thediv.style.height="0px";
    thediv.style.borderLeft="25px solid transparent";
    thediv.style.borderRight="25px solid transparent";
    thediv.style.borderBottom="50px solid green";
    } else if (lett.charCodeAt(1)>=116&&lett.charCodeAt(1)<=122){
    thediv.style.width="0px";
    thediv.style.height="0px";
    thediv.style.borderLeft="25px solid transparent";
    thediv.style.borderRight="25px solid transparent";
    thediv.style.borderBottom="50px solid yellow";
    }
    return thediv;
    }

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,989
    Thanks
    56
    Thanked 557 Times in 554 Posts
    ... in the interests of cutting down on repetition, it seems to me that regardless of the shape rendered, you want the first one to be red, second blue, third green and fourth yellow - is that correct?


  •  

    Posting Permissions

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