Переключить iFrame с помощью одной кнопки

Question

Заранее спасибо за помощь!Мои навыки JavaScript довольно ограничены.

Я работаю с сайтом WordPress, пытаюсь переключаться между двумя iFrames.

У меня есть код, который работает, но я хотел бы сделать кнопку какодна кнопка вместо двух, как она сейчас стоит.Я искал часы и не могу найти решение.

Кроме того, я не могу использовать jquery.

Вот что у меня есть, спасибо!

var buttonOne = document.getElementById("one");
var buttonTwo = document.getElementById("two");
var iframe = document.getElementById("iframe");

buttonOne.addEventListener("click", buttonClick, false);
buttonTwo.addEventListener("click", buttonClick, false);

function buttonClick(e){
    if(e.target.id === "one"){
        iframe.src = "https://www.google.com/";
    }else{
        iframe.src = "https://www.ask.com/";
    } 
};

<button id="one">List View</button>
<button id="two">Calendar View</button>
<iframe id="iframe" src="https://www.google.com/" frameborder="0" width="100%" height="1115px"></iframe>

Answer 1

Вы можете проверить ниже код:
Создание HTML:

<button id="one" data-view_type="calendar">Toggle View</button>
<iframe id="iframe" src="https://www.google.com/" frameborder="0" width="100%" height="1115px"></iframe>

Код Javascript:

var buttonOne = document.getElementById("one");
var iframe = document.getElementById("iframe");

buttonOne.addEventListener("click", buttonClick, false);

function buttonClick(e){
    var btnObj = e.target;
    var view_type = btnObj.getAttribute("data-view_type");
    if(view_type === "list"){
        iframe.src = "https://www.google.com/";
        btnObj.setAttribute("data-view_type", "calendar");
    }else{
        iframe.src = "https://www.ask.com/";
        btnObj.setAttribute("data-view_type", "list");
    } 
};

Answer 2

Попробуйте использовать массив src

var btn = document.getElementById("btn");
var iframe = document.getElementById("iframe");
var srcs = ["https://www.google.com/", "https://www.ask.com/"];
var i = 0;
btn.addEventListener("click", buttonClick, false);

function buttonClick(e) {
  iframe.src = srcs[i];
  console.log('loading src', srcs[i]);
  i = ((1 + i) % srcs.length);
};

btn.click(); /* load first on page load */

<button id="btn">Toggle View</button>
<iframe id="iframe" frameborder="0" width="100%" height="1115px"></iframe>