CODEWITHSUNDEEP
htmlcssdom
msg
msg

Reputation: 1540

can't apply style to a button on it's click event

I have created a button dynamically in HTML5 + Javascript. I have assigned a click event to that button. When i clicked it, it's content & background color should change. Content is changing fine, but bgcolor is not changing.

my code is;

<style>
.selectBtn{ height:60px;width:80px;background-color:yellow; }
</style>
<script>
var container = document.getElementById('abc');
function dx(){
var Btn = document.createElement('button');
Btn.type = 'button';
Btn.className = 'selectBtn';
Btn.innerHTML = 'SUBMIT';
container.appendChild(Btn);
Btn.onclick = function()
{
this.innerHTML='voted';
this.style.backgroundColor:'blue';
}
dx();
</script>
<body><div id='abc'></div></body>

Upvotes: 1

Views: 149

Answers (3)

Johan Bouveng
Johan Bouveng

Reputation: 565

I could not resist to show how I would have done this, just for fun, and its educational purposes.

window.onload = function(){

    (function(){
        var doc = document; 
        var get = function(id){return doc.getElementById(id);};
        var inject = function(el,str){el.innerHTML = str;return el;};

        inject(get('content'),'<button type="button" id="btn-select">SUBMIT</button>');
        get('btn-select').onclick = function(){inject(this,'Voted!').className = 'voted';};
    })();

};

DEMO: http://jsfiddle.net/ZNfBe/

Upvotes: 0

iConnor
iConnor

Reputation: 20189

You will wan't to change some things 

var container = document.getElementById('abc');
function dx(){
   var Btn = document.createElement('button');
   Btn.className = 'selectBtn';
   Btn.innerHTML = 'SUBMIT';
   container.appendChild(Btn);
   Btn.onclick = function() {
      this.innerHTML='voted';
      this.style.backgroundColor = 'blue';
   }
}

I'm not sure if Btn.type = 'button'; is valid but it sure is pointless and on the style you want to change : to = you only use : in objects

Also you might wan't to use textContent instead of innerHTML

Upvotes: 0

Vivek Sadh
Vivek Sadh

Reputation: 4268

Use = instead of colon. Use this:-

this.style.backgroundColor = "#f47121";

Upvotes: 1

Related Questions