I need to modify my code from es6 to es4-3 in order to make it compatible with IE11. My goal is to toggle the class "open" for three buttons that will open a small div.
JS:
let customSelect = document.getElementsByClassName('input-select')
Array.from(customSelect).forEach((element, index) => {
element.addEventListener('click', function () {
Array.from(customSelect).forEach((element, index2) => {
if (index2 !== index) {
element.classList.remove('open')
}
})
this.classList.add('open')
})
for (const option of document.querySelectorAll('.select-option')) {
option.addEventListener('click', function () {
if (!this.classList.contains('selected')) {
this.parentNode
.querySelector('.select-option.selected')
.classList.remove('selected')
this.classList.add('selected')
this.closest('.input-select').querySelector(
'.input-select__trigger span'
).textContent = this.textContent
}
})
}
// click away listener for Select
document.addEventListener('click', function (e) {
var isClickInside = element.contains(e.target);
if(!isClickInside) {
element.classList.remove('open');
}
return
})
})
HTML:
<div class="input-select">
<button></button>
<div class="select-options">
<h1>Hi</h1>
<h1>Bye</h1>
</div>
</div>
<div class="input-select">
<button></button>
<div class="select-options">
<h1>Hi</h1>
<h1>Bye</h1>
</div>
</div><div class="input-select">
<button></button>
<div class="select-options">
<h1>Hi</h1>
<h1>Bye</h1>
</div>
</div>
This is pure es6 code i need to convert it into lower version of js