CODEWITHSUNDEEP
javascript
Patel
Patel

Reputation: 585

Changing text color onclick

I'm new to JavaScript. I've developed a page using JavaScript in such a way that when I select a color it is applied to the whole page as a background.

I want to develop a page where I can change only the text color. It should get changed (from red to green or something like that), but the page shouldn't get refreshed, and only the selected contents or text color should be changed.

Can any one please help me in this. Any ideas of how to develop it? Thanks in advance.

Upvotes: 10

Views: 172790

Answers (4)

Anurag Giri
Anurag Giri

Reputation: 11

function func()
            {
                document.getElementById('text').style.fontSize='50px';
                document.getElementById('text').style.color='blue';
            }
<p id="text" onclick="func()">Font and color will be changed</p>
<button type="button" onclick="func()">Click here!</button>

Upvotes: 1

elqldk
elqldk

Reputation: 101

   <p id="text" onclick="func()">
    Click on text to change
</p>
<script>
function func()
{
    document.getElementById("text").style.color="red";
    document.getElementById("text").style.font="calibri";
}
</script>

Upvotes: 1

Erik
Erik

Reputation: 20712

A rewrite of the answer by Sarfraz would be something like this, I think:

<script>

    document.getElementById('change').onclick = changeColor;   

    function changeColor() {
        document.body.style.color = "purple";
        return false;
    }   

</script>

You'd either have to put this script at the bottom of your page, right before the closing body tag, or put the handler assignment in a function called onload - or if you're using jQuery there's the very elegant $(document).ready(function() { ... } );

Note that when you assign event handlers this way, it takes the functionality out of your HTML. Also note you set it equal to the function name -- no (). If you did onclick = myFunc(); the function would actually execute when the handler is being set.

And I'm curious -- you knew enough to script changing the background color, but not the text color? strange:)

Upvotes: 7

Sarfraz
Sarfraz

Reputation: 382656

Do something like this:

<script>
function changeColor(id)
{
  document.getElementById(id).style.color = "#ff0000"; // forecolor
  document.getElementById(id).style.backgroundColor = "#ff0000"; // backcolor
}
</script>

<div id="myid">Hello There !!</div>

<a href="#" onclick="changeColor('myid'); return false;">Change Color</a>

Upvotes: 6

Related Questions