Change Time on timer upon click of a button

Question

I am currently trying to set up a site that will have alternating images that switch upon a timer. I have a prototype for the feature set up, but I want to do something extra. I want it so that when I click a button the image changes automatically. I set this up, but now I run into the issue that a user may not have enough time to see it, so I want to be able to set the timer up so that when the button is clicked it will go back to the set time at which the image changes, so users get a full 30 seconds. Is there anyway to do this?

Basically time = 30 or 60 when button is clicked

    time = 60;
interval = setInterval(function() {
  time--;
  document.getElementById('Label1').innerHTML =
    "" + time + " seconds"
    if (time == 0) {
      document.getElementById('downtown').click ();
      time = 60;
    } else if (time == 30)
      document.getElementById('rockBottom').click();
}, 1000)

https://codepen.io/Aidan_Monner/pen/JjGMEPe

Answer 1

time = 60;
function Timer(fn, t) {
    var timerObj = setInterval(fn, t);
}
var timer = new Timer(function() {
    time--;
  document.getElementById('Label1').innerHTML =
    "" + time + " seconds"
    if (time == 0) {
      down();
      time = 60;
    } else if (time == 30)          document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi4WsAEqQEs.jpg';
}, 1000);
function rockbo() { 
 time = 60;
document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi4WsAEqQEs.jpg';
}
function down() { 
 time = 60;
document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi3WsAIIYse.jpg';
}

<p id='Label1'> Time </p>
  
  <img id="myImage" src="https://pbs.twimg.com/media/EVXFdi3WsAIIYse.jpg" height="200" width="350">
  
  
  <button id="rockBottom" onclick="rockbo()"> Rock Bottom </button>

<button id="downtown" onclick="down()"> Downtown Bikini Bottom </button>

This is how it should be:

HTML body:

<p id='Label1'> Time </p>
  
  <img id="myImage" src="https://pbs.twimg.com/media/EVXFdi3WsAIIYse.jpg" height="200" width="350">
  
  
  <button id="rockBottom" onclick="rockbo()"> Rock Bottom </button>

<button id="downtown" onclick="down()"> Downtown Bikini Bottom </button>

JS:

time = 60;
function Timer(fn, t) {
    var timerObj = setInterval(fn, t);
}
var timer = new Timer(function() {
    time--;
  document.getElementById('Label1').innerHTML =
    "" + time + " seconds"
    if (time == 0) {
      down();
      time = 60;
    } else if (time == 30)
      document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi4WsAEqQEs.jpg';
}, 1000);
function rockbo() { 
 time = 60;
document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi4WsAEqQEs.jpg';
}
function down() { 
 time = 60;
document.getElementById('myImage').src='https://pbs.twimg.com/media/EVXFdi3WsAIIYse.jpg';
}

Hope that solves it.