Change content with buttons

Question

I want to change the content of the DIV with two buttons. Looking for pure javaScript solution. Additionally, I would like to have an autoplay function which changes the content every 2 seconds. When one of the buttons is clicked, autoplay function should stop.

Now, I managed to do this with "poor" code, and without autoplay-function. Perhaps someone here knows a better way to do this?

change = document.getElementById("change");

button2 = document.getElementById("button2");
button2.addEventListener("click", function() {
  change.style.background = "orange";
  button1.style.background = "orange";
  button2.style.background = "black";
});

button1 = document.getElementById("button1");
button1.addEventListener("click", function() {
  change.style.background = "black";
  button1.style.background = "black";
  button2.style.background = "orange";
});

#change {
  width: 300px;
  height: 100px;
  background: rgba(0, 0, 0, 1);
}

#button1,
#button2 {
  color: grey;
  display: block;
}

<div id="change"></div>
<button id="button1">Button 1</div>
<button id="button2">Button 2</div>

Answer 1

So, it seems you want some sort of carousel.

The following sample below allows you to go back or forward through the content and also has the ability to auto-progress.

Your views should be held in an array/list data-type.

Lastly, I would use classes rather than ids. This makes the code more extensible. This could later be modified to create a plugin, if desired.

const views = [{
  content : '<h1>View #1</h1>',
  style : { backgroundColor : 'orange', color : 'black' }
}, {
  content : '<h1>View #2</h1>',
  style : { backgroundColor : 'black', color : 'orange' }
}, {
  content : '<h1>View #3</h1>',
  style : { backgroundColor : 'red', color : 'white' }
}];

var timerId = null;
var currentView = 0;

window.addEventListener('DOMContentLoaded', onReady);

function onReady() {
  let ct = document.querySelector('.container');
  ct.querySelector('.btn-prev').addEventListener('click', handlePrevClick);
  ct.querySelector('.btn-next').addEventListener('click', handleNextClick);
  ct.querySelector('.btn-auto').addEventListener('click', handleAutoClick);
  
  initializeView();
}

function handlePrevClick() {
  currentView = (currentView + views.length - 1) % views.length;
  initializeView();
}

function handleNextClick() {
  currentView = (currentView + 1) % views.length;
  initializeView();
}

function handleAutoClick(e) {
  if (timerId == null) {
    e.target.innerHTML = 'Stop';
    timerId = setInterval(() => {
      handleNextClick();
    }, 1000);
  } else {
    e.target.innerHTML = 'Auto';
    clearInterval(timerId);
    timerId = null;
  }
}

function initializeView() {
  let container = document.querySelector('.container');
  let viewport = container.querySelector('.viewport');
  let view = views[currentView];
  
  viewport.innerHTML = view.content; 
  //viewport.style.backgroundColor = view.style.backgroundColor;
  //viewport.style.color = view.style.color;
  Object.assign(viewport.style, view.style); 
}

.container {
  width: 300px;
}

.viewport {
  width: 100%;
  height: 100px;
  border: thin solid grey;
}

.btn-container {
  width: 100%;
  text-align: center;
  margin-top: 0.5em;
}

.btn-container button {
  margin: auto 0.25em;
}

<div class="container">
  <div class="viewport"></div>
  <div class="btn-container">
    <button class="btn-prev">Prev</button>
    <button class="btn-auto">Auto</button>
    <button class="btn-next">Next</button>
  </div>
</div>