Настройте таргетинг на все элементы меток с правильными атрибутами данных-ответов с помощью javascript

У меня есть HTML-код, и я хочу выбрать каждую метку сdata-anwser установите "правильно", как я могу сделать это с помощью чистого Javascript? Вот мой HTML

               <div class="form-group answer" role="group">
                    <label data-answer="correct">
                        <div>Test</div>
                    </label>
                </div>
                <div class="form-group answer" role="group">
                    <label data-answer="incorrect">
                        <div>Test</div>
                    </label>
                </div>

И вот начало того, что я пробовал с JS

<script>
    var div = document.getElementsByClassName('answer');

    window.onload = (event) => {
        for (var i = 0; i < div.length; i++) {
            var label = div[i].getElementsByTagName('label');
            if (label[i].dataset == 'correct') {
                console.log("CORRECTE");
            } else {
                console.log("INCORECTE");
            }
            console.log(label[i].dataset);
        }
    }
</script>

Спасибо:)

#
Источник
  • 0
    Почему label[i] ? Ваш i предназначен для <div> , а не для <label> в каждом <div> .
  • 0
    Извините, JS - это не моя чашка чая, lmao, я лучше разбираюсь в PHP, HTML, CSS: P
  • 0
    На самом деле, я провел исследование, прежде чем спрашивать о Stackoverflow, и не нашел того, что мне помогло, я мог использовать неправильные ключевые слова и прочее, извините за это. Я совсем не профессионал в Javascript, так что будьте снисходительны, пожалуйста! :)
Codelisting
Ответы 2
Смежные вопросы
за 1 против
Лучший ответ

использовать селекторы запросов :

const btn = document.getElementById('btn');

btn.addEventListener('click', ev => {

  const correctAnswers = document.querySelectorAll('.answer [data-answer="correct"]');
  correctAnswers.forEach(el => {
    el.classList.toggle('selected');
  });

});
.form-group > label {
  margin: 0.33em;
  padding: 0.33em;
  border: 2px solid gray;
  background-color: silver;
  width: 250px;
  display: inline-block;
}

.form-group > label.selected {
  background-color: yellow;
  border: 2px dotted black;
}
<div class="form-group answer" role="group">
  <label data-answer="correct">
    <div>Test 1</div>
  </label>
</div>
<div class="form-group answer" role="group">
  <label data-answer="incorrect">
    <div>Test 2</div>
  </label>
</div>
<div class="form-group answer" role="group">
  <label data-answer="correct">
    <div>Test 3</div>
  </label>
</div>

<button id="btn">highlight correct answers</button>

за 0 против

Попробуй это

var answersCorrect = document.querySelectorAll("*[data-answer='correct']")

Array.from(answersCorrect).forEach(element => {
  console.log(element)
})
  • 0
    OP спрашивал конкретно о ярлыках, а не о чем-либо с параметром data-answer установленным на "correct" . Кроме того, * не требуется. Кроме того, вы можете ссылаться на console.log непосредственно в forEach вместо использования избыточной стрелочной функции.
Смежные вопросы
Codelisting
Популярные категории
На заметку программисту