Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.04.2020, 18:15
Интересующийся
Отправить личное сообщение для knoxville88 Посмотреть профиль Найти все сообщения от knoxville88
 
Регистрация: 08.04.2020
Сообщений: 14

Запрет на нажатие кнопки, если поля пустые
Дано:

console.log(document.forms);

const form = document.forms.add;

form.addEventListener('input', function (event) {
    console.log(event);
});


Делаю:

console.log(document.forms);

const form = document.forms.add;

form.addEventListener('input', function (event) {
    if (artist.value.length === 0 || song.value.length === 0) {
     console.log('Кнопка выключена');
} else if {
    console.log('Кнопка включена');
}
});


Ответить с цитированием
  #2 (permalink)  
Старый 11.04.2020, 18:23
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,746

Если нужно именно кнопку сделать не активной, то обратитесь к этой кнопке и установите ей свойство disabled = true.
Если кнопку делать не активной необязательно, то можно слушать событие формы submit и при наличии пустых обязательных для заполнения полей отменять действие по умолчанию вызовом метода preventDefault события.
Еще можно добавить обязательным для заполнения полям формы атрибут required.
Ответить с цитированием
  #3 (permalink)  
Старый 11.04.2020, 18:25
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Вот это
} else if {
чего такое?
Ответить с цитированием
  #4 (permalink)  
Старый 11.04.2020, 18:33
Интересующийся
Отправить личное сообщение для knoxville88 Посмотреть профиль Найти все сообщения от knoxville88
 
Регистрация: 08.04.2020
Сообщений: 14

voraa,
если значение в поле артист равно 0, или в поле песня равно 0, то выводится в консоль 'кнопка выключена
если иначе то выводится 'кнопка включена'
Ответить с цитированием
  #5 (permalink)  
Старый 11.04.2020, 18:39
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

knoxville88,
Вы в консоль то смотрите?
Строка
} else if {
Никакой ошибки не дает?

Должна давать
Uncaught SyntaxError: Unexpected token '{'

Последний раз редактировалось voraa, 11.04.2020 в 18:42.
Ответить с цитированием
  #6 (permalink)  
Старый 11.04.2020, 18:45
Интересующийся
Отправить личное сообщение для knoxville88 Посмотреть профиль Найти все сообщения от knoxville88
 
Регистрация: 08.04.2020
Сообщений: 14

voraa,
Смотрю
Даёт
Поэтому и пришёл сюда за помощью
Ответить с цитированием
  #7 (permalink)  
Старый 11.04.2020, 18:47
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Какая помощь то нужна?
Напишите правильно
} else {
Ответить с цитированием
  #8 (permalink)  
Старый 11.04.2020, 18:49
Интересующийся
Отправить личное сообщение для knoxville88 Посмотреть профиль Найти все сообщения от knoxville88
 
Регистрация: 08.04.2020
Сообщений: 14

voraa,
Писал
То же самое
Ответить с цитированием
  #9 (permalink)  
Старый 11.04.2020, 18:53
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,717

Приведите код и то, что дает в консоле?
Посмотрите в отладчике код (вкладка Sources у Хрома). Может быть он не меняется, а берется старый из кеша.
Ответить с цитированием
  #10 (permalink)  
Старый 11.04.2020, 18:58
Интересующийся
Отправить личное сообщение для knoxville88 Посмотреть профиль Найти все сообщения от knoxville88
 
Регистрация: 08.04.2020
Сообщений: 14

voraa,
const container = document.querySelector('.container');
const songsContainer = container.querySelector('.songs-container');
const addButton = container.querySelector('.input__btn_add');
const resetButton = container.querySelector('.input__btn_reset');

function doubleClickHandler(event) {
    event.target.textContent = playListTitles[Math.floor(Math.random() * playListTitles.length)];

    document.querySelector('.cover__heading').removeEventListener('dblclick', doubleClickHandler);
}

document.querySelector('.cover__heading').addEventListener('dblclick', doubleClickHandler);

const playListTitles = [
    'Игорь Тальков. Лучшее',
    'Музыка категории Б',
    'Подборка с фестиваля FYRE'
];

document.querySelector('.cover__heading').addEventListener('dblclick', function (event) {
    event.target.textContent = playListTitles[Math.floor(Math.random() * playListTitles.length)];
});

function renderAdded() {
  const songs = songsContainer.querySelectorAll('.song');
  const noSongsElement = container.querySelector('.no-songs');

  if (songs.length === 0) {
    resetButton.setAttribute('disabled', true);
    resetButton.classList.add('input__btn_disabled');
    noSongsElement.classList.remove('no-songs_hidden');
  } else {
    resetButton.removeAttribute('disabled');
    resetButton.classList.remove('input__btn_disabled');
    noSongsElement.classList.add('no-songs_hidden');
  }
}


function createSong(artistValue, songValue) {
    const trackContainer = document.createElement('div');
    trackContainer.classList.add('song');

    const artistElement = document.createElement('h4');
    artistElement.classList.add('song__artist');
    artistElement.textContent = artistValue;

    const titleElement = document.createElement('p');
    titleElement.classList.add('song__title');
    titleElement.textContent = songValue;

    const songButtonElement = document.createElement('button');
    songButtonElement.classList.add('song__like');

    trackContainer.appendChild(artistElement);
    trackContainer.appendChild(titleElement);
    trackContainer.appendChild(songButtonElement);

    return trackContainer;
}

function addSong(event) {
    event.preventDefault();
    const form = document.forms.add;
    const artist = form.elements.artist;
    const song = form.elements.song;
    const trackContainer = createSong(artist.value, song.value);

    songsContainer.appendChild(trackContainer);

    form.reset();

    renderAdded();
}

const artistInput = document.querySelector('.input__text_artist');
const songInput = document.querySelector('.input__text_song');




function resetPlaylist() {
  songsContainer.innerHTML = '';

  renderAdded();
}

addButton.addEventListener('click', addSong);
resetButton.addEventListener('click', resetPlaylist);

renderAdded();


songsContainer.addEventListener('click', function (event) {
    if (event.target.classList.contains('song__like')) {
      event.target.classList.toggle('song__like_active');
    }
});


console.log(document.forms);
const form = document.forms.add;

form.addEventListener('input', function (event) {
  if (artist.value.length === 0 || song.value.length === 0) {
  console.log('Кнопка выключена');
  }
  else {
  console.log('Кнопка включена');
  }
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
реакция на нажатие кнопки без onkey* FanOfGun Events/DOM/Window 5 20.08.2013 11:38
Определить нажатие кнопки Back tenmozes Events/DOM/Window 1 24.05.2013 15:19
Undisable кнопки, если все поля заполнены skvsk Общие вопросы Javascript 2 30.08.2012 21:27
jQuery. Запрет выполнения события если другое уже выполняется. Kostyk92 Элементы интерфейса 4 09.03.2012 23:46
Как отследить нажатие кнопки назад? olga153b Events/DOM/Window 3 06.11.2011 21:47