Swap element is Array

by maxell4o

JavaScript

const list = [1, 2, 3, 4, 5, 6, 7];

function render() {
  let template = '';
  template += '<div class="container">';
  for (const [index, element] of Object.entries(list)) {
    template += `
    <div class="element">
    	<span> - ${element} - </span>
      <button class="up" ${index == 0 ? 'disabled' : ''}>Up</button>
      <button class="down" ${list.length - 1 == index ? 'disabled' : ''}>Down</button>
    </div>
    `
  }
  template += '</div>';
  document.body.innerHTML = template;
  attachEvents();
}

function getIndexByOfElement(e) {
	return [...e.target.closest('.container').children]
      .indexOf(e.target.closest('.element'))
}

function attachEvents() {
  document.querySelectorAll('.down').forEach(el => el.addEventListener('click', e => {
    const index = getIndexByOfElement(e);
    [list[index], list[index+1]] = [list[index+1], list[index]];
    render();
  }));

  document.querySelectorAll('.up').forEach(el => el.addEventListener('click', e => {
  const index = getIndexByOfElement(e);
    [list[index], list[index-1]] = [list[index-1], list[index]];
    render();
  }));
}


render();