Reputation: 45
i have 8 li tags.. when i enter name, i want per li tag being green color..but i could not create the combination.. for example when i enter my name, one li tag will be green.. how i can create the combination ?
<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>
only i need it simply or can u give me any tips .. i tried in loop but it didnt work.. the color should be per enter name as random..
Upvotes: 0
Views: 50
Reputation: 1395
Not clear what you are actually looking for.
You want to add the .color class to each li after the prompt?
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>
Upvotes: 2
Reputation: 128
is this what you really want to do
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];
}
Upvotes: 0