Cлушатель событий onclick вызывает функцию дважды

Question

function tagPageSorting(form) {
  //Sort bookCards on tag page using fetch ajax
  
  form.onclick = () => {
    console.log("work");
  }
}

tagPageSorting(document.getElementById('tagSort'));

<form class="tag-sort noselect" id="tagSort">
  <input type="radio" name="sort" value="-created_at" class="tag-sort__option" id="sort-1" checked><label for="sort-1">Дате<br>загрузки</label>
  <input type="radio" name="sort" value="title" class="tag-sort__option" id="sort-2"><label for="sort-2">Имени</label>
  <input type="radio" name="sort" value="-chapters" class="tag-sort__option" id="sort-3"><label for="sort-3">Количеству<br>глав</label>
  <input type="radio" name="sort" value="-rate" class="tag-sort__option" id="sort-4"><label for="sort-4">Рейтингу</label>
  <input type="radio" name="sort" value="-comments" class="tag-sort__option" id="sort-5"><label for="sort-5">Количеству<br>комментариев</label>
</form>

Answer 1

Вы забыли напсиать e.preventDefault();:

function tagPageSorting(form) {
  // Sort bookCards on tag page using fetch ajax
  
  form.onclick = (e) => {
    e.preventDefault();
    console.log("work")
  }
}

tagPageSorting(document.getElementById('tagSort'));

<form class="tag-sort noselect" id="tagSort">
  <input type="radio" name="sort" value="-created_at" class="tag-sort__option" id="sort-1" checked><label for="sort-1">Дате<br>загрузки</label>
  <input type="radio" name="sort" value="title" class="tag-sort__option" id="sort-2"><label for="sort-2">Имени</label>
  <input type="radio" name="sort" value="-chapters" class="tag-sort__option" id="sort-3"><label for="sort-3">Количеству<br>глав</label>
  <input type="radio" name="sort" value="-rate" class="tag-sort__option" id="sort-4"><label for="sort-4">Рейтингу</label>
  <input type="radio" name="sort" value="-comments" class="tag-sort__option" id="sort-5"><label for="sort-5">Количеству<br>комментариев</label>
</form>

БЛОГ НА HUSL

Cлушатель событий onclick вызывает функцию дважды

Ответы (1 шт):