html - how to select a specific list item from a ul javascript - Stack Overflow

admin管理员组

文章数量:1022935

I have a function that adds list items that all have the same id to a ul. I want to be able to click a specific list item and change the id of only the one I clicked.

so I'll call the function a few times and have it spit out:

• thing1
• thing2
• thing3

then when I click thing2 the color changes from black to red.

edit: in response to request for the code I tried.

function addlist(){
  var ask = prompt("what is the list item", "title");
  document.getElementById("thing").innerHTML += "<li id='vid'><a href='#'>" + ask+ "</a></li>";

}

I have a function that adds list items that all have the same id to a ul. I want to be able to click a specific list item and change the id of only the one I clicked.

so I'll call the function a few times and have it spit out:

• thing1
• thing2
• thing3

then when I click thing2 the color changes from black to red.

edit: in response to request for the code I tried.

function addlist(){
  var ask = prompt("what is the list item", "title");
  document.getElementById("thing").innerHTML += "<li id='vid'><a href='#'>" + ask+ "</a></li>";

}

• javascript
• html
• css

Share Improve this question Follow edited Apr 21, 2015 at 23:34 Sam Taylor asked Apr 21, 2015 at 22:05 Sam TaylorSam Taylor 111 gold badge11 silver badge44 bronze badges 4

• Please post the code you tried! – zfrisch Commented Apr 21, 2015 at 22:06
• 7 You shouldn't have a bunch of html elements with the same id property. – Bill Criswell Commented Apr 21, 2015 at 22:06
• 1 You shouldn't have two and more items with same id, so if you want them to have same color, use class. – Krab Commented Apr 21, 2015 at 22:07
• As previous ments about id and you have to make your question more clear by regarding some code. – SaidbakR Commented Apr 21, 2015 at 22:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

When you dynamically create the list items, as others have pointed out, you should give them different id="". I am assuming you could implement a solution where you ensure a unique ID and add an onmousedown attribute onto each <li>.

HTML

This assumes you add the onmousedown attribute to each <li> and have given each item a specific ID.

<ul>
    <li id="theone" onmousedown="changeColor(this.id)">Click 1</li>
    <li id="thetwo" onmousedown="changeColor(this.id)">Click 2</li>
    <li id="thethree" onmousedown="changeColor(this.id)">Click 3</li>
</ul>

Javascript

function changeColor(id) {
    //Do whatever you want to the specific element
    var listitem = document.getElementById(id);
    listitem.style.backgroundColor = "red";
}

Demo: http://jsfiddle/codyogden/t8xfeL0p/

You shouldn't use the same id. Instead give them all the same class. http://jsfiddle/anw66zu7/4/

HTML

<ul>
   <li class="black">One</li>
   <li class="black">Two</li>
   <li class="black">Three</li>
</ul>

Javascript

window.onload = function() {
//when window loads

  var blackelements = document.getElementsByClassName("black");
// get all elements with class "black" 

  for(var i=0; i < blackelements.length;i++) {
//create a for loop to go through each of these elements.
//the variable i increments until it reaches the amount of elements
//stored in the variable blackelements 

      var blackelement = blackelements[i];
//get the element with the index of the variable i

    blackelement.addEventListener("click",  function() {
//add an event listener to this element that checks for a mouse click

    this.style.backgroundColor = "red";
//if clicked change the background color to red.

    });
//close out of the event listener
  }
//close out of the for loop

}
//close out of the onload function

Basically what happens is that it looks for all elements with the class "black" - it then loops through them and adds an event listener that looks for the "click" event to each of them. When you click it changes the background color of that specific item "this" to red.

First, your <li>s need to contain buttons to click and onclick call a function:

<input type="button" onclick="functionName(this)">Thing1</input>

In the function, you will call on the object and use the id function to change the id and the backgroundColor to change the color:

function functionName(obj)
{
obj.id = "new id"
obj.backgroundColor = "red"
}

