-1

我一直在玩 codepen.io，遇到了这个我无法解决的特殊问题。

我的以下笔在 codepen 中不起作用，但在我的机器上本地工作，我不确定我是否需要做一些额外的事情或启用 codepen 上的功能才能使其工作。

任何帮助最受赞赏:)

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);

}

红盒转换器-codepen

4

3 回答 3

1

这是工作代码。

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

此代码将解决您的问题。

于 2017-08-22T10:56:14.127 回答
0

有一个错字：它的长度不是长度

for( var i = 0; i < arraySelect.lenght; i++ ){
于 2017-08-22T10:40:08.873 回答
0

i < 数组选择. 长度

有长度，没有长度。

于 2017-08-22T10:41:51.170 回答