Ответы пользователя по тегу JavaScript
  • Как обратиться к alt картинки и вывести только те, которые соответствуют условию?

    @wakenby
    document.addEventListener('click', toggleImage)
    
    function toggleImage ({target}) {
      const buttonToggle = target.closest('[show-img-alt]')
    
      if (buttonToggle === null) return
    
      const alt = buttonToggle.getAttribute('show-img-alt')
      const allImages = document.querySelectorAll('img')
    
      for (const img of allImages) {
        if (img.alt !== alt) img.style.display = 'none'
        else img.style.display = ''
      }
    }


    Или

    function toggleImages (alt) {
      const allImg = document.querySelectorAll('img')
      
      for (const img of allImg) {
        if (img.alt !== alt) img.style.display = 'none'
        else img.style.display = ''
      }
    }


    Или

    function toggleImages (alt) {
      document.querySelectorAll('img').forEach(img => img.style.display = 'none')
      document.querySelectorAll(`img[alt="${alt}"]`).forEach(img => img.style.display = '')
    }
    Ответ написан
    3 комментария
  • JavaScript. Как записать данную валидацию красиво?

    @wakenby
    function testBtn(event) {
      if (event.target.id !== 'btn') return
    
      let answer = prompt('Число?')
    
      if (answer === null) return
      if (answer.trim() === '') return alert('Вы ничего не ввели')
      if (!isNumeric(answer)) return alert('Введите число')
    
      answer = Number(answer)
    
      if (answer < 1) console.log(`Меньше единицы: ${answer}`)
      else if (answer > 0) console.log(`Больше нуля: ${answer}`)
    
      function isNumeric (n) {
        return !isNaN(parseFloat(n)) && isFinite(n)
      }
    }
    Ответ написан
    Комментировать
  • Как в js применить несколько действий к одному заданному стилю?

    @wakenby
    Нельзя таким способом обработать все чекбоксы, document.querySelector - находит самый первый dom элемент.

    При клике на кнопку или при отправке формы, находите все чекбоксы и уже работайте с ними, а найти их можно с помощью document.querySelectorAll

    Вот пример реализации:

    const form = document.querySelector('#form')
    form.addEventListener('submit', onSubmit)
    
    function onSubmit (event) {
      event.preventDefault()
    
      let listCheckbox = document.querySelectorAll('.i-6')
      listCheckbox = [...listCheckbox]
    
      // Проверяем выбран ли хотябы один ответ
      if (!listCheckbox.filter(checkbox => checkbox.checked)) {
        return console.log('Вы не выбрали ни одного ответа')
      }
    
      // Узнаем сколько всего правильных ответов
      const rightAnswersCount = listCheckbox.filter(checkbox => Number(checkbox.value) === 1).length
    
      // Узнаем сколько всего не правильных ответов
      const wrongAnswerCount = listCheckbox.length - rightAnswersCount
    
      // Узнаем количество правильных ответов
      const rightAnswers = listCheckbox.filter(checkbox => Number(checkbox.value) === 1 && checkbox.checked).length
    
      // Узнаем количество не правильных ответов
      const wrongAnswer = listCheckbox.filter(checkbox => Number(checkbox.value) === 0 && checkbox.checked).length
    
      // Уведомляем пользователя
      console.log(`Вы ответили правильно на ${rightAnswers} из ${rightAnswersCount}`)
      console.log(`Вы ответили не правильно на ${wrongAnswer} из ${wrongAnswerCount}`)
    }
    Ответ написан
  • Плагин js html перемещения объектов за курсором?

    @wakenby
    Это может быть как и готовый плагин, так и самописное решение. Пишется оно на canvas.

    Вот готовое решение - https://github.com/VincentGarreau/particles.js/
    Ответ написан
    Комментировать