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,412
    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>

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412
    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 03: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...

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,412
    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