Блог

#javascript #html #dom-events #targeting

#javascript #HTML #dom-события #таргетинг

Вопрос:

 let selected = true;
document.querySelector('label').addEventListener("click", function(e) {
  if (e.target.checked = selected) {
    let labelFor = document.querySelector('label').htmlFor;
    let inputId = document.getElementById(labelFor);
    let inputName = inputId.name;
    let path = document.getElementsByClassName(inputName)
    console.log(path);
  }
})
  

 Formatted HTML:
<input type="radio" name="first" id="floor-1">
<label for="floor-1">first</label><br>
<input type="radio" name="second" id="floor-2">
<label for="floor-2">second</label>
<svg viewBox="0 0 300 300">
   <g class="first">
      <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
   </g>
   <g class="second">
      <path d="M 20 20 H 100 V 100 H 20 L 20 20" />
   </g>
</svg>
  

Комментарии:

1. if (e.target.checked = selected) { — это присвоение, а не сравнение. Вероятно, вы хотели написать два или три знака равенства и document.querySelector('label') выберете только первый label

2. Спасибо, я это пропустил. Однако теперь функция вообще не работает, lol

3. Если вы хотите добавить прослушиватели событий для нескольких меток, рассмотрите возможность использования или вы можете воспользоваться обработкой событий и добавить один прослушиватель событий в общий родительский элемент всех элементов. document.querySelectorAll label

4. Я пробовал document. querySelectorAll но я получаю этот документ с ошибкой. querySelectorAll(…).addEventListener — это не функция, тогда я поищу документацию по обработке событий

5. document.querySelectorAll возвращает a NodeList , вам нужно вызвать .forEach возвращаемое значение document.querySelectorAll , а затем добавить прослушиватель событий для каждого элемента в списке, возвращаемом document.querySelectorAll . Посмотрите подробности этого метода в MDN, это прояснит ситуацию.

Ответ №1:

 // since the handler is going to be associated
// with more than one html element, provide it
// as separate function which reduces overhead.
function handleControlStateChange(evt) {

  const elmControl = evt.currentTarget;
  const svgRoot = document.body.querySelector('svg');

  if (svgRoot amp;amp; elmControl amp;amp; elmControl.checked) {

    const pathContainer = svgRoot.getElementsByClassName(elmControl.name)[0];

    const elmPath = pathContainer amp;amp; pathContainer.children[0];
    const pathValue = elmPath amp;amp; elmPath.getAttribute('d');

    console.log(pathValue);
  }
}

// initialize event listeners, but for the
// "change" event of each checkbox control.
document.body.querySelectorAll('[type="checkbox"]').forEach(elm =>
  elm.addEventListener("change", handleControlStateChange)
);  

 <label>
  <!--
    provide a simpler stucture and thus, reduced html overhead as with
    `for` and `id` attributes, as well as with the code which handles
    the state changes of a checkbox-control.
  //-->
  <span class="label">first</span>
  <!--
    make use of a checkbox- instead of a radio-control since differently
    named radio-controls do not make sense because there will be no radio-
    group that contains both controls; thus each radio could not be unchecked.
  /-->
  <input type="checkbox" name="first"/>
</label>

<label>
  <span class="label">second</span>
  <input type="checkbox" name="second"/>
</label>

<svg viewBox="0 0 300 300">
  <g class="first"> 
    <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
  </g>
  <g class="second"> 
    <path d="M 20 20 H 100 V 100 H 20 L 20 20"/>
  </g>
</svg>  

Ответ №2:

 document.querySelectorAll('label').forEach(eachLabelElem => 
   eachLabelElem.addEventListener("click",<your function logic here>)
)
  

Комментарии:

1. Спасибо, я просто пытался это сделать, и, к сожалению, ничего не происходит. Вот документ с кодом. querySelectorAll(‘label’).forEach(item => { item.addEventListener(‘click’, функция (событие) { if (event.target.checked) { пусть LabelFor = document. querySelector(‘label’).htmlFor; console.log(LabelFor); } }) })

2. Я предполагаю, что вы пытаетесь выполнить некоторую логику при нажатии label или radio вводе. Если это так, вам нужно добавить EventListener в input вместо label . Кроме label того, не имеет атрибута checked; радиовход имеет