Question 53510 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to change inner text of array of equal elements in javascript?

How can I load the length (li index-1) of li into each li instead of X?

var element = document.getElementById("ul");
var numberOfChildren = element.getElementsByTagName('*').length
//document.write(numberOfChildren) ;
for (let x = 0; x < numberOfChildren; x++) {
  let newCount = x + 1;
  document.getElementsByTagName("li").innerHTML = newCount;
  console.log("li = " + newCount);
}
<ul id="ul">
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
</ul>

https://jsfiddle.net/anoopsuda/mov2b0p5/3/

Tags:

3

Answers


  1. 0

    You can do this by setting the innerHTML of each li rather than the group of all list elements. A working version of your code is below:

    var element = document.getElementById("ul");
var children = element.getElementsByTagName('*');
var numberOfChildren = children.length;
document.write(numberOfChildren);

for (let x = 0; x < numberOfChildren; x++) {
    let newCount = x + 1;
    children[x].innerHTML = newCount;
    console.log("li = " + newCount);
}
    Login or Signup to reply.
  2. 0

    As I understand your question, you can use querySelectorAll with li and iterate with forEach:

    let n = 1;
document.querySelectorAll("li").forEach(li => {
li.innerText = n;
n++;
});
    <ul id="ul">
<li>X</li>
<li>X</li>
<li>X</li>
<li>X</li>
<li>X</li>
<li>X</li>
</ul>
    Login or Signup to reply.
  3. 0

    Two possible approaches are below, with explanatory comments in the JavaScript to explain what’s happening:

    // retrieving the <ul> element via its id, and then retrieving a
// collection of its children:
const children = document.getElementById("ul-1").children;

// using the same for loop as before, in your attempt, though
// as we use a collection of elements, we test that x is less-than
// the length of the children collection:
for (let x = 0; x < children.length; x++) {
    // retrieving the xth element from the collection, and
  // settings its content to the result of the sum of x + 1:
  children[x].textContent = x + 1;
}

// here we retrieve all <li> elements within the element of
// id="ul-2", and iterate over them with NodeList.prototype.forEach():
document.querySelectorAll("#ul-2 li").forEach(
    // using an Arrow function to pass in a reference to the current
  // Array-element ('el'), and the index of that Array-element ('index');
  // within the function body we set the text-content of the
  // node to the sum of index + 1:
    (el, index) => el.textContent = index + 1
);
    *,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
  inline-size: clamp(20rem, 50%, 1000px);
  justify-content: center;
  margin-inline: auto;
  padding-block: 1em;
}

ul {
  flex-basis: auto;
  flex-grow: 1;
  text-align: start;
}

ul::before {
  border-block-end: 2px solid currentColor;
  content: "#" attr(id);
  display: block;
}

::marker {
  content: '0BB';
}

li {
  margin-inline-start: 1.5rem;
}

li:not(:first-child) {
  margin-block-start: 0.5rem;
}
    <main>
  <ul id="ul-1">
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
  </ul>
  <ul id="ul-2">
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
    <li>X</li>
  </ul>
</main>

    References:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search