toLowerCase function help

**HarleyRowland** · 02-15-2013 08:33 AM

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>

**HarleyRowland** · 02-15-2013 08:34 AM

why doesn't the toLowerCase function work?

**Logic Ali** · 02-15-2013 01:31 PM

Originally Posted by HarleyRowland

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>

**JMRKER** · 02-15-2013 01:00 PM

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>

**JMRKER** · 02-15-2013 02:06 PM

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.

**Logic Ali** · 02-15-2013 02:46 PM

Originally Posted by JMRKER

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...

**JMRKER** · 02-15-2013 03:20 PM

Thanks.

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

**HarleyRowland** · 02-17-2013 10:29 AM

Okay, it works now thanks for all of your help

Thread: toLowerCase function help

Thread Tools

Display

Hybrid View

toLowerCase function help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions