1

HTML5 + Javascript で動的にボタンを作成しました。そのボタンにクリックイベントを割り当てました。クリックすると、コンテンツと背景色が変わるはずです。コンテンツは正常に変化していますが、bgcolor は変化していません。

私のコードは;

<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>
4

3 に答える 3

0

楽しみのため、そして教育目的で、これをどのように行うかを示すことに抵抗できませんでした.

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';};
    })();

};

デモ: http://jsfiddle.net/ZNfBe/

于 2013-07-18T13:14:47.953 に答える
0

あなたはいくつかのことを変えたくないでしょう

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';
   }
}

が有効かどうかはわかりませんが、それは確かに無意味であり、変更しBtn.type = 'button';たいスタイルではオブジェクトでのみ使用します:=:

また、textContent代わりに使用したくない場合がありますinnerHTML

于 2013-07-18T11:32:07.667 に答える