Сделать кнопку не активной, если выбран первый элемент

128
31 декабря 2020, 15:30

Необходимо сделать кнопку "создать" не активной в том случае, если выбрано одно из двух значений “Выбрать месяц”/“Выбрать год” или выбрано сразу два значения. У меня проблема в том, что кнопка не становится снова нормальной после добавления других значений.

let header = document.createElement('div'); 
    let select1 = document.createElement('select'); 
    let select2 = document.createElement('select'); 
    let label1 = document.createElement('label'); 
    let label2 = document.createElement('label'); 
    let body = document.getElementById('kappa'); 
    let elem = document.getElementById('calendaric'); 
    let butCreate = document.createElement('button'); 
    let butDelete = document.createElement('button'); 
 
    let monthArray = ['Выбрать месяц',"Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", 
        "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"]; 
 
    let yearArray = ['Выбрать год','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992', 
    '1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009', 
        '2010','2011','2012','2013','2014','2015','2016','2017','2018','2019']; 
 
    label1.textContent = 'Месяц: '; 
    label2.textContent = ' Год: '; 
    butCreate.textContent = 'Создать'; 
    butDelete.textContent = 'Удалить'; 
    butCreate.style.marginLeft = '7px'; 
    butDelete.style.marginLeft = '7px'; 
 
    //цикл для заполнения тега select массивом 
    for(let i = 0;i<monthArray.length;i++){ 
        let monthArray_ = monthArray[i]; 
        let optionFill = document.createElement('option'); 
        optionFill.className = 'month'; 
        optionFill.textContent = monthArray_; 
        optionFill.value = monthArray_; 
        select1.appendChild(optionFill); 
    } 
    //цикл для заполнения тега select массивом 
    for(let i = 0;i<yearArray.length;i++){ 
        let yearArray_ = yearArray[i]; 
        let optionFill = document.createElement('option'); 
        optionFill.className = 'year'; 
        optionFill.textContent = yearArray_; 
        optionFill.value = yearArray_; 
        select2.appendChild(optionFill); 
    } 
 
    // butDelete.addEventListener('click', function(){ 
    // 
    // }); 
 
    //неактивность кнопки!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
    if((select1.value = select1.children[0].value)||(select2.value = select2.children[0].value)){ 
        butCreate.setAttribute('disabled','disabled'); 
    } 
        butCreate.addEventListener('click', function () { 
            butCreate.removeAttribute('disabled'); 
            console.log('4'); 
        }); 
 
    body.insertBefore(header,elem); 
    header.appendChild(label1); 
    header.appendChild(select1); 
    header.appendChild(label2); 
    header.appendChild(select2); 
    header.appendChild(butCreate); 
    header.appendChild(butDelete);
<body id = 'kappa'> 
<div id = 'calendaric'></div>

Answer 1

У вас нет обработчиков события изменения селектов, поэтому нельзя сделать кнопку снова активной

const enableButtonIfNeeded = () => {
  if (select1.value !== select1.children[0].value &&
      select2.value !== select2.children[0].value) {
    butCreate.removeAttribute('disabled')
  } else {
    butCreate.setAttribute('disabled','disabled');
  }
}
select1.onchange = enableButtonIfNeeded;
select2.onchange = enableButtonIfNeeded;

Полный пример

let header = document.createElement('div'); 
    let select1 = document.createElement('select'); 
    let select2 = document.createElement('select'); 
    let label1 = document.createElement('label'); 
    let label2 = document.createElement('label'); 
    let body = document.getElementById('kappa'); 
    let elem = document.getElementById('calendaric'); 
    let butCreate = document.createElement('button'); 
    let butDelete = document.createElement('button'); 
 
    let monthArray = ['Выбрать месяц',"Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", 
        "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"]; 
 
    let yearArray = ['Выбрать год','1980','1981','1982','1983','1984','1985','1986','1987','1988','1989','1990','1991','1992', 
    '1993','1994','1995','1996','1997','1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009', 
        '2010','2011','2012','2013','2014','2015','2016','2017','2018','2019']; 
 
    label1.textContent = 'Месяц: '; 
    label2.textContent = ' Год: '; 
    butCreate.textContent = 'Создать'; 
    butDelete.textContent = 'Удалить'; 
    butCreate.style.marginLeft = '7px'; 
    butDelete.style.marginLeft = '7px'; 
 
    //цикл для заполнения тега select массивом 
    for(let i = 0;i<monthArray.length;i++){ 
        let monthArray_ = monthArray[i]; 
        let optionFill = document.createElement('option'); 
        optionFill.className = 'month'; 
        optionFill.textContent = monthArray_; 
        optionFill.value = monthArray_; 
        select1.appendChild(optionFill); 
    } 
    //цикл для заполнения тега select массивом 
    for(let i = 0;i<yearArray.length;i++){ 
        let yearArray_ = yearArray[i]; 
        let optionFill = document.createElement('option'); 
        optionFill.className = 'year'; 
        optionFill.textContent = yearArray_; 
        optionFill.value = yearArray_; 
        select2.appendChild(optionFill); 
    } 
 
    // butDelete.addEventListener('click', function(){ 
    // 
    // }); 
 
    //неактивность кнопки!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
    if((select1.value = select1.children[0].value)||(select2.value = select2.children[0].value)){ 
        butCreate.setAttribute('disabled','disabled'); 
    } 
    butCreate.addEventListener('click', function () { 
        console.log('It works!'); 
    }); 
 
    body.insertBefore(header,elem); 
    header.appendChild(label1); 
    header.appendChild(select1); 
    header.appendChild(label2); 
    header.appendChild(select2); 
    header.appendChild(butCreate); 
    header.appendChild(butDelete); 
     
const enableButtonIfNeeded = () => { 
  if (select1.value !== select1.children[0].value && 
      select2.value !== select2.children[0].value) { 
    butCreate.removeAttribute('disabled'); 
  } else { 
    butCreate.setAttribute('disabled','disabled'); 
  } 
} 
 
select1.onchange = enableButtonIfNeeded; 
select2.onchange = enableButtonIfNeeded;
<body id = 'kappa'> 
<div id = 'calendaric'></div>

READ ALSO
Как сделать копирование куска кода в буфер обмена на js?
javascript

Как сделать копирование куска кода в буфер обмена на js?

Для сотрудников был сделан скрипт, для формирования email письмаЗаполняем поля, а ниже формируется письмо в формате html (подставляются данные...

 108
Что делает эта часть кода?
javascript

Что делает эта часть кода?

Есть такой код:

 123
Порядок вызова функции js async
javascript

Порядок вызова функции js async

С прошлым примером все получилось, поэкспериментировал - вроде бы все работаетРешил применить в задаче

 104
задача на сортировку строки
javascript

задача на сортировку строки

Нашел интересную задачку, но решение до конца не смог довестиНаписать функцию, которая на вход получает строку, которая содержит числа (пример:...

 111