I have 3 prompts, the first is to enter hours and the second minutes, when the user click on button:add n minutes, I would like to display a third prompt by proposing several minutes.
My problem is that my command prompt is executed before the clik on button.
My HTML
<body >
<h1>Exercise 8</h1>
<label>Hours : <input type="text" id='h' /></label>
<label>Minutes : <input type="text" id='m' /></label>
<button id="btn1">Pass 1 minute</button>
<button id="btn2">Add n minutes</button>
<script src="script.js"></script>
</body>
My JS
var hours = parseInt(prompt('Enter your hours please : '));
var minutes = parseInt(prompt('Enter your minutes please : '));
var btnPassOneMinute = document.getElementById('btn1');
var btnPass_N_Minute = document.getElementById('btn2');
/*if (hours != null) {
main();
}*/
btnPassOneMinute.addEventListener('click', addOneMinute);
btnPass_N_Minute.addEventListener('click', add_N_Minute);
main();
addOneMinute();
add_N_Minute();
function main(){
if(minutes > 59){
minutes = 0;
hours += 1;
}
if(hours > 23){
hours = 0;
}
document.getElementById('h').value = hours;
document.getElementById('m').value = minutes;
}
function addOneMinute(){
main();
minutes += 1;
}
function add_N_Minute(){
//main();
var addMinute = parseInt(prompt('Add your minutes : '));
minutes += addMinute;
if(addMinute > 59){
minutes = 0;
}
if(minutes > 59){
minutes = 0;
hours += 1;
}
if(hours > 23){
hours = 0;
}
document.getElementById('h').value = hours;
document.getElementById('m').value = minutes;
}
var hours = parseInt(prompt('Enter your hours please : '));
var minutes = parseInt(prompt('Enter your minutes please : '));
var btnPassOneMinute = document.getElementById('btn1');
var btnPass_N_Minute = document.getElementById('btn2');
/*if (hours != null) {
main();
}*/
btnPassOneMinute.addEventListener('click', addOneMinute);
btnPass_N_Minute.addEventListener('click', add_N_Minute);
main();
addOneMinute();
add_N_Minute();
function main(){
if(minutes > 59){
minutes = 0;
hours += 1;
}
if(hours > 23){
hours = 0;
}
document.getElementById('h').value = hours;
document.getElementById('m').value = minutes;
}
function addOneMinute(){
main();
minutes += 1;
}
function add_N_Minute(){
//main();
var addMinute = parseInt(prompt('Add your minutes : '));
minutes += addMinute;
if(addMinute > 59){
minutes = 0;
}
if(minutes > 59){
minutes = 0;
hours += 1;
}
if(hours > 23){
hours = 0;
}
document.getElementById('h').value = hours;
document.getElementById('m').value = minutes;
}
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="cours.css">
</head>
<body >
<h1>Exercise 8</h1>
<label>Hours : <input type="text" id='h' /></label>
<label>Minutes : <input type="text" id='m' /></label>
<button id="btn1">Pass 1 minute</button>
<button id="btn2">Add n minutes</button>
<script src="script.js"></script>
</body>
</html>
Thank you...
Related
I made a simple clock and used a button to switch to a stopwatch. Since I couldn't figure out a better solution I duplicated the container, asigned a function that toggles display on/off on the containers to swap between the clock and stopwatch so that it remains in the same position. I don't understand why my stopwatch is not incrementing and what I should do to solve this problem. Any help would be appreciated. Here's my code:
<div id="container">
<div id="clock">
<span id="back">88:88:88</span>
<span id="front">00:00:00</span>
<div class="buttons">
<button id="button-left" onclick="myFunction()"><i class="fas fa-stopwatch"></i></button>
<button id="button-stop"><i class="fa-solid fa-stop"></i></button>
<button id="button-play" ><i class="fa-solid fa-play"></i></button>
<button id="button-right"><i class="fa-solid fa-delete-left"></i></button>
</div>
</div>
</div>
<div id="container-2">
<div id="clock-2">
<span id="back-2">88:88:88</span>
<span id="front-2">00:00:00</span>
<div class="buttons-2">
<button id="button-left-2" onclick="myFunction()"><i class="fas fa-stopwatch"></i></button>
<button id="button-stop-2" onclick="stopSW()"><i class="fa-solid fa-stop"></i></button>
<button id="button-play-2" onclick="startSW()"><i class="fa-solid fa-play"></i></button>
<button id="button-right-2" onclick="reset()"><i class="fa-solid fa-delete-left"></i></button>
</div>
</div>
</div>
function myFunction() {
var x = document.getElementById("container-2");
let y = document.getElementById("container");
if (x.style.display === "none") {
x.style.display = "block";
y.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "block";
}
}
function startSW() {
clearInterval(stopwatch);
start = setInterval(stopwatch, 1000);
}
function stopSW() {
clearInterval(start);
}
function reset(){
clearInterval(stopwatch);
document.getElementById("front-2").innerHTML = "00:00:00";
}
function stopwatch() {
let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;
seconds++;
if(seconds == 60){
seconds = 0;
minutes++;
if(minutes == 60) {
minutes = 0;
hours++;
}
}
if (seconds < 10){
displaySeconds = "0" + seconds;
} else {
displaySeconds = seconds;
}
if (minutes < 10){
displayMinutes = "0" + minutes;
} else {
displayMinutes = minutes;
}
if (hours < 10){
displayHours = "0" + hours;
} else {
displayHours = hours;
}
let stopwatchNow = displayHours + ":" + displayMinutes + ":" + displaySeconds;
document.getElementById("front-2").innerHTML = stopwatchNow;
}
Hello at the start of your stopwatch function you set
let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;
and that's what you display later in the code, you need to define this variables outside of this function
This is because in function stopwatch, every time this function runs you set
let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;
These variables will always be 0, since you set them when function runs. In order to fix this, you need to move them outside the function:
let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;
function stopwatch(){
// removed
seconds++; // this stays here
// the rest of your code goes in here
}
This way your variables won't reset to 0 when function starts to run
<div id="container-2">
<div id="clock-2">
<span id="front-2">00:00:00</span>
--- >>
<span id="back-2">88:88:88</span>
</div>
</div>
<div class="buttons-2">
<button id="button-left-2" onclick="myFunction()"><i class="fas fa-stopwatch"></i>fun</button>
<button id="button-stop-2" onclick="stopSW()"><i class="fa-solid fa-stop"></i>stop</button>
<button id="button-play-2" onclick="startSW()"><i class="fa-solid fa-play"></i>start</button>
<button id="button-right-2" onclick="reset()"><i class="fa-solid fa-delete-left"></i>reset</button>
</div>
<script>
function myFunction() {
var node = document.getElementById("back-2");
display(node);
}
var start;
function startSW() {
clearInterval(start);
start = setInterval(stopwatch, 1000);
}
function stopSW() {
clearInterval(start);
}
function reset(){
clearInterval(start);
document.getElementById("front-2").innerHTML = "00:00:00";
document.getElementById("back-2").innerHTML = "00:00:00";
hours = 0;
minutes = 0;
seconds = 0;
}
var hours = 0;
var minutes = 0;
var seconds = 0;
function stopwatch() {console.log('stopwatch')
seconds++;
if(seconds == 60){
seconds = 0;
minutes++;
if(minutes == 60) {
minutes = 0;
hours++;
}
}
display();
}
function display(node){
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;
if (seconds < 10){
displaySeconds = "0" + seconds;
} else {
displaySeconds = seconds;
}
if (minutes < 10){
displayMinutes = "0" + minutes;
} else {
displayMinutes = minutes;
}
if (hours < 10){
displayHours = "0" + hours;
} else {
displayHours = hours;
}
let stopwatchNow = displayHours + ":" + displayMinutes + ":" + displaySeconds;
if(!node)node=document.getElementById("front-2");
node.innerHTML = stopwatchNow;
}
</script>
there were a variety of mistakes,
clearInterval not being given the correct value
the time variables needed to be declared in global scope
i can only guess what myfunction is supposed to be doing
etc...
have fun
I've been developing a speed test typing game for some time now, and I've been stuck on how to take the time you finish from one HTML page (the game itself) to an alternate one (the score page). I've been trying to use import{} export{}, but I'm not 100% sure how they function and so they haven't exactly worked. I'll attach both the game HTML and Javascript code and the score HTML and Javascript code.
<!-- THIS IS THE HTML PAGE FOR THE GAME -->
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Typeboss || Speed Typing Web Game</title>
<link rel="stylesheet" href="../css/gamestyle.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Cabin:wght#500&display=swap');
</style>
<script src="../js/gamescript.js" defer></script>
<script src="../../main/js/mainscript.js" type="module" defer></script>
<script src="./scorescript.js" type="module" defer></script>
</head>
<body>
<div id="all">
<div id="stats">
<h1 id="bossHealth" class="stat">BOSS HEALTH:</h1>
<h1 id="time" class="stat"><span id="minutes">0</span>:<span id="seconds">00</span></h1>
</div>
<div id="boss">
<img src="../imgs/boss.png" width="400px" height="400px" id="bossSprite">
</div>
<div id="input">
<h3 id="outcome"></h3>
<center><p id="prompt"></p></center>
<textarea id="userInput" name="TypeBox" rows="4" cols="100" autofocus></textarea>
</div>
</div>
</body>
</html>
// THIS IS THE JAVASCRIPT CODE
let scoreTime;
var seconds = 0;
var minutes = 0;
let score = 0;
const userInput = document.getElementById("userInput");
const promptBox = document.getElementById("prompt");
const outcomeText = document.getElementById("outcome");
const bossHealthtText = document.getElementById("bossHealth");
const timer = document.getElementById("time");
const bossSprite = document.getElementById("bossSprite");
const secondsText = document.getElementById("seconds");
const minutesText = document.getElementById("minutes");
let gameActive = true;
document.addEventListener('keypress', function(event){
if (event.key === 'Enter'){
checkInput();
}
});
let bossHealth = 100;
let multiplier = 10;
let mistakes = 0;
//
const prompts = ["How much wood could a woodchuck chuck if a woodchuck could chuck wood?", "I will not lose another pilot.", "I can't find my keys!", "Live as if you were to die tomorrow.", "Toto, I've got a feeling we're not in Kansas anymore...", "May the force be with you.", "If our lives are already written, it would take a courageous man to change the script.", "An apple a day keeps the doctor away.", "Frankly, my dear, I don't give a damn.", "Hello, world!", "My favorite sport is basketball!", "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.", "You only live once, but if you do it right, once is enough.", "I'm the fastest typer in the wild west!", "Frosty the snowman!", "I'm not a big fan of ice cream.", "If birds can fly, then we should too.", "I don't like trucks, they look weird.", "I love typing!", "I'm a rocket man, burning on a fuse out there alone.", "The water was blue and the skies the same, it was summer."];
//GAME INIT
bossHealthtText.innerHTML = `BOSS HEALTH: ${bossHealth}`;
function getNewPrompt() {
promptChoice = Math.floor(Math.random() * prompts.length);
let previousPrompt = prompts[promptChoice];
if (previousPrompt === prompts[promptChoice]){
promptChoice = Math.floor(Math.random() * prompts.length);
console.log("COPY OFF");
}
promptBox.innerHTML = prompts[promptChoice];
}
function checkInput(){
if (userInput.value.trim() === promptBox.innerHTML.trim()){
outcome.innerHTML = "Correct";
bossHealth -= 10;
bossHealthtText.innerHTML = `BOSS HEALTH: ${bossHealth}`;
let hitSprite = Math.floor(Math.random() *2);
if(hitSprite === 0){
bossSprite.src = "../imgs/bosshit/bosshit1.png";
}
if(hitSprite === 1){
bossSprite.src = "../imgs/bosshit/bosshit2.png";
}
setTimeout(function(){
bossSprite.src = "../imgs/boss.png";
}, 1000);
if (bossHealth <= 0){
console.log("WORKING");
window.location.href = "./score.html";
createScore();
}
getNewPrompt();
userInput.value = null;
}
else{
outcome.innerHTML = "Try again...";
userInput.value = null;
multiplier --;
mistakes ++;
return;
}
}
function gameTimer(){
console.log("working");
setTimeout(function(){
setInterval(function(){
seconds++;
if(seconds === 60){
minutes ++;
seconds = 0;
}
if (seconds < 9){
secondsText.innerHTML = "0" + seconds;
}
if (seconds > 9){
secondsText.innerHTML = seconds;
}
if(minutes < 9){
minutesText.innerHTML = minutes;
}
if(minutes > 9){
minutesText.innerHTML = minutes;
}
if (seconds < 9){
scoreTime = minutes + ":" + "0" + seconds;
}
if (seconds > 9){
scoreTime = minutes + ":" + seconds;
}
timePoints = minutes + seconds * 2;
return scoreTime;
return timePoints;
}, 1000)
}, 1000);
}
function game(){
gameTimer();
getNewPrompt();
createHeart();
}
function createScore(){
let bonus = Math.floor(Math.random() * 500);
score = timePoints * multiplier + bonus;
export { score };
}
game();
<!-- THIS IS THE SCORE HTML PAGE -->
<!DOCTYPE html>
<!DOCTYPE html>
<html onclick="celebrate()">
<head>
<meta charset="utf-8">
<title>Typeboss || Your Score!</title>
<link rel="stylesheet" href="../css/scorestyle.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Cabin:wght#500&display=swap');
</style>
</head>
<body>
<center><h1 style="color: whitesmoke;" id="header">YOU BEAT THE BOSS!</h1></center>
<center><p>(CLICK FOR VICTORY MUSIC)</p></center>
<h3 id="time">TIME:</h3>
<p id="playertime"></p>
<h3 id="score">SCORE:</h3>
<p id="playertime"></p>
<h3 id="mistakes">MISTAKES:</h3>
<p id="playertime"></p>
<h2 id="highscore"></h2>
<button id="redirect">BACK TO HOME</button>
</body>
<script type="module" src="../js/gamescript.js" defer></script>
</html>
// AND HERE IS THE SCORE'S CODE
winMusic = new Audio();
winMusic.src = "./winmusic.mp3";
function celebrate(){
winMusic.play();
winMusic.loop = tru
}
import { score } from "./gamescript.js";
const scoreText = document.getElementById("score");
scoreText.innerHTML = score + " points!"
I hope I can get this issue resolved, and I hope this post was clear enough to understand. This is my first post on stack so please do let me know if I formatted it wrong, and any feedback that could make it easier to understand in the future. Thank you in advance and have a good day.
use cookie for saving variables!
function setCookie(cname, cvalue, exdays) {
const d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
let expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
let name = cname + "=";
let ca = document.cookie.split(';');
for(let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
let user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
You can use Session Storage or for this.
<html>
<head>
<script>
var seconds=3600;
function secondPassed() {
var minutes = Math.round((seconds-30)/60);
console.log(minutes);
var hours=Math.round((minutes)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML =hours + ":"+ minutes + ":" + remainingSeconds;
if (seconds == 0) {
clearInterval(myVar);
document.getElementById('countdown').innerHTML = "Time Out";
} else {
seconds--;
}
}
var myVar = setInterval(secondPassed ,1000);
</script>
</head>
<body>
<p id="countdown"></p>
</body>
</html>
MY Question : page refresh and countdown timer does not continue.
You can do this by using javascript cookies only but you need to use two file
first file contains total time you need for countdown i.e in your code is 3600 seconds
let us take first file index.html write code
<!DOCTYPE html>
<html>
<head>
<title>Countdown timer</title>
<script type="text/javascript">
var seconds = 3600;
document.cookie = "timer=" + seconds;
window.location.href = "time.html";
</script>
</head>
<body>
</body>
</html>
Next second file let us take time.html add below code
<html>
<head>
<script>
function getCookie(name) {
var nameEQ = name + "=";
//alert(document.cookie);
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(nameEQ) != -1) return c.substring(nameEQ.length,c.length);
}
return null;
}
// var seconds=7200;
// document.cookie = "timer=" + seconds;
function secondPassed() {
seconds = parseInt(getCookie('timer'));
console.log(seconds);
var minutes = parseInt(seconds / 60, 10);
console.log(minutes);
var remainingSeconds = parseInt(seconds % 60, 10);
if (remainingSeconds < 10) {
remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ":" + remainingSeconds + ' minutes remaning';
if (seconds == 0) {
clearInterval(myVar);
document.getElementById('countdown').innerHTML = "Time Out";
} else {
seconds--;
}
document.cookie = "timer=" + (seconds);
}
var myVar = setInterval(secondPassed ,1000);
</script>
</head>
<body>
<p id="countdown"></p>
</body>
</html>
Note : whenever you want to run countdown timer just run time.html, even if you refresh also, time remains same
Note : if you want to refresh page or want to add when time up add your activity in
if (seconds == 0) {
clearInterval(myVar);
// add activity
}
I have created a timer using jQuery and javascript. I have appended the timer in a page. Each timer has start, stop and reset button. The problem is that when i click on the second, third, fourth.......... etc timer, only the first timer is working. No other timer is working for me.Below is my code. Can anyone please help me.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
window.onload=function(){document.getElementById('time').innerHTML = "00" + ":" +"00" + ":" + "00";}
</script>
<div class="timers" id="act">
<div id="time"></div>
<div class="timer_controls">
<input class="btnStart" id="start" type="button" value="Start" onclick="timer()" />
<input class="btnreset" id="reset" type="button" value="Reset" onclick="reset()" />
<input class="btnStop" id="stop" type="button" value="Stop" onclick="stopper()" />
</div>
</div>
<input id="appends" type="button" value="append" />
<div class="container"></div>
<style type="text/css">
#time{
font-size:50pt;
}
.container{
float:left;
width:100%;
height:1000px;
}
</style>
<script type="text/javascript">
i = 0;
var w;
function timer() {
if (i > 3599) {
var H = Math.floor(i / 3600);
}
else {
var H = 0;
}
var M = i - (H * 3600)
if (M > 59) {
M = Math.floor(M / 60)
}
else {
M = 0
}
var S = i - (M * 60)
if (S > 3599) {
S = Math.floor(M / 3600)
}
if (H < 10) {
H = "0" + H;
}
if (M < 10) {
M = "0" + M;
}
if (S < 10) {
S = "0" + S;
}
document.getElementById('time').innerHTML = H + ":" + M + ":" + S;
w=setTimeout('timer()', 1000);
i++;
}
function stopper(){
clearTimeout(w);
}
function reset() {
i=0;
document.getElementById('time').innerHTML = "00" + ":" +"00" + ":" + "00";
clearTimeout(w);
}
$("#appends").click(function() {
var index = $('.timers').length;
clearTimeout(w);
var timing=$('.timers').html();
$('.container').append('<div class="timers" id="act_'+(index+1)+'">'+timing+'<input class="btnStart" id="start'+(index+1)+'" type="button" value="Start" onclick="timer()" />'+'</div>');
});
</script>
</body>
</html>
You can have only one uniqe id per HTML element on page. Every time you append new timer they all have similar Id's. So you need to change some logic of your script
I'm new to making extensions and this is driving me crazy. My countdown works when I load the page locally in the browser, but when I try to make it an extension, only the html shows, and the javascript doesn't work (ex. When I click on the start button when launching the extension, nothing changes and the countdown never starts.) I put my code below, dows it have somethning to do with me not putting the javascript in the "background"? I didnt understand that part of the Chrome Docs
<html>
<head>
</head>
<body>
<script>var countdown;
var countdown_number=10000*3600
var days;
var hours;
var minutes;
var seconds;
function countdown_init() {
//countdown_number = 11;
countdown_trigger();
}
function countdown_trigger() {
if(countdown_number > 0) {
countdown_number--;
//store()
days = Math.floor(countdown_number/(3600*24))
hours = (Math.floor(countdown_number/(3600))-days*24) % 24;
minutes = (Math.floor(countdown_number/(60))-hours*60) % 60;
seconds = (Math.floor(countdown_number)-minutes*60) % 60;
update_counter();
if(countdown_number > 0) {
countdown = setTimeout('countdown_trigger()', 1000);
}
}
}
function update_counter(){
document.getElementById('timer_text').innerHTML = "Days: "+days+"<br>"+
" Hours: " + hours +"<br>"+" Minutes: " + minutes +"<br>"+" Seconds: " + seconds;
}
function countdown_clear() {
clearTimeout(countdown);
}
function countdown_reset(){
countdown_number=10000*3600;
update_counter();
clearTimeout(countdown);
}
function writeItem(){
localStorage[1] = countdown_number;
}
function returnItem() {
var stored = localStorage[1];
document.getElementById('item').innerHTML=countdown_number;
}
function store(){
writeItem();
}
</script>
<div>
<h1> 10,000 Hours Timer </h1>
<input type="button" value="start countdown" onclick="countdown_init()" />
<input type="button" value="stop countdown" onclick="countdown_clear()" />
<input type="button" value="reset" onclick="countdown_reset()"/>
<input type="button" value="store" onclick="store()"/>
<p id="item">Hi</p>
</div>
<div id="timer_text">Ready To Start?</div>
</body>
</html>
Chrome extension doesn't support inline JavaScript.
http://developer.chrome.com/extensions/contentSecurityPolicy.html
Try this JS:-
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#start').addEventListener('click', countdown_init);
document.querySelector('#stop').addEventListener('click', countdown_clear);
document.querySelector('#reset').addEventListener('click', countdown_reset);
document.querySelector('#store').addEventListener('click', store);
});
var countdown_number=10000*3600;
var days;
var hours;
var minutes;
var seconds;
var countdown;
function countdown_init(e) {
//countdown_number = 11;
countdown_trigger();
}
function countdown_trigger() {
if(countdown_number > 0) {
countdown_number--;
//store()
days = Math.floor(countdown_number/(3600*24));
hours = (Math.floor(countdown_number/(3600))-days*24) % 24;
minutes = (Math.floor(countdown_number/(60))-hours*60) % 60;
seconds = (Math.floor(countdown_number)-minutes*60) % 60;
update_counter();
if(countdown_number > 0) {
countdown = setTimeout(countdown_init, 1000);
}
}
}
function update_counter(){
document.getElementById('timer_text').innerHTML = "Days: "+days+"<br>"+
" Hours: " + hours +"<br>"+" Minutes: " + minutes +"<br>"+" Seconds: " + seconds;
}
function countdown_clear(e) {
clearTimeout(countdown);
}
function countdown_reset(e){
countdown_number=10000*3600;
update_counter();
clearTimeout(countdown);
}
function writeItem(){
localStorage[1] = countdown_number;
}
function returnItem() {
var stored = localStorage[1];
document.getElementById('item').innerHTML=countdown_number;
}
function store(e){
writeItem();
}
And HTML:-
<div>
<h1> 10,000 Hours Timer </h1>
<input type="button" id="start" value="start countdown" />
<input type="button" id="stop" value="stop countdown" />
<input type="button" id="reset" value="reset" />
<input type="button" id="store" value="store" />
<p id="item">Hi</p>
</div>
<div id="timer_text">Ready To Start?</div>