CodePenでJavascriptが動作しない

Question

codepen.ioで遊んでいて、解決できない問題がありました。

私の次のペンはコードペインでは動作しませんが、私のマシンではローカルで動作します。何か特別な作業が必要なのか、コードペンの機能を有効にする必要があるのか​​分かりません。

最も感謝すべてのヘルプ:)

HTML

<span>Background color:</span> 
    <select id="background"> 
    <option value="Red">Red</option> 
    <option value="Green">Green</option> 
    <option value="Blue">Blue</option> 
    </select> 

    <span>Width:</span> 
    <select id="width"> 
    <option value="100px">100px</option> 
    <option value="200px">200px</option> 
    <option value="300px">300px</option> 
    </select> 

    <span>height:</span> 
    <select id="height"> 
    <option value="100px">100px</option> 
    <option value="200px">200px</option> 
    <option value="300px">300px</option> 
    </select> 

    <br/> 
    <br/> 

    <div id="content" style="background:red; width:100px; height:100px;"></div> 

JS

// array of virtual DOM objects 

var arraySelect = document.getElementsByTagName('select'); 

var content = document.getElementById('content'); 

// function 
function dropdownStyles() { 

// apply the value from the select options (when applied) has the style values for content. 

    var style = this.id; 
    var value = this.value; 

    content.style[style] = value; 
} 

// create a loop to iterate each select option in document add an event listener to each. 

for(var i = 0; i < arraySelect.lenght; i++){ 

    // with dropdownStyles() the function will get executed so that is why we don't add the brackets 

arraySelect[i].addEventListener('change',dropdownStyles); 

} 

Red box changer - codepen

Answer 1

タイプミスがあります： それは長さiの<

for(var i = 0; i < arraySelect.lenght; i++){ 

Answer 2

をな長さではないarraySelect.lenght

だな長さではなく、長さがあります。

Answer 3

ここに作業コードがあります。

var arraySelect = document.querySelectorAll('select'); 

var content = document.getElementById('content'); 
arraySelect.forEach(function(v){ 
    v.addEventListener('change',dropdownStyles); 
}) 
function dropdownStyles() { 
    var style = this.id; 
    var value = this.value; 
    content.style[style] = value; 
} 

このコードは問題を解決します。