I have a function that adds list items that all have the same id to a ul. I want to be able to click a specific list item and change the id of only the one I clicked.

so I'll call the function a few times and have it spit out:

• thing1
• thing2
• thing3

then when I click thing2 the color changes from black to red.

edit: in response to request for the code I tried.

function addlist(){
  var ask = prompt("what is the list item", "title");
  document.getElementById("thing").innerHTML += "<li id='vid'><a href='#'>" + ask+ "</a></li>";

}

I have a function that adds list items that all have the same id to a ul. I want to be able to click a specific list item and change the id of only the one I clicked.

so I'll call the function a few times and have it spit out:

• thing1
• thing2
• thing3

then when I click thing2 the color changes from black to red.

edit: in response to request for the code I tried.

function addlist(){
  var ask = prompt("what is the list item", "title");
  document.getElementById("thing").innerHTML += "<li id='vid'><a href='#'>" + ask+ "</a></li>";

}

• javascript
• html
• css

Share Improve this question Follow edited Apr 21, 2015 at 23:34 Sam Taylor asked Apr 21, 2015 at 22:05 Sam TaylorSam Taylor 111 gold badge11 silver badge44 bronze badges 4

• Please post the code you tried! – zfrisch Commented Apr 21, 2015 at 22:06
• 7 You shouldn't have a bunch of html elements with the same id property. – Bill Criswell Commented Apr 21, 2015 at 22:06
• 1 You shouldn't have two and more items with same id, so if you want them to have same color, use class. – Krab Commented Apr 21, 2015 at 22:07
• As previous ments about id and you have to make your question more clear by regarding some code. – SaidbakR Commented Apr 21, 2015 at 22:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

When you dynamically create the list items, as others have pointed out, you should give them different id="". I am assuming you could implement a solution where you ensure a unique ID and add an onmousedown attribute onto each <li>.

HTML

This assumes you add the onmousedown attribute to each <li> and have given each item a specific ID.

<ul>
    <li id="theone" onmousedown="changeColor(this.id)">Click 1</li>
    <li id="thetwo" onmousedown="changeColor(this.id)">Click 2</li>
    <li id="thethree" onmousedown="changeColor(this.id)">Click 3</li>
</ul>

Javascript

function changeColor(id) {
    //Do whatever you want to the specific element
    var listitem = document.getElementById(id);
    listitem.style.backgroundColor = "red";
}

Demo: http://jsfiddle/codyogden/t8xfeL0p/

You shouldn't use the same id. Instead give them all the same class. http://jsfiddle/anw66zu7/4/

HTML

<ul>
   <li class="black">One</li>
   <li class="black">Two</li>
   <li class="black">Three</li>
</ul>

Javascript

window.onload = function() {
//when window loads

  var blackelements = document.getElementsByClassName("black");
// get all elements with class "black" 

  for(var i=0; i < blackelements.length;i++) {
//create a for loop to go through each of these elements.
//the variable i increments until it reaches the amount of elements
//stored in the variable blackelements 

      var blackelement = blackelements[i];
//get the element with the index of the variable i

    blackelement.addEventListener("click",  function() {
//add an event listener to this element that checks for a mouse click

    this.style.backgroundColor = "red";
//if clicked change the background color to red.

    });
//close out of the event listener
  }
//close out of the for loop

}
//close out of the onload function

Basically what happens is that it looks for all elements with the class "black" - it then loops through them and adds an event listener that looks for the "click" event to each of them. When you click it changes the background color of that specific item "this" to red.

First, your <li>s need to contain buttons to click and onclick call a function:

<input type="button" onclick="functionName(this)">Thing1</input>

In the function, you will call on the object and use the id function to change the id and the backgroundColor to change the color:

function functionName(obj)
{
obj.id = "new id"
obj.backgroundColor = "red"
}

本文标签： htmlhow to select a specific list item from a ul javascriptStack Overflow