www.webdeveloper.com
Results 1 to 8 of 8

Thread: toLowerCase function help

  1. #1
    Join Date
    Feb 2013
    Posts
    4

    toLowerCase function help

    Hello, just having a little trouble with the use of the toLowerCase() function. My project is to edit text in a text area. I have a basic change colour function which gets the user to put either red, blue, green or yellow into it to a
    textbox. It usessome if statements, which was working fine until I added the toLowerCase() function. Here is my
    code.

    for JavaScript:

    function changeColour() {
    var color = document.forms["myForm2"]["myTextBox"].value;
    colour = color.toLowerCase();
    if(colour == "red") {
    document.myForm1.myTextArea.style.color ="red";
    } else if (colour == "blue") {
    document.myForm1.myTextArea.style.color ="blue";
    } else if (colour == "green") {
    document.myForm1.myTextArea.style.color ="green";
    } else if (colour == "yellow") {
    document.myForm1.myTextArea.style.color ="yellow";
    } else { alert("Please enter red, blue green or yellow")
    }

    for the html:


    <script type="text/javascript" src="functionsJS.js">
    </script>
    <form name="myForm1">
    <textarea rows="4" cols="50" id="myTextArea" name="myTextArea">
    </textarea>
    </form>

    <form name="myForm2">
    Colour:<input type="text" name="myTextBox" value="red, blue, green or yellow.">
    </form>
    <button onclick="changeColour()">Change Colour</button>

  2. #2
    Join Date
    Feb 2013
    Posts
    4
    why doesn't the toLowerCase function work?

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Nothing wrong with you .toLowerCase().
    Just applying it incorrectly.

    See this simplified version with some extra color settings...
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    </head>
    <body>
    <form id="myForm" action="" method="post" onsubmit="return false">
     <textarea rows="4" cols="50" id="myTextArea">TextArea</textarea>
     Colour:<input type="text" id="myTextBox" value="red, blue, green or yellow." onfocus="this.value=''">
     <button id="btnColour" onclick="changeColour()">Change Colour</button> 
    </form>
    
    <script type="text/javascript">
    
    function changeColour() {
      var color = document.getElementById("myTextBox").value;
      var colour = color.toLowerCase();
      if ((colour == "red") || (colour == 'blue') || (colour == 'green') || (colour == 'yellow')) {
        document.getElementById('myTextBox').style.color = colour; 
        document.getElementById('btnColour').style.backgroundColor = colour; 
        document.getElementById('myTextArea').style.color = colour; 
      } else { alert("Please enter red, blue green or yellow"); }
    }
    </script>
    
    </body>
    </html>

  4. #4
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by HarleyRowland View Post
    why doesn't the toLowerCase function work?
    Your code as posted has a syntax error, which when fixed will allow it to work.

    Use the error console.

    The <form> tag should not be given a name attribute.

    Code:
    <!DOCTYPE html >
    <html>
    <head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    
    <script type='text/javascript'>
    
    function changeColour( theForm ) 
    {
      var color =
      {
        red : "red", 
        blue  : "blue",
        green : "green",
        yellow : "yellow"
       
      }[ theForm["myTextBox"].value.toLowerCase() ];
      
      color ?  document.getElementById( 'myForm1').myTextArea.style.color = color 
            :  alert("Please enter red, blue green or yellow");
        
      return false;  
    }
    
    </script>
    
    <form id="myForm1">
    <textarea rows="4" cols="50" id="myTextArea" name="myTextArea" style='font-weight:bold;font-size:1.5em'>
    TEXT
    </textarea>
    </form>
    
    <form>
    Colour:<input type="text" name="myTextBox" value="red, blue, green or yellow.">
    <button onclick="return changeColour( this.form )">Change Colour</button> </body>
    </form>
    
    </html>
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Logic Ali:

    That was an interesting solution.
    Could you expand on what this part:
    Code:
    function changeColour( theForm ) {
      var color = {
        red : "red", 
        blue  : "blue",
        green : "green",
        yellow : "yellow"
      }[ theForm["myTextBox"].value.toLowerCase() ];
    is doing. I understand the ternary statement right below it.

    How does putting the value within the brackets [ ] get the color values?
    I guess I'm unclear on this part of the concept.

    I also noticed you could alter the ternary statement to:
    Code:
      color ?  theForm["myTextArea"].style.color = color 
            :  alert("Please enter red, blue green or yellow");
    since you already have 'theForm' parameter in the function.
    Last edited by JMRKER; 02-15-2013 at 02:15 PM.

  6. #6
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by JMRKER View Post

    How does putting the value within the brackets [ ] get the color values?
    It's just an associative lookup on an object.

    I also noticed you could alter the ternary statement to:
    Code:
      color ?  theForm["myTextArea"].style.color = color 
            :  alert("Please enter red, blue green or yellow");
    since you already have 'theForm' parameter in the function.
    For whatever reason, there are two forms in that document...
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Thanks.

    I noticed the 2 <form> tags myself and removed one for my testing.
    I saw no need for two (???)

  8. #8
    Join Date
    Feb 2013
    Posts
    4
    Okay, it works now thanks for all of your help

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