Question

我一直在玩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);

}

Red box changer - codepen

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

此代码将解决您的问题。

Answer 2

有一个拼写错误：它的长度不长，

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

Answer 3

我＆lt; arraySelect.lenght

有长度，而不是长度。

执行Javascript无法在CodePen上运行

3 个答案: