如何在组合中创建代码

how can create in the combination the codes?

本文关键字:创建 代码 组合      更新时间:2023-09-26

我有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>

只有我只需要它,或者你能给我任何提示..我尝试循环,但它不起作用..颜色应该是每个输入名称作为随机..

不清楚你到底在寻找什么。

您想在提示后将 .color 类添加到每个 li 中吗?

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;
  }
}
.color {
        background: green;
    }
    ul {
        list-style: none;
   }
    li {
        width: 100px;
        height: 100px;
        background: gray;
    }
<div id="goster">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

这是你真正想做的吗

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