- Joined
- Jun 3, 2010
- Sythe Gold
- 291
- Messages
- 2,223
So I have been really stuck on the issue of trying to change text color. I have found a way to change text color with HTML and calling an id in a function that changes the color, but how to I get it to do that to a variable in my script that contains text (i.e. the car color red would be red colored text)
Here is the code below. The rest of it was just to help me learn and study the scoping of variables and functions and lots of notes xD
Here is the code below. The rest of it was just to help me learn and study the scoping of variables and functions and lots of notes xD
Code:
<html>
<header>
<title>Testing Variables and Scope</title>
<!--button-->
<button type="button" onclick="myFunction()">Try it</button>
</header>
<h2 id="color">This is an example h2</h2>
<script language="javascript">
//this variable is defined outside a function, making it globally scoped. (global scope: All scripts and functions on a web page can access it.)
var global="This variable is defined outside of a function, making it globally scoped <br />";
//global variable accessed outside of a function
document.write ("Calling global outside a function: "+ global);
function func ()
{
//accessing the global variable inside of a function
document.write ("Calling global inside a function: "+ global);
}
//activating global function test
func();
function func2 ()
{
//this varuable is defined outside a function, making it locally scoped. (local scope: They can only be accessed within the function.)
var local="This variable is defined in a function, making it locally scoped to the function <br />";
//accessing the local variable inside a function
document.write ("Calling local inside a function: "+ local);
//this variable was created to test identical local variables with function 3 below
var duplicate="this text is different and shouldn't be shown or accessed in function 3";
}
//activating local function test
//Local variables are created when a function starts, and deleted when the function is completed.
func2();
document.write ("Calling local outside a function: N/A (ERROR) <br />");
//attempting to activate a local variable outside of the function it is scoped (not possible)
//document.write (local);
//Since local variables are only recognized inside their functions, variables with the same name can be used in different functions.
function func3 ()
{
var duplicate="This local variable is named the same as another local variable, but contains different text. <br />";
document.write (duplicate);
}
//activating identical local variable test
func3();
//Note of caution: if you declare a variable without the var keyword preceding (before) it, it would automatically become a globally scoped variable, no matter where it is declared.
function func4 ()
{
novar = "This globally scoped variable was created inside a function by removing the var tag before defining a variable";
}
//activating no var tag function
func4();
//using globally scoped variable outside the function it was created in
document.write (novar);
//----------------MYFUNCTION-ChangeRed
function myFunction()
{ document.getElementById("color").style.color="#ff0000";
}
//providing line breaks for organization
document.write ("<br /> <br />");
document.write ("Testing Objects and Properties Below <br />");
//You can apply multiple properties (name:value) to a single variable by using the following code
var car = {type:"Ford", model:"F150", color:"Red"};
//You can access a variables properties using one of the following methods (both will show the same)
document.write ("<br /> Car Brand: "+car.type+"<br />");
document.write ("Car Brand: "+car["type"]);
//calling all properties of the car
document.write ("<br /> Car Model: "+car["model"]);
document.write ("<br />Car Color: "+car["color"]);
//alert box
alert("this is a test alert box");
</script>
</html>
