如何在组合中创建代码?

时间:2016-07-14 07:53:47

标签: javascript html

我有8个li标签..当我输入名称时,我希望每个li标签是绿色..但我无法创建组合..例如,当我输入我的名字时,一个li标签将是绿色..我怎么能创造这个组合?

    <style>
    .color {
        background: green;
    }

    ul {
        list-style: none;
   }

    li{

        width: 100px;
        height: 100px;
        background: gray;
    }
    </style>

    <div id="goster">
    <ul>
   <li id="item"></li>
      <li id="item"></li>
      <li id="item"></li>
      <li id="item"></li>
      <li id="item"></li>
      <li id="item"></li>
      <li id="item"></li>
      <li id="item"></li>

    </ul>

  </div>

  <script>


        var name = prompt("Enter your name:", ""),
        li = 8,
        item="";
        while(++i < li){
            var item=document.getElementsByTagName("li")[i].setAttribute("class", "color");
            document.getElementById("goster").innerHTML=name[item];
        }

  </script>

只有我需要它或者你可以给我任何提示..我试过循环但它没有工作..颜色应该是每个输入名称随机..

2 个答案:

答案 0 :(得分:2)

不清楚你究竟在寻找什么。

您想在提示符后为每个li添加.color类吗?

&#13;
&#13;
PHP
&#13;
var name = prompt("Enter your name:", "");
var items = document.getElementsByTagName("li");

for(let i = 0; i < items.length; i++) {
  
  let item = items[i];
  
  if(item.className.indexOf('color') < 0) {
    item.className += 'color';
    item.textContent = name;
    break;
  }
}
&#13;
.color {
        background: green;
    }

    ul {
        list-style: none;
   }

    li {

        width: 100px;
        height: 100px;
        background: gray;
    }
&#13;
&#13;
&#13;

答案 1 :(得分:0)

这就是你真正想做的事情

for (var i = 0;i< li;i++){
        var item=document.getElementsByTagName("li")[i].setAttribute("class", "color")
 document.getElementById("goster").children[0].children[i].textContent=name[item];
}