CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Evgeniy
Evgeniy

Reputation: 2595

Set display duration

I have a HTML code, like 

<button id="save" onclick="save_options()">Save</button>

<div id="status"></div>`

and a piece of javascript, like 

function save_options() {
  var api = document.getElementById('wptk').value;
    chrome.storage.sync.set({
    savedApi: api,
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'OK! API Key saved!';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

document.getElementById('save').addEventListener('click', save_options);

After the button is clicked, in the div id="status" appears after 750 milliseconds a message OK! API Key saved!. Thats fine.

But the message is disappearing very fast! - how could i define the display duration of the message?

Upvotes: 0

Views: 461

Answers (1)

Steven Spungin
Steven Spungin

Reputation: 29071

You are clearing the status after 750 milliseconds. Change it to 5 seconds.

setTimeout(function() {
      status.textContent = '';
    }, 5000);

If you want to delay displaying the message, you will need to set the message after 750 milliseconds, set another timer, and then clear it.

// Update status to let user know options were saved.
var status = document.getElementById('status');

setTimeout(function() {
  status.textContent = 'OK! API Key saved!';
  setTimeout(function() {
    status.textContent = ''
  }, 5000);
}, 750);

Upvotes: 3

Related Questions