Почему код работает на одной странице, но не работает на другой?

188
07 сентября 2018, 23:50

JavaScript говорит, что кнопка не найдена, хотя она есть. Я полагаю, что javascript искал кнопку, которая указана при создании в первом объекте, т.е. здесь:

var changeInputs = new InfoChange('.button--profile-change', '.textinput-container__input--change', 'textinput-container__input--change-unactive', 'save');

А ее действительно не существует, но я не могу убрать эту строчку, т.к. скрипт работает на нескольких страницах. Пробовал сделать проверку:

this.ready = this.btnEvent && this.inputsToChange;
      if(!this.ready) {
        return;
      };

Это не дало нужных результатов, подскажите пожалуйста, как исправить?

function InfoChange(btnEvent, inputsToChange, classToBlock, buttonTextChange) { 
  this.btnEvent = document.querySelector(btnEvent); 
  this.inputsToChange = document.querySelectorAll(inputsToChange); 
  this.classToBlock = classToBlock; 
  this.buttonTextChange = buttonTextChange; 
  this.currentBtnText = this.btnEvent.textContent; 
  var _this = this; 
 
  this.ready = this.btnEvent && this.inputsToChange; 
 
  if(!this.ready) { 
    return; 
  }; 
 
  var buttonAttr = function() { 
  	_this.btnEvent.setAttribute('data-status', 'unactive'); 
  }; 
  buttonAttr(); 
   
  this.btnEvent.addEventListener('click', function() { 
    var btnAttribute =  _this.btnEvent.getAttribute('data-status'); 
 
    if (btnAttribute == 'unactive') { 
      _this.btnEvent.setAttribute('data-status', 'active'); 
      _this.btnEvent.textContent = _this.buttonTextChange; 
    } else { 
      _this.btnEvent.setAttribute('data-status', 'unactive'); 
      _this.btnEvent.textContent = _this.currentBtnText; 
    }; 
     
    for(var i = 0; i < _this.inputsToChange.length; i++) { 
       
      _this.inputsToChange[i].addEventListener('change', function(event) { 
        var currentItem = event.target; 
        var currentValue = event.target.value; 
        currentItem.setAttribute('value', currentValue); 
 
      }); 
       
      if(_this.inputsToChange[i].classList.contains(classToBlock)) { 
      	_this.inputsToChange[i].classList.remove(classToBlock); 
      	_this.inputsToChange[i].removeAttribute('disabled'); 
      } else { 
      	_this.inputsToChange[i].classList.add(classToBlock); 
      	_this.inputsToChange[i].setAttribute('disabled', ''); 
      }; 
    }; 
 
  }); 
}; 
 
 
var changeInputs = new InfoChange('.button--profile-change', '.textinput-container__input--change', 'textinput-container__input--change-unactive', 'save'); 
var changePass = new InfoChange('.button--profile--change-pass', '.textinput-container__input--change-pass', 'textinput-container__input--change-unactive', 'save'); 
var changePass = new InfoChange('.button--profile--from-to', '.textinput-container__input--from-to', 'textinput-container__input--change-unactive', 'update'); 
var changeCV = new InfoChange('button', 'input', 'un', 'save');
.un { 
  border: none; 
  background-color: red; 
}
<input type="text"> 
<button>Button</button>

READ ALSO
service worker на странице с поиском и фильтрацией

service worker на странице с поиском и фильтрацией

В СПА есть экран с таблицейТаблица с пагинацией, фильтрацией, сортировками

190
Вставка многострочной string в txt файл

Вставка многострочной string в txt файл

Имеется такая многострочная строка

212
Js методы функции

Js методы функции

как сделать что бы box был видим для функции

198
Как вызвать функцию в компоненте после того как свойство в vuex store изменится?

Как вызвать функцию в компоненте после того как свойство в vuex store изменится?

У меня есть хранилище данных в vuex и два компонентПервый компонент это range slider, в котором я меняю значения слайдера и сразу же отправляю их в store

167