Vote count:
0
So I've got my functions here that will count how many times you click the button. It will save the total with localStorage and when you return...you guessed it...it gives me the last value. But now i want to create lots of these and i don't want to copy and paste and waste time. I want to create a function that i can pass a value through the parameters and it will create me a localStorage.(value in parameters) that will accomplish my button counting.
<!DOCTYPE html>
<html>
<head>
<script>
function showNum()
{
document.getElementById("result").innerHTML=localStorage.click;
}
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.click)
{
localStorage.click=Number(localStorage.click)+1;
}
else
{
localStorage.click=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.click + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
function clickCounterNeg()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.click)
{
localStorage.click=Number(localStorage.click)-1;
}
else
{
localStorage.click=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.click + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body onload="showNum()">
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<p><button onclick="clickCounterNeg()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>
Essentially, I want to say clickCounter("David") and/or clickCounterNeg("David") and it will create the same function that i have above, but store data to localStorage.David. I have searched on stackoverflow forums and read that you can use [David] inside the function, but I've tired that...you can see here.
<!DOCTYPE html>
<html>
<head>
<script>
function showNum(click)
{
document.getElementById("result").innerHTML=localStorage[click];
}
function clickCounter(click)
{
if(typeof(Storage)!=="undefined")
{
if (localStorage[click])
{
localStorage[click]=Number(localStorage[click])+1;
}
else
{
localStorage[click]=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage[click] + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
function clickCounterNeg()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.click)
{
localStorage.click=Number(localStorage.click)-1;
}
else
{
localStorage.click=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.click + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body onload="showNum("p")">
<p><button onclick="clickCounter("p")" type="button">Click me!</button></p>
<p><button onclick="clickCounterNeg()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>
Help is much appreciated!
Aucun commentaire:
Enregistrer un commentaire