CODEWITHSUNDEEP
javascriptbuttoncolorsonclick
user2375017
user2375017

Reputation:

Change text color with Javascript?

I want to change the color of a title when a button is clicked. This is my code, but it's not working and I can't figure out why not...

var about;   
function init() { 
    about = document.getElementById("about").innerHTML;
    about.style.color = 'blue';
}
<div id="about">About Snakelane</div>
 
<input type="image" src="http://www.blakechris.com/snakelane/assets/about.png" onclick="init()" id="btn">

Upvotes: 25

Views: 218133

Answers (4)

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

use ONLY 

function init() { 
    about = document.getElementById("about");
    about.style.color = 'blue';
}

.innerHTML() sets or gets the HTML syntax describing the element's descendants., All you need is an object here.

Demo

Upvotes: 8

Nitin Chaurasia
Nitin Chaurasia

Reputation: 263

Try below code:

$(document).ready(function(){
$('#about').css({'background-color':'black'});    
});

http://jsfiddle.net/jPCFC/

Upvotes: 4

Quentin
Quentin

Reputation: 944533

innerHTML is a string representing the contents of the element.

You want to modify the element itself. Drop the .innerHTML part.

Upvotes: 0

Sirko
Sirko

Reputation: 74106

You set the style per element and not by its content:

function init() { 
  document.getElementById("about").style.color = 'blue';
}

With innerHTML you get/set the content of an element. So if you would want to modify your title, innerHTML would be the way to go.

In your case, however, you just want to modify a property of the element (change the color of the text inside it), so you address the style property of the element itself.

Upvotes: 47

Related Questions