Disable active tab button using JavaScript

Question

I have a tabs script that had four videos in the same spot. I want to disable the current onload button "Word" and then disable the "active" button and enable the rest.

Example:

• Clicks Word - Word button is disabled (All others enabled).
• Clicks Excel - Excel button is disabled (All others enabled), etc..

Here is the image of the layout:

Here is the code:

var word = 'https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/S-nHYzK-BVg?rel=0&controls=0&showinfo=0
var excel = 'https://www.microsoft.com/en-us/videoplayer/embed/57a73113-90a7-4134-b4d2-b688665ee9df?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/rwbho0CgEAE?rel=0&controls=0&showinfo=0
var powerpoint = 'https://www.microsoft.com/en-us/videoplayer/embed/98700e07-e32e-4c85-b04f-910750316a5d?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/XF34-Wu6qWU?rel=0&controls=0&showinfo=0
var onenote = 'https://www.microsoft.com/en-us/videoplayer/embed/866b3f9f-b86e-471d-a137-a2408b88e545?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; // https://www.youtube.com/embed/_bKiatpaacg?rel=0&controls=0&showinfo=0

var player = document.getElementById('player');

function videoSelect(element) {
  if (element === "word") {
    player.innerHTML = '<iframe width="560" height="315" src="' + word + '"></iframe>'; //<iframe width="560" height="315" src="' + word + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  }
  if (element === "excel") {
    player.innerHTML = '<iframe width="560" height="315" src="' + excel + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "powerpoint") {
    player.innerHTML = '<iframe width="560" height="315" src="' + powerpoint + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "onenote") {
    player.innerHTML = '<iframe width="560" height="315" src="' + onenote + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
}

if (videoSelect) {
  videoSelect.disabled = true;
} else {
  videoSelect.disabled = false;
}

<div class="row">
  <div id="options">
    <button type="button" id="word" onclick="videoSelect(this.id)">Word</button>
    <button type="button" id="excel" onclick="videoSelect(this.id)">Excel</button>
    <button type="button" id="powerpoint" onclick="videoSelect(this.id)">
		PowerPoint</button>
    <button type="button" id="onenote" onclick="videoSelect(this.id)">
		OneNote</button>
  </div>
  <div id="player">
    <iframe width="560" height="315" src="https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us"></iframe>
  </div>
</div>

Answer 1

You could enable all on click and disable the clicked

//Get all the buttons
var buttons = document.querySelectorAll('#options button');

//Enable All
buttons.forEach(function(button) {
    button.disabled = false;
});

//Disable the clicked one
document.getElementById(element).disabled = true;

NTOE: You could disable the default button from the HTML by adding the disabled attribute.

var word = 'https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/S-nHYzK-BVg?rel=0&controls=0&showinfo=0
var excel = 'https://www.microsoft.com/en-us/videoplayer/embed/57a73113-90a7-4134-b4d2-b688665ee9df?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/rwbho0CgEAE?rel=0&controls=0&showinfo=0
var powerpoint = 'https://www.microsoft.com/en-us/videoplayer/embed/98700e07-e32e-4c85-b04f-910750316a5d?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/XF34-Wu6qWU?rel=0&controls=0&showinfo=0
var onenote = 'https://www.microsoft.com/en-us/videoplayer/embed/866b3f9f-b86e-471d-a137-a2408b88e545?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; // https://www.youtube.com/embed/_bKiatpaacg?rel=0&controls=0&showinfo=0

var player = document.getElementById('player');

function videoSelect(element) {
  var buttons = document.querySelectorAll('#options button');

  buttons.forEach(function(button) {
    button.disabled = false;
  });

  document.getElementById(element).disabled = true;

  if (element === "word") {
    player.innerHTML = '<iframe width="560" height="315" src="' + word + '"></iframe>'; //<iframe width="560" height="315" src="' + word + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  }
  if (element === "excel") {
    player.innerHTML = '<iframe width="560" height="315" src="' + excel + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "powerpoint") {
    player.innerHTML = '<iframe width="560" height="315" src="' + powerpoint + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "onenote") {
    player.innerHTML = '<iframe width="560" height="315" src="' + onenote + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
}

<div class="row">
  <div id="options">
    <button type="button" id="word" onclick="videoSelect(this.id)" disabled>Word</button>
    <button type="button" id="excel" onclick="videoSelect(this.id)">Excel</button>
    <button type="button" id="powerpoint" onclick="videoSelect(this.id)">
		PowerPoint</button>
    <button type="button" id="onenote" onclick="videoSelect(this.id)">
		OneNote</button>
  </div>
  <div id="player">
    <iframe width="560" height="315" src="https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us"></iframe>
  </div>
</div>

Answer 2

Just write a function, that changes the .disabled state of the tab buttons according to the active button:

// gather the tab buttons
var tabButtons = document.querySelectorAll('#options > button');

function enableTabButton(buttonId) {
    // iterate over them and enable all of them, 
    // except the one with the given id
    tabButtons.forEach(function(btn) {
        btn.disabled = btn.id === buttonId;
    });
}

---

var word = 'https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/S-nHYzK-BVg?rel=0&controls=0&showinfo=0
var excel = 'https://www.microsoft.com/en-us/videoplayer/embed/57a73113-90a7-4134-b4d2-b688665ee9df?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/rwbho0CgEAE?rel=0&controls=0&showinfo=0
var powerpoint = 'https://www.microsoft.com/en-us/videoplayer/embed/98700e07-e32e-4c85-b04f-910750316a5d?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; //https://www.youtube.com/embed/XF34-Wu6qWU?rel=0&controls=0&showinfo=0
var onenote = 'https://www.microsoft.com/en-us/videoplayer/embed/866b3f9f-b86e-471d-a137-a2408b88e545?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us'; // https://www.youtube.com/embed/_bKiatpaacg?rel=0&controls=0&showinfo=0

// gather the tab buttons
var tabButtons = document.querySelectorAll('#options > button');

function enableTabButton(buttonId) {
  // iterate over them and enable all of them, 
  // except the one with the given id
  tabButtons.forEach(function(btn) {
    btn.disabled = btn.id === buttonId;
  });
}

// set the initially enabled button
enableTabButton('word');

var player = document.getElementById('player');

function videoSelect(element) {
  enableTabButton(element);

  if (element === "word") {
    player.innerHTML = '<iframe width="560" height="315" src="' + word + '"></iframe>'; //<iframe width="560" height="315" src="' + word + '" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  }
  if (element === "excel") {
    player.innerHTML = '<iframe width="560" height="315" src="' + excel + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "powerpoint") {
    player.innerHTML = '<iframe width="560" height="315" src="' + powerpoint + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
  if (element === "onenote") {
    player.innerHTML = '<iframe width="560" height="315" src="' + onenote + '"></iframe>'; // frameborder="0" allow="autoplay; encrypted-media" allowfullscreen
  }
}

<div class="row">
  <div id="options">
    <button type="button" id="word" onclick="videoSelect(this.id)">Word</button>
    <button type="button" id="excel" onclick="videoSelect(this.id)">Excel</button>
    <button type="button" id="powerpoint" onclick="videoSelect(this.id)">
		PowerPoint</button>
    <button type="button" id="onenote" onclick="videoSelect(this.id)">
		OneNote</button>
  </div>
  <div id="player">
    <iframe width="560" height="315" src="https://www.microsoft.com/en-us/videoplayer/embed/b45fdfa1-9cfc-4621-9b41-cf14f300af5a?pid=ocpVideo0-innerdiv-oneplayer&postJsllMsg=true&maskLevel=20&market=en-us"></iframe>
  </div>
</div>