Javascript, Числа или Строка? - PullRequest
Новая
       8

Javascript, Числа или Строка?

0 голосов
/ 29 августа 2018

Я сделал некоторый код (с большой помощью от вас, ребята), и мне было интересно, есть ли способ заставить JavaScript работать с определенной буквой вместо цифр. 

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>

Я хочу, чтобы код работал так же, как и сейчас, но если <p> имеет определенную букву «f», я бы хотел, чтобы он написал мне строку.

Есть ли способ сделать это? Я думал что-то вроде преобразования строки, но я не могу заставить ее работать.

1 Ответ

0 голосов
/ 29 августа 2018

Не используйте let number = Number(content);, вместо этого просто напишите let number = content;

В javascript он будет автоматически сравнивать значения с числами, а когда содержимое имеет алфавит, тогда сравнение чисел вернет 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>
...