Как отменить свойство и вернуть исходное свойство через JS?

Question

[vintalis]

Первое заключается в том что есть input[files], после выбора файла показывается счетчик сколько файлов выбрано.

пример

Вопрос как обнулить Selected files: n после того как нажал кнопку button(отправить) на дефолтное значение Upload Files

И второе одному классу я добавил дополнительный класс active
Я хочу что б он на протяжении например 10 секунд срабатывал, после чего дополнительный класс убирался, как это реализовать

$('.button').click(function(event){
      $('.loader, .loader1').toggleClass('active');
      
  });

Вот код https://codepen.io/pen/NWqYYmY

Comments

[Борис Животное]

Изучи лучше React, зачем себя мучать и писать ещё и не самый оптимальный код.
Мега качественный курс (полностью его посмотрел). Книга.

[vintalis]

Борис Животное, мне бы js сначала выучить, тогда б таких простых вопрос не задавал)по этому кручусь сейчас как могу.

[Борис Животное]

vintalis, ну там на JavaScript и пишешь, правда можно потом начать писать на TypeScript, так как в большом проекте становится тяжко разбираться в JavaScript коде с его динамической типизацией и отсутствием описания типов.

[Борис Животное]

vintalis, можешь оформить свой пример в проект для WebStorm? Я бы попробовал помочь, самому сейчас создавать его очень лениво после работы, сил нет :)

[Борис Животное]

vintalis, кстати, чтобы получить халявные ключи для учёбы на все продукты JetBrains можно на Stepik проходить курсы. Как только выполняешь несколько сложных заданий, тебе высылают ключ на 3 месяца и так каждые 3 месяца можно делать. Я уже второй год так ключи получаю.

[vintalis]

Борис Животное, легче купить курс да и все), да мне просто нужно допилить что есть, мне на реакте придется весь проект переписывать, а это ни к чему пока что) Код на на кодепан скинул, если кто понимает я думаю там минут 5,я уже 2 дня сижу)))

[Kovalsky]

vintalis, зашел в пример - выбрал файл, вписал почту, нажал "отправить", появилось сообщение что страница пытается поменять document.location. Всё. Никаких проблем там не нашел

[vintalis]

Kovalsky, не понял) тоже попробовал ошибка в кодепан,я не знаю почему , на локальном хостинге работает.Кусок лишнего кода убрал сейчас.Суть в том что ошибка так и будет, потому что такое кодепан не отрабатывает.Мне нужно просто реализация обнуления переменных, я не знаю как это сделать уже надоело сидеть в небо тыкать.

[Kovalsky]

vintalis, some_variable = null; ?

[vintalis]

Kovalsky, код

let inputs = document.querySelectorAll('.input__file');
Array.prototype.forEach.call(inputs, function (input) {
  let label = input.nextElementSibling,
    labelVal = label.querySelector('.input__file-button-text').innerText;

  input.addEventListener('change', function (e) {
    let countFiles = '';
    if (this.files && this.files.length >= 1)
      countFiles = this.files.length;

    if (countFiles)
      label.querySelector('.input__file-button-text').innerText = 'Selected files: ' + countFiles;
    else
      label.querySelector('.input__file-button-text').innerText = labelVal;
  }); 
});

Что тут вписать, что б при нажатии на button обнулялось все к чертям собачим, потому что я пока собака которая не разбирается ....

[Борис Животное]

vintalis, легче наверное купить тогда подписку на все IDE, про какой курс и зачем его покупать я не понял.

[Борис Животное]

vintalis, я сейчас затестил. У меня всё работает.

[vintalis]

Борис Животное, у меня тоже все работает))))))Мне нужно дописать код, что б при нажатии на button этот код обнулялся.

let inputs = document.querySelectorAll('.input__file');
Array.prototype.forEach.call(inputs, function (input) {
  let label = input.nextElementSibling,
    labelVal = label.querySelector('.input__file-button-text').innerText;

  input.addEventListener('change', function (e) {
    let countFiles = '';
    if (this.files && this.files.length >= 1)
      countFiles = this.files.length;

    if (countFiles)
      label.querySelector('.input__file-button-text').innerText = 'Selected files: ' + countFiles;
    else
      label.querySelector('.input__file-button-text').innerText = labelVal;
  }); 
});

[Kovalsky]

vintalis, вы не обижайтесь, пожалуйста, но все вам так уклончиво отвечают потому что qna.habr.com это не сервис неотложной ит помощи для ленивых людей. Это типа база знаний. По этому поводу за вас тут никто не будет решать конкретные задачи вставшие перед вами. Ну разве что те, кому прям совсем нечего делать.

По теме: посмотрите какие конкретно объекты из окружения меняются в этом коде, отмените эти изменения (которых очень немного) при отправке формы.

[vintalis]

Kovalsky, все ок я понимаю)

[vintalis]

Kovalsky, Есть EventListener он перехватывает и изменяет значение.Мне нужно при нажатии кнопки сделать removeEventListener как?

[Kovalsky]

vintalis, не, убирать обработчик не нужно. Ну по крайней мере я не вижу смысла. Проще будет на форму повесить обработчик сабмита и уже в нем творить сброс всего что нужно

[Борис Животное]

vintalis, я бы для начала отрефакторил слегка код. Вроде бы ничего не сломал:

const input = document.querySelector('.input__file');
const span = input.nextElementSibling.querySelector('.input__file-button-text');
const originalLabelText = span.innerText;

input.addEventListener('change', (e) => {
    let filesCount = '';
    if (input.files && input.files.length >= 1)
        filesCount = input.files.length;

    if (filesCount)
        span.innerText = 'Selected files: ' + filesCount;
    else
        span.innerText = originalLabelText;
});

[vintalis]

Борис Животное, спасибо большее)

Answer 1

[alekssamos]

Первое: делай form.reset;
второе, используй: window.setTimeout

Answer 2

[Karcev]

Добавьте id к форме и после подтверждения отправки:

// Сбросить форму
document.getElementById('form-id').reset();
//Вернуть значение поля выбрать файл на начальное
document.querySelector('.input__file-button-text').innerText = 'Upload files';