Javascript, Numbers or String?

Question

I have made some code (with a lot of help from you guys), and was wondering if there is any way to make the JavaScript work with a certain letter instead of numbers.

let boxes = document.getElementsByClassName("centerbox")

for (let i = 0; i < boxes.length; i++) {
  let box = boxes.item(i)
  let content = box.getElementsByTagName("p")[0].innerHTML
  let number = Number(content)
  
  if (number <= 0) {
    box.classList.add("red");
  }
  else if (number >= 1 && number < 5) {
    box.classList.add("yellow");
  }
  else if (number >= 5) {
    box.classList.add("green");
  }
}

.centerbox::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.green::before {
  background-color: green;
}

.red::before {
  background-color: red;
}

.yellow::before {
  background-color: yellow;
}

.pstyle {
  display: inline-block;
  margin-left: 0px;
}

.widthcontainer {
  width: 100%;
  height: auto;
  background-color: red;
}

<div class="centerbox">
  <span class="">En el almacén |</span>
  <p class="pstyle">0</p>
</div>

I want the code to work the same way as it does now, but if the <p> has a certain letter “f”, I would like it to write me a string.

Is there a way to do this? I was thinking somthing like converting the string, but I can’t really seem to make it work.

If you need to check if the content of that element is a number you can use `isNaN` function: https://stackoverflow.com/questions/175739/is-there-a-built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number#175787 — Nisarg Shah, Aug 29 '18 at 10:35
What have you tried so far? This seems like a fairly simple extension of what you have gathered so far.. — Luca Kiebel, Aug 29 '18 at 10:35
Don't parse it as a Number and do `.indexOf('f');` on the String, if it's more than -1 it means it contains the letter f which means you can write your string. — Adrian, Aug 29 '18 at 10:35
I don’t understand what you mean by “I would like it to write me a string”. Write out where? Your current code doesn’t write out anything. Could you explain what result specifically you expect from your code when `f` is inside the `
`? — Sebastian Simon, Aug 29 '18 at 10:43
Sure! - the reason for it to be able to write a string, is because its meant for a "stock amout" in the store. My boss would like the ability to write the letter "f" if we dont have anymore on stock in the store. (but not like the 0) since there is gonna be a difference between none in the store, and 0 in total. :) - so instead of it writing " En el almacén | 0" it ill say " En el almacén | LOREM IPSUM" — Andreas_k1994, Aug 29 '18 at 10:46

Karan · Accepted Answer · 2018-08-29T11:08:39.407

Don't use let number = Number(content); instead simply write let number = content;

In javascript it will automatically compare values with numbers and when content has alphabet then number comparison will return false.

let boxes = document.getElementsByClassName("centerbox")

for (let i = 0; i < boxes.length; i++) {
  let box = boxes.item(i)
  let content = box.getElementsByTagName("p")[0].innerHTML
  let number = content;
  
  if (number <= 0) {
    box.classList.add("red");
  }
  else if (number >= 1 && number < 5) {
    box.classList.add("yellow");
  }
  else if (number >= 5) {
    box.classList.add("green");
  }
  else if (number == 'f') {
    box.classList.add("green");
  }
}

.centerbox::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.green::before {
  background-color: green;
}

.red::before {
  background-color: red;
}

.yellow::before {
  background-color: yellow;
}

.pstyle {
  display: inline-block;
  margin-left: 0px;
}

.widthcontainer {
  width: 100%;
  height: auto;
  background-color: red;
}

<div class="centerbox">
  <span class="">En el almacén |</span>
  <p class="pstyle">f</p>
</div>

Javascript, Numbers or String?

1 Answers1