How to set a value from an input field when I press a “set” button

I just started trying to learn how to make google chrome extensions, and it’s a bit tricky for me, as i have very little experience with web development. I’m just dipping my toes with this little project 😀

I’ve been using the chrome samples to reference myself for my purposes, but as far as input goes, I have had no luck.

I want to send myself a notification every x amount of minutes. I used the help of Drink Water Event Popup example in the samples website that i linked above. So that one gives you 3 buttons, 15 minutes and 30 minutes, as well as a sample of .01 seconds (so immediate notification).

What I’m trying to add to this, is the ability to type ‘x’ number, and press a “set” button that will notify you in that ‘x’ amount of minutes.

So i’ve added to the .html code inside the tags


and for my set button the following: inside the .js file

document.getElementById('set').addEventListener('click', setAlarm); // This one

document.getElementById('sampleSecond').addEventListener('click', setAlarm);
document.getElementById('15min').addEventListener('click', setAlarm);
document.getElementById('30min').addEventListener('click', setAlarm);
document.getElementById('cancelAlarm').addEventListener('click', clearAlarm);

I just haven’t been able to find any answers anywhere about how to give myself the ability to set the amount of minutes based on the number inside the input text field.

Any resources or answer or examples I could look at would be greatly appreciated!!

Thank you