Ändern der Kopfzeile Stil funktioniert nicht in Chrome

Question

Ich versuche, das Aussehen meiner h1 zu ändern. Ich habe einen Teil des Codes gemacht, aber mir ist aufgefallen, dass er in Chrome nicht funktioniert. Wer weiß warum? Und wenn Sie einen Vorschlag, wie man besser den Code schreiben:

-Link: 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

Ausgabe erscheint mit dem ul Element zu sein eingebettet #changestyle-btndiv

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

Sobald ich bewegen das Element aus dem div funktioniert es in Chrome gut.

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

Dies ist höchstwahrscheinlich, weil Sie bereits ein Klick-Ereignis auf die #changestyle-btndiv gebunden, so, wenn Sie das li Element zu klicken versuchen, es wird nur das erste Ereignis zu feuern.