Chromeでヘッダスタイルを変更できない

Question

h1の外観を変更しようとしています。私はコードの一部をやったが、Chromeで動作しないことに気付いた。誰でも知っている理由は？あなたがより良い以下のコードを書くための方法を提案している場合と：

リンク：http://codepen.io/Winterfox/pen/KzRbpZ

window.onload = function() { 

var ownHeading = document.getElementById("heading"); 
var newHeading = document.getElementById("newheading"); 

ownHeading.addEventListener("input", buildLayout); 

function buildLayout() { 
    newHeading.innerHTML = ownHeading.value; 
}; 

/*---------------------------------------------------------*/ 

var changeStyleBtn = document.getElementsByClassName("changestyle-btn"); 
var changeStyleUl = document.getElementById('change-h-font'); 

for (var i = 0; i < changeStyleBtn.length; i++) { 
    changeStyleBtn[i].addEventListener('click', changeStyle, false); 
} 

function changeStyle() { 

    changeStyleUl.style.display = "block"; 
}; 

/*-------------------------------------------------------*/ 

var changeStyleLi = changeStyleUl.getElementsByTagName('li'); 

for (var i = 0; i < changeStyleLi.length; i++) { 
    changeStyleLi[i].addEventListener('click', changeFont, false); 
} 

function changeFont() { 
    // here it stops working in chrome (can't click on lis) 
    alert("clic"); 
    console.log(this); 
}; 

}; 

Answer 1

を発行して、私が移動したら#changestyle-btndiv

<div class="changestyle-btn">+ 
    <ul class="changestyle" id="change-h-font"> 
     <li>1</li> 
     <li>2</li> 
    </ul> 
</div> 

を埋め込まれているul要素であるように思われますdivの要素はChromeでうまく動作します。

<div class="changestyle-btn">+</div> 
<ul class="changestyle" id="change-h-font"> 
    <li>1</li> 
    <li>2</li> 
</ul> 

これは、あなたがそれだけで最初のイベントを発射さli要素をクリックしようとするとあなたはまだ#changestyle-btndivにクリックイベントをバインドしているので、最も可能性が高いです。