Ответы пользователя по тегу JavaScript
  • Как сделать так, чтобы при нажатии на 2 кнопки менялись значения в элементах?

    FinGanapre
    @FinGanapre
    Может вам нужны не кнопки а радио кнопки или чек боксы в зависимости от логики? Или вообще select option.

    Вариант первый:
    отдельно выносим диски в две радио кнопки ( hdd, ssd )
    отдельно выносим системы в две радио кнопки ( windows, linux )
    Обрабатываем через всплытие.

    Вариант второй:
    Селект с четырьмя заготовленными option: win + ssd / wid + hdd / lin + ssd / lin + hdd
    Ответ написан
  • Что нужно сделать чтобы в случае ввода буквы и цифры (например 12a), мне не выводило сумму?

    FinGanapre
    @FinGanapre
    Например так

    let num = prompt('Введите трехзначное число');
    let sum = 0;
    let digit;
    let valid = true; // создадим переменную для хранение валидно / не валидно
    for ( let i = 0; i < num.length; i++){
        digit = parseInt(num[i]);
        if (digit){
            sum = sum + digit;
        } else{
            valid = false; // зададим значения не валидно
            alert('Ввыдите только числа');
        }
    }
    
    // проверим и выведим сумму только если ввод был валиден
    valid ? alert(sum) : null; // if ( valid ) { alert(sum)  }
    Ответ написан
    Комментировать
  • Почему document.write() стирает теги?

    FinGanapre
    @FinGanapre
    Вы перезаписываете содержимое страницы.

    Лучше так:
    insertAdjacentHTML
    Ответ написан
    Комментировать
  • Поможете, а то я не знаю что добавить на сайт?

    FinGanapre
    @FinGanapre
    Это в итоге должен быть сервис, на котором люди создают портфолио или это просто ваше личное портфолио будет тут размещаться?

    когда я делал себе портфолио/резюме я добавлял следующее:
    1. Базовую информацию о себе ( ФИО, дата рождения, подходящие должности, семейное положение, о себе, зп)
    2. Образование
    3. Опыт работы
    4. Навыки (технологии/ПО/ОС/проф компетенции)
    5. Портфолио. Проекты, в которых участвовал (название, дата, описание, ссылка если не nda) с сортировкой по годам
    6. Книги (прочитал, читаю сейчас, хочу прочитать)
    7. Курсы, сертификаты
    8. Youtube каналы, которые смотрю с описание что полезного там нашёл, чему научился

    Само резюме делил на 3 блока (резюме - то, о чём 8 пунктов, контакты, pdf )

    В контактах собственно контакты и инфа о том согласен ли на релокацию и куда и на каких условиях с картой
    В pdf экспорт в pdf:) Чтобы наполнять всё это дело и не париться с оформлением pdf.
    Ответ написан
    Комментировать
  • Вопрос по JS от новичка?

    FinGanapre
    @FinGanapre
    Посмотрите в сторону курсов от Дмитрия Лаврика и Владилена Минина, если нужно на русском. У каждого есть youtube канал, на котором можно посмотреть основы. Есть платные курсы, на которых больше информации. Читайте онлайн учебник
    Ответ написан
    1 комментарий
  • Как сделать клик по активному слайду (swiper slider)?

    FinGanapre
    @FinGanapre
    Если я правильно вас понял и вам нужен клик каждый раз при смене слайда, то так:
    1. В api находим метод mySwiper.on(event, handler).
    2. Переходим в раздел событий. Вас интересует событие slideChange.
    3. Пишем обработчик. Он будет запускаться каждый раз, когда слайдер меняет слайд.
    Ответ написан
    4 комментария
  • Ошибка в js коде для прелоадера?

    FinGanapre
    @FinGanapre
    У вас неверная логика. Класс loaded добавляет opacity: 0. Если вам нужен подобный прелоадер, то вы изначально этот класс в разметку добавьте, а при загрузке наоборот удаляйте.( document.body.classList.remove('loaded') )
    Ответ написан
  • Как нарисовать линии по длине в зависимости от процентного соотношения?

    FinGanapre
    @FinGanapre
    Общий смысл:
    1. Нужно получить проценты. Проценты - величина относительная. В моём случае - относительно максимального веса.
    2. Становиться ясно, что нужно найти максимальный вес и высчитать относительно него остальные
    3. За ширину отвечает width, значит её мы и будем задавать динамически
    4. Погнали:) Это только пример. Не нужно реализовывать всё точно так, особенно рендер.

    .line {
      height: 10px;
      background-color: #333;
    }


    // полагаю, вы получаете с сервера нечно такое:
    const data = [
      {
        weight: '76'
      },
      {
        weight: '54'
      },
      {
        weight: '30'
      }
    ]
    
    // находим максимум
    const maxWeight = Math.max.apply(null, data.map( item => +item.weight ))
    
    // относительно максимума высчитываем проценты
    const percents = data.map( item => {
      return +item.weight / maxWeight * 100
    })
    
    // генерируем линии
    const generateLine = percents => {
      return percents.map( percent => {
        return `
          <div style="width:${percent}%" class="line"></div>
        `
      }).join('')
    }
    
    // делаем функцию для рендеринга
    const render = html => {
      document.body.innerHTML = html
    }
    
    // рендерим
    render( generateLine( percents ) )


    Если у вас максимум всегда 10, присваиваем maxWeight 10 и в объекте меняем значения на числа в диапазоне от 0 до 10.
    Ответ написан
    Комментировать
  • Как динамически создавать страницу по шаблону html с помощью jquery?

    FinGanapre
    @FinGanapre
    Вам сюда. Смотрите на history.pushState() и history.replaceState()
    И вот ещё нашёл:
    https://rmcreative.ru/blog/post/jquery-router
    https://github.com/camme/jquery-router-plugin
    https://github.com/c-smile/spapp
    Ответ написан
    Комментировать
  • Как использовать переменную как ключ для объекта?

    FinGanapre
    @FinGanapre
    Вот так:
    console.log('Значение для выбранного ключа: '+obj[key]);
    Ответ написан
    2 комментария
  • Как обработать форму с помощью JavaScript?

    FinGanapre
    @FinGanapre
    <form id="form-id">
      <input type="text" name="some_name" value="">
      <input type="text" name="some_name2" value="">
      <button type="submit">Отправить</button>
    </form>


    window.onload = e => {
      const form = document.querySelector('#form-id')
      
      const formHandler = e => {
        e.preventDefault()
        const formData = new FormData( e.target )
        console.log(...formData)
      }
      
      form.addEventListener('submit', formHandler)
    }
    Ответ написан
    Комментировать
  • Как убрать меню бургер при нажатии на контент сайта?

    FinGanapre
    @FinGanapre
    Создайте за меню прозрачный div на весь экран и обработайте на нём клик. При желании, можно задавать ему какой-либо цвет если потребуется в дальнейшем затемнять всё, кроме меню, когда оно открыто.
    Ответ написан
  • Как запускать событие только во время открытия меню?

    FinGanapre
    @FinGanapre
    https://developer.mozilla.org/en-US/docs/Web/API/M...

    Небольшой пример:

    <div class="class1 class2">some elem</div>
    <button class="btn">toggle</button>


    window.onload = e => {
      // получаем элементы
      const $div = document.querySelector('.class1')
      const $btn = document.querySelector('.btn')
      
      // функция, переключающая класс ( нужна для демонстрации )
      const toggle = e => $div.classList.toggle('class2')
      
      // функция, которая будет выполняться при изменении атрибутов у $div
      const obsCallback = ( ml, ob ) => {
        // за место вывода в консоль после проверки на существование класса подставляем нужные функции
        ml[0].target.classList.contains('class2') ? console.log(true) : console.log(false)
      }
      
      // создание обсервера и передача нашей функции
      const observer = new MutationObserver(obsCallback)
      
      // опции (за чем будем следить)
      const observerOptions = {
        childList: false,
        attributes: true,
        subtree: false
      }
      
      // начинаем наблюдать
      observer.observe($div, observerOptions)
      
      // просто повесил событие на кнопку чтобы менять класс у $div
      $btn.addEventListener('click', toggle)
    }
    Ответ написан
    2 комментария
  • Как по всему документу скрыть значения которые имеют undefined?

    FinGanapre
    @FinGanapre
    Грустно, что так вышло, но это уже другая история:)

    Какая структура у JSON который приходит на клиент для вывода?
    Можно отфильтровать данные перед выводом на стороне клиента и работать с уже "чистыми".

    Например так:
    const serverData = [
      {
        answ1: 'text 1',
        answ2: 'text 2',
        answ3: undefined
      },
      {
        answ1: undefined,
        answ2: 'text 2',
        answ3: undefined
      }
    ]
    
    const clearData = serverData
      .map( item => Object.values( item ) )
      .filter( item => item !== undefined )
    
    console.log(clearData)
    Ответ написан
    Комментировать
  • Значение const брать из id, а не задавать?

    FinGanapre
    @FinGanapre
    <textarea id="text">some text inside</textarea>

    window.onload = e => {
      // получить элемент по id
      const textarea = document.getElementById( 'text' )
    
      // получить текущее значение
      console.log( textarea.value )
      
      // установить новое значение
      textarea.value = 'new textarea text'
    }
    Ответ написан
    Комментировать
  • Как преобразовать массив с 3 индекса?

    FinGanapre
    @FinGanapre
    А почему не while?

    const arr = [1,2,3,4,5,6]
    let num = 10
    let index = 3
    
    while ( num > 0 ) {
      if ( !arr[index] ) {
        index = 0
      }
      
      arr[index] += 1
    	
      index++
      num--
    }
    
    console.log( arr )
    Ответ написан
    2 комментария
  • Как добавить кнопке функцию удаление строки из таблицы (таблица на js)?

    FinGanapre
    @FinGanapre
    Если не думать о производительности, то примерно так. С вашим кодом очень сложно работать. Разделите логику на вывод шаблона и функцию, которая будет прослушивать события (некий контроллер) и запускать нужные функции ( удаление, редактирование и т.д. ). Я не выводил таблицу целиком при первом рендеринге, можно добавить это. Обычно такие задачи решают добавив шаблонизатор (JSX к примеру) и описывая всё через ООП. Либо сразу взять удобный фреймворк для фронта, если на проекте много таких задач.

    <!DOCTYPE html>
    <html lang="ru">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
    	<table id="some-table">
    		<thead>
    			<tr>
    				<th>Наименование</th>
    				<th>Описание</th>
    				<th>Количество</th>
    				<th>Действия</th>
    			</tr>
    		</thead>
    		<tbody>
    		</tbody>
    	</table>
    </body>
    </html>


    window.onload = () => {
    	const table = document.getElementById('some-table')
    	const tableBody = table.querySelector('tbody')
    
    	let serverData = [
    		{
    			id: parseInt( Math.random() * 1000 ),
    			name: 'name 1',
    			description: 'description 1',
    			qnt: '5'
    		},
    		{
    			id: parseInt( Math.random() * 1000 ),
    			name: 'name 2',
    			description: 'description 2',
    			qnt: '2'
    		},
    		{
    			id: parseInt( Math.random() * 1000 ),
    			name: 'name 2',
    			description: 'description 2',
    			qnt: '8'
    		}
    	]
    
    
    
    	const render = html => tableBody.innerHTML = html
    
    	const template = data => {
    		return data.map( item => {
    			return `
    				<tr>
    					<td>${ item.name }</td>
    					<td>${ item.description }</td>
    					<td>${ item.qnt }</td>
    					<td><button data-id="${ item.id }" data-action="remove">Удалить</button></td>
    				</tr>
    			`
    		}).join('')
    	}
    
    	const rmv = id => {
    		serverData = serverData.filter( item => item.id !== parseInt( id ) )
    	}
    
    	const tableHandler = e => {
    		const $el = e.target
    		
    		switch( $el.dataset.action ) {
    			case 'remove':
    				rmv( $el.dataset.id )
    				break
    		}
    		
    		render( template( serverData ) )
    	}
    
    	const run = () => {
    		render( template( serverData ) )
    		table.addEventListener( 'click', tableHandler )
    	}
    
    	run()
    }
    Ответ написан
    Комментировать
  • Как изменить стиль добавленный через .css()?

    FinGanapre
    @FinGanapre
    Проблема с контекстом выполнения.
    Когда вы передаёте функцию в setTimeout, её контекст (this) - это не тот контекст (this), который вы бы хотели получить.

    Используйте стрелочную функцию для сохранения контекста (стрелочные функции в js не имеют собственного контекста):
    setTimeout(() => {
    $(this).css('border-color', 'none');
    },1000);


    Или сохраните контекст (this) в переменную, которую получите через замыкание:
    var that = this;
    setTimeout( function() {
    $(that).css('border-color', 'none');
    },1000);
    Ответ написан
    Комментировать