change text color

[Atlanta15Braves]

I am trying to have my .js file have a function that will change the color of the text within the div tag named "ID=test". I have the function (below), but I think I am missing something. I have three buttons in my HTML (red, blue, and black) that should change the text within the div to their respective color, but it isnt working currently.

function ChangeColor(changecolor)
{
document.getElementById('test')
x.type.color = changecolor
}

and my html is this....

<div id="test">
<h2>Test</h2><br /><br / >
<h2>change this text</h2>
</div>
<button type="button" onclick="loadXMLDoc('test1.txt')">Message 1</button>
<button type="button" onclick="loadXMLDoc('test2.txt')">Message 2</button>
<button type="button" onclick="loadXMLDoc('test3.txt')">Original</button> 
<p>
<button type="button" onclick="return ChangeColor()">Red</button> 
<button type="button" onclick="return ChangeColor()">Blue</button>
<button type="button" onclick="return ChangeColor()">Black</button>
</p>
<form id="form1" name="form1" method="post" action="">
</form>
<p>&nbsp;</p>
</body>
</html>

any help appreciated! it should just be some small line of code that I missed or something I think! thanks!

[Atlanta15Braves]

I actually now have these three functions that work....they just need to be combined into one and still have the same functionality.

function ChangeColor(changecolor)
{
document.getElementById('test').style.color = '#B22222';
x.type.color = changecolor
}

function ChangeColor2(changecolor)
{
document.getElementById('test').style.color = '#3063A5';
x.type.color = changecolor
}

function ChangeColor3(changecolor)
{
document.getElementById('test').style.color = '#000000';
x.type.color = changecolor
}

[EvolutionFallen]

Update your button HTML:

<button type="button" onclick="return ChangeColor(this)">Red</button> 
<button type="button" onclick="return ChangeColor(this)">Blue</button>
<button type="button" onclick="return ChangeColor(this)">Black</button>

Then your JS:

function ChangeColor(theButton) {
    document.getElementById('test').style.color = theButton.innerHTML;
}

[IIM]

there are many errors in your code.
First the method doesn't contain variable x.There is no method type in an HTMLEntity.There is no semicolon after end of first line in function

function ChangeColor(changecolor)
{
var x = document.getElementById('test');//creat variable x and add semicolon at the end
x.style.color = changecolor;//ues x.style.color to assign color
}

Secondly,
you are not passing color as string or hexa color while calling method.Change all the three buttons by passing color as parameter

<button type="button" onclick="return ChangeColor('red')">Red</button>

or by passing hexa color codes

 <button type="button" onclick="return ChangeColor('#0000FF')">Blue</button>

[IIM]

@Atlanta15Braves: your code has errors.

x.type.color = changecolor;//missing semicolon

there is no semicolon after last line in your every methods.

[EvolutionFallen]

there is no semicolon after last line in your every methods.

While I agree that you should put in semicolons at the end of each statement, they are not required in javascript.

[Atlanta15Braves]

So something like this?

function ChangeColor(changecolor)
{
var x = document.getElementById('test');
x.style.color = 'red';
x.style.color = 'blue';
x.style.color = 'black';
}

and

<button type="button" onclick="return ChangeColor('red')">Red</button>
<button type="button" onclick="return ChangeColor('blue')">Red</button>
<button type="button" onclick="return ChangeColor('black')">Red</button>

[IIM]

No just assign changecolor to x.style.color.

     function ChangeColor(changecolor)
     {
    var x =                  document.getElementById('test');
       x.style.color = changecolor;
      }

[paulkd]

Apologies, but I'm a big fan of jQuery. There are many solutions to problems. Here is a quick jQuery one.

<div id="test">
    <h2>Test</h2>
    <h2>change this text</h2>
</div>
<button type="button" onclick="loadXMLDoc('test1.txt')">Message 1</button>
<button type="button" onclick="loadXMLDoc('test2.txt')">Message 2</button>
<button type="button" onclick="loadXMLDoc('test3.txt')">Original</button>
<p id="colour-buttons">
    <button>Red</button>
    <button>Blue</button>
    <button>Black</button>
</p>


$(document).ready(function() {

    var colour = {
        'Red': '#B22222',
        'Blue': '#3063A5',
        'Black': '#000000'
    };

    $("#colour-buttons").on("click","button",function(){
        $("#test").css({color:colour[$(this).text()]});
    });

});

It's a little dirty, but if I knew how the project was going to grow, I would change :)

[EvolutionFallen]

So something like this?

I already gave you a solution in the second reply to this thread...