Changing text values of
with less than 3 characters

Question

I'm making a list for the new football season where I want to plugin the results for each played round and display it in a list. I want to change the value of all "li" with less than 3 characters and instead display

"To be played"

I've tried coding a loop that looks through all elements with the tagName "li" and if the element has less than three characters, it replaces its innerHTML with "To be played".

<div>
  <ul id="allResults">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>
<script>
var parentGame = document.getElementById("allResults");
var listGames = parentGame.getElementsByTagName("li");
var listGamesLength = listGames.length;
for (var i = 0; i < listGamesLength; i++) {
  if (listGamesLength[i] < 3) {
    listGames[i].innerHTML = "To be played";
  }
}
</script>

I'm quite sure that there is a lot of things wrong with my code, but I would like to know how to fix it - Or rewrite it in case it's completely wrong.

Thanks for the help! :)

When you are getting those `li` elements, check `.innerHTML.length` for the true length inside of `li` — Dominik Matis, Aug 04 '19 at 14:19

score 1 · Answer 1 · answered Aug 04 '19 at 14:22

You were close. You missed a closing " on the id attribute. You could also use querySelectorAll to get each li element and lessen the amount of queries to the DOM. The biggest miss was that you were checking listGames.length which gives you the amount of li elements, not the amount of characters of each element. The correct way would be to check innerHTML.length for said element.

Maybe something like this? I changed the last one to 100 to better illustrate the result.

var listGames = document.querySelectorAll("#allResults li");
listGames.forEach(game => {
  if (game.innerHTML.length < 3) {
    game.innerHTML = "To be played";
  }
});

<div>
  <ul id="allResults">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>100</li>
  </ul>
</div>

score 1 · Answer 2 · edited Aug 04 '19 at 14:29

1

Your lines:

 if (listGamesLength[i] < 3) {
   howManyNodes[i].innerHTML = "To be played";
 }

Probably ought to be:

 if (listGames[i].innerHTML.length < 3) {
     listGames[i].innerHTML = "To be played";
 }

edited Aug 04 '19 at 14:29

Chris

57,622
19
111
137

answered Aug 04 '19 at 14:26

score 0 · Answer 3 · answered Aug 04 '19 at 14:25

if (listGamesLength[i] < 3) { checks the length of the list against the number 3, not the length of the content of any entry in the list. For that you want:

if (listGames[i].textContent.length < 3) {

Aside from that, your code is okay other than using howManyNodes rather than listGames. But you can make it much simpler:

document.querySelectorAll("#allResults li").forEach(li => {
    if (li.textContent.length < 3) {
        li.textContent = "To be played";
    }
});

The NodeList returned by querySelectorAll is specified to have a forEach method (now, it didn't used to be). If you need to support older environments where it may not have it yet, you can use my answer here to deal with it. In those environments, you'd probably need a traditional function instead of an arrow function as well, so:

// (After applying the polyfill to `NodeList.prototype`)
document.querySelectorAll("#allResults li").forEach(function(li) {
    if (li.textContent.length < 3) {
        li.textContent = "To be played";
    }
});

Thank you, I've never met this querySelectorAll function. You just define the id with a hashtag before? I'll try playing around with your snippet to see how it functions! — noroma, Aug 04 '19 at 14:53
@noroma - `querySelectorAll` lets you use any valid CSS selector to get a `NodeList` of matching elements in the DOM. If you use it on `document` ([link](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)), it gets all of them. If you use it on an element instead ([link](https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll)), it only searches within the element's tree. So yes, since you select IDs using `#`, that's why I have `#` in the example above. — T.J. Crowder, Aug 04 '19 at 14:55

Alireza HI · Accepted Answer · 2019-08-04T14:33:00.720

First of all you didn't close the quote:

<ul id="allResults">

You need to get the innerText to get the value and number of the li element instead of the exact element. So your code would be like this:

listGames[i].innerText < 3

And you can convert it to int to compare it correctly. So the result is:

parseInt(listGames[i].innerText) < 3

By the way you were setting the element that was not defined. so I changed it to this:

listGames[i].innerHTML = "To be played";

The final code would be like below:

var parentGame = document.getElementById("allResults");
var listGames = parentGame.getElementsByTagName("li");
var listGamesLength = listGames.length;
for (var i = 0; i < listGamesLength; i++) {
  if (parseInt(listGames[i].innerText) < 3) {
    listGames[i].innerHTML = "To be played";
  }
}

<div>
  <ul id="allResults">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
  </ul>
</div>

Thank you, I'll try this as well! – noroma Aug 04 '19 at 14:56 — noroma, Aug 04 '19 at 14:56

Changing text values of with less than 3 characters

4 Answers4

Changing text values of
with less than 3 characters