Добавить число в маленький квадратный div

это демо codepen на здесь, и вы пытаетесь щелкнуть по холсту и можете отменить и очистить сетку. Проблема, которую я пытаюсь решить, заключается в том, что я хочу поместить несколько чисел (черным цветом) в красный квадрат. Например, когда вы нажимаете на сетку, появляется первая красная точка, которая внутри помечена как 1, а вторая будет помечена как 2 и т. д., и если точки перекрываются, будет просто отображаться исходный номер (не новый номер). Я попытался использовать код ниже:

var elements = document.getElementsByClassName('red-dot');    
  elements.innerHTML = 'Testing here';

Спасибо за чтение :)

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
2
0
40
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это должно сделать это:

  • доступ к элементам по имени класса должен осуществляться по индексу, например, document.getElementsByClassName(.red-dot)[0] будет обращаться к первому элементу с именем класса, отмеченным красной точкой
  • в codepen вы использовали стиль сверху и слева, чтобы расположить красную точку, поэтому я использовал его как пропуск, если он был взят элементом того же имени класса

Остальное говорит само за себя.

var elements = document.getElementsByClassName('red-dot');
    var eLength = elements.length;
    const dValue = parseInt(eLength) + 1;
    let isTaken = false;
    
    // check if dot number is taken
    for (let d=0;d<eLength;d++) {
      let top = elements[d].style.top;
      let left = elements[d].style.left;
      if (top == newDot.style.top && left == newDot.style.left) {
        isTaken = true;
      }
    }
    if (!isTaken) {
      newDot.dataset['dvalue'] = dValue;
      newDot.innerHTML = newDot.dataset.dvalue;
    } else {
      newDot.style.backgroundColor = 'transparent';
    }
    
    document.body.appendChild(newDot);

Другие вопросы по теме