Проблемы с использованием идентификаторов и классов в javascript
Я новичок в Javascript и сейчас вырываю волосы из-за проблемы, которую не знаю, как решить!
Я пытаюсь изменить цвет круга на основе числа, полученного из моего «тега абзаца». Когда я использовал ID на своей странице, мне удалось заставить его работать.
(function() {
var Antal = document.getElementById("myP").innerHTML;
if (Antal >= 6) {
document.getElementById("centerbox1").style.backgroundColor = 'Green';
} else
if (Antal >= 1 && Antal < 5) {
document.getElementById("centerbox1").style.backgroundColor = 'yellow';
} else
if (Antal <= 0) {
document.getElementById("centerbox1").style.backgroundColor = 'red';
}
})();<div id = "centerbox1" style = "width:90px; height:90px; border-radius:50%;">
<div>
<p id = "myP">1</p>
</div>
</div>Но поскольку мне нужно, чтобы это повторялось снова и снова, я не могу использовать ID и хочу переключить код на использование «class» вместо этого.
Если вместо этого я переключу все свои идентификаторы на классы, код перестанет работать.
(function() {
var Antal = document.getElementsByClassName('myP').innerHTML;
if (Antal >= 6) {
document.getElementsByClassName('centerbox1').style.backgroundColor = 'Green';
} else
if (Antal >= 1 && Antal < 5) {
document.getElementsByClassName("centerbox1").style.backgroundColor = 'yellow';
} else
if (Antal <= 0) {
document.getElementByClassName("centerbox1").style.backgroundColor = 'red';
}
});<div class = "centerbox1">
<div>
<p class = "myP">1</p>
</div>
</div>Это может быть из-за какой-то очень простой проблемы, но я надеюсь, что кто-то может мне помочь, поскольку я как бы застрял в этом.
Заранее спасибо!
Вы создали анонимную функцию, но не запускали ее
Итак, если я правильно вас понял, вы хотите проверять значение myP, как и каждый кадр, и если значение изменилось, изменится цвет? или вы хотите, чтобы несколько кругов на вашей странице проверяли цвет?
Antal - это строка, поэтому перед выполнением Antal >= 6 вам необходимо преобразовать ее в число.
Я хочу, чтобы он использовался, чтобы показать "на складе" в интернет-магазине. Поэтому мне нужно, чтобы он мог видеть, что находится в '.myP', поскольку в этом абзаце будет информация из базы данных. Не знаю, имеет ли это смысл?
Попробуйте кое-что: 1. Вы запускали анонимную функцию? 2. можно ли распечатать значение в Antal с помощью console.info? видите, возможно, вы ничего не получите, потому что в html есть больше тегов с тем же идентификатором 3. Можете ли вы распечатать журнал внутри блоков if, посмотреть, действительно ли вы его достигли?
Я должен быть честным, как я уже сказал, я не очень силен в Javascript, поэтому я не совсем уверен, как запустить «анонимную функцию» или найти ее в console.info! Я очень ценю все ответы, но с трудом могу их применить. Если у кого-то есть пример чего-то подобного, я хотел бы это увидеть! Надеюсь, вы, ребята, сможете прогуляться со мной! еще раз спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
решение здесь действительно довольно простое.
Помните, что при работе с getElementsByClassName javascript вернет массив, так как классов может быть несколько. Решение состоит в том, чтобы использовать getElementsByClassName[0], поскольку это будет специально возвращать первый элемент, который имеет этот класс в массиве, очевидно, это также позволяет вам затем указать, к какому классу вы хотите применить это.
getElementsByClassName возвращает HTMLCollection, а не массив. Также не существует getElementByClassName.
Это правильно, спасибо, что указали на getElementByClassName, моя IDE по какой-то причине автоматически предсказывала его. Что касается того, что он возвращает, я просто использовал массив как простое объяснение, но вы говорите более правильно, спасибо.
Вы можете пройти по центру, а затем найти тег p внутри каждого поля. На основе тега p вы можете раскрасить центральную рамку.
HTML
<div class = "centerbox">
<div>
<p>1</p>
</div>
</div>
<div class = "centerbox">
<div>
<p>3</p>
</div>
</div>
CSS
.centerbox {
width:90px;
height:90px;
border-radius:50%;
}
JS
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 > 1) {
box.style.backgroundColor = "green"
}
}
Вам действительно не нужна анонимная функция, но если вы этого хотите, вам нужно добавить () в конце, чтобы она выполнялась автоматически.
(function() {
console.info("executing!");
})();
Ты, мой мужчина, спасатель жизни! Большое спасибо! Это сработало!
Буква «s» в
getElement*s*ByClassNameдолжна указывать на то, что, возможно, нужно сделать что-то еще. Но что еще более важно, как ваш код узнает, какой из нескольких элементов нужно сделать? Вам нужно будет пройти через элементы.myPи использовать обход DOM (например,parentNode), чтобы добраться до контейнера.