I´m trying to make a counter of days, pass that to another page with localStorage and then keep counting them when they click a button, the info reaches the other page, shows me the previous number of days without a problem but when i try to keep increasing the days goes back to 0 without taking into account the number that i passed initially, thanks for the help.
//first page
body>
<button type="button" onClick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
<a href="pruebaCounter.html">
<button onClick="hacerCosa()">Beach</button><br />
</a>
<script>
var d = localStorage.getItem("d");
document.getElementById("clicks").innerHTML = d;
localStorage.clear();
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
var d = document.getElementById('counter').innerHTML;
localStorage.setItem('d', d);
};
function hacerCosa(){
var d = document.getElementById('clicks').innerHTML;
localStorage.setItem('d', d);
}
</script>
//second page
<body>
<button type="button" onClick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
<script>
var d = localStorage.getItem("d");
document.getElementById("clicks").innerHTML = d;
localStorage.clear();
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
</script>
</body>
//Solution going both ways, thanks for the help
//first page
<body>
<button type="button" onClick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
<a href="pruebaCounter.html">
<button onClick="hacerCosa()">Beach</button><br />
</a>
<script>
if (localStorage.getItem("d") !== null){
var d = localStorage.getItem("d");
document.getElementById("clicks").innerHTML = d;
localStorage.clear();
var clicks = parseInt(d);
} else {
var clicks = 0;
}
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
var d = document.getElementById('counter').innerHTML;
localStorage.setItem('d', d);
};
function hacerCosa(){
var d = document.getElementById('clicks').innerHTML;
localStorage.setItem('d', d);
}
</script>
</body>
//second page
<body>
<button type="button" onClick="onClick()">Click me</button>
<p>Clicks: <a id="clicks">0</a></p>
<a href="pruebaCounter2.html">
<button onClick="hacerCosa()">cave</button><br />
</a>
<script>
if (localStorage.getItem("d") !== null){
var d = localStorage.getItem("d");
document.getElementById("clicks").innerHTML = d;
localStorage.clear();
var clicks = parseInt(d);
} else {
var clicks = 0;
}
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
function hacerCosa(){
var d = document.getElementById('clicks').innerHTML;
localStorage.setItem('d', d);
}
</script>
</body>
Related
I have this JS / HTML code. It is supposed to give you an input. When you click the button as many times as you wrote in the input then it the screen is supposed to say 'stop' but that's not happening and idk why. How can I fix this?
var text2
let count = 1;
var correct = 1;
function check() {
text2 = document.getElementById('questions').value;
correct = correct + 1;
count = count + 1;
if (count === text2) {
var score = "stop";
document.getElementById('div').innerHTML = score;
}
}
<p>how many?<input type="text" id="questions"></p>
<button onclick="check()" id='but'>ok</button>
<div id='div'></div>
Refactor your code like this:
<html>
<body>
<p>how many?<input type="text" id="questions"></p>
<button onclick="check()" id='div'>ok</button>
<div id='div'> </div>
<script>
var count = 0;
function check() {
let user_input = document.getElementById('questions').value;
if (++count === parseInt(user_input)) {
document.getElementById('div').innerHTML = "stop";
}
}
</script>
</body>
</html>
This shoud do the trick:
<html>
<body>
<p>how many?<input type="text" onInput="onInput()" id="questions"></p>
<button onclick="check()" id = 'but'> ok </button>
<div id = 'div'> </div>
<script>
var text2;
let count = 0
function onInput() {
var element = document.getElementById('questions');
//replace window
text2 = element.value;
}
function check(){
count = count + 1;
console.log(count);
if (count === parseInt(text2)){
var score = "stop";
document.getElementById('div').innerHTML = score;
}
}
</script>
</body>
</html>
You are using === to compare, which checks type before comparing. count is an integer and text2 is a String, so it will always return false. Instead, first parse text2 into an integer, then compare like so:
<html>
<body>
<p>how many?<input type="text" id="questions"></p>
<button onclick="check()" id='but'> ok </button>
<div id='div'> </div>
<script>
var text2
let count = 0;
var correct = 0;
function check() {
text2 = document.getElementById('questions').value;
correct = correct + 1;
count++;
if (count === parseInt(text2)) {
var score = "stop";
document.getElementById('div').innerHTML = score;
}
}
</script>
</body>
</html>
Or instead use == which only checks for value:
<html>
<body>
<p>how many?<input type="text" id="questions"></p>
<button onclick="check()" id='but'> ok </button>
<div id='div'> </div>
<script>
var text2
let count = 0;
var correct = 1;
function check() {
text2 = document.getElementById('questions').value;
correct = correct + 1;
count++;
if (count == text2) {
var score = "stop";
document.getElementById('div').innerHTML = score;
}
}
</script>
</body>
</html>
I have two input fields and a button. When the user clicks the button, I want it to display the text the user wrote in the first input the amount of times the user wrote in the second input.
I understand you have to use a while loop for this. What am I doing wrong here?
<!DOCTYPE html>
<html>
<head>
<title>While Loop</title>
<script type="text/javascript">
window.onload = btn;
function btn() {
document.getElementById("btn").onclick = showText;
}
function showText() {
var text = "";
var inputOne = document.getElementById("txtBox").value;
var inputTwo = document.getElementById("numBox").value;
while (inputOne < inputTwo) {
text += inputOne;
inputOne++;
}
document.getElementById("showCode").innerHTML = text;
}
</script>
</head>
<body>
<input type="text" id="txtBox"><br/>
<input type="number" id="numBox"><br/>
<button type="button" id="btn">Click Me!</button>
<p id="showCode"></p>
</body>
</html>
Since inputOne is a text, you cannot increment it (you can't do inputOne++), instead, use another variable, let's call it i, to control the while loop:
window.onload = btn;
function btn() {
document.getElementById("btn").onclick = showText;
}
function showText() {
var text = "";
var inputOne = document.getElementById("txtBox").value;
var inputTwo = document.getElementById("numBox").value;
var i=1; // to control the loop
while (i <= inputTwo) { // i goes from 1 to inputTwo
text += inputOne;
i++;
}
document.getElementById("showCode").innerHTML = text;
}
<input type="text" id="txtBox"><br/>
<input type="number" id="numBox"><br/>
<button type="button" id="btn">Click Me!</button>
<p id="showCode"></p>
This is my solution
<!DOCTYPE html>
<html>
<head>
<title>While Loop</title>
<script type="text/javascript">
window.onload = btn;
var count = 0;
function btn() {
document.getElementById("btn").onclick = showText;
}
function showText() {
var text = "";
console.log("Text: "+text);
var inputOne = document.getElementById("txtBox").value;
console.log("Input One: "+inputOne);
var inputTwo = document.getElementById("numBox").value;
console.log("Input 2: "+inputTwo);
count=count+1;
console.log("Times: "+count);
document.getElementById("numBox").value = count;
document.getElementById("showCode").innerHTML = text;
}
</script>
</head>
<body>
<input type="text" id="txtBox"><br/>
<input type="number" id="numBox"><br/>
<button type="button" id="btn">Click Me!</button>
<p id="showCode"></p>
</body>
</html>
Instead of the while loop you can use a for loop like this:
for( let i = inputTwo; i>0; i--) {
text += inputOne;
}
I have a counter in javascript right now and a button that adds 1 value to the counter, this is what I have so far:
var counter = 0;
var a = 0;
var add = function(valueToAdd){
a += valueToAdd;
document.getElementById('Value').innerHTML = a;
}
Value $<span id="Value">0</span>
<button width="500" height="500" id = add class="button button1" onclick="javascript:add(1)">Add Value</button>
I need a button to reset the counter back to 0 any help is appreciated.
Add a button, reset function and set values to "0" as shown in code below:
<button width="500" height="500" id ="reset" class="button button1"
onclick="javascript:reset()">Reset Value</button>
<script type="text/javascript">
var reset= function(){
a = 0;
document.getElementById('Value').innerHTML = a;
}
</script>
BTW you declared var count = 0 in your code (question) but not using that (apparently).
Some tips:
You correctly stored a variable to keep track of the counter, all you needed to do in a reset function was to change the value back to 0.
Keep your Javascript away from your HTML. Here's a good article
Your code should be properly formatted when posting on Stack Overflow.
Here's a cleaner solution:
HTML:
Value $<span id="Value">0</span>
<button id="add">Add Value</button>
<button id="reset">Reset</button>
Javascript:
var a = 0;
var add = function(valueToAdd) {
a += valueToAdd;
document.getElementById('Value').innerHTML = a;
}
var reset = function() {
a = 0;
document.getElementById('Value').innerHTML = 0;
}
var addButton = document.querySelector("#add");
var resetButton = document.querySelector("#reset");
addButton.addEventListener("click", function() {
add(1);
})
resetButton.addEventListener("click", function() {
reset();
})
JSFiddle: https://jsfiddle.net/sfh51odm/
Do not define a out of function as a general variable. Every time set the current value to a and continue. So you can get back to zero:
var counter = 0;
var add = function(valueToAdd){
var a = parseInt(document.getElementById('Value').innerHTML);
a += valueToAdd;
document.getElementById('Value').innerHTML = a;
}
function reset(){
document.getElementById('Value').innerHTML=0;
}
Value $<span id="Value">0</span>
<button width="500" height="500" id = add class="button button1" onclick="javascript:add(1)">Add Value</button>
<button width="500" height="500" id = add class="button button1" onclick="javascript:reset()">Reset</button>
var a = 0;
var displayValue = document.getElementById('Value');
var updateValue = function () {
displayValue.innerHTML = a;
};
var add = function (valueToAdd) {
a += valueToAdd;
updateValue();
};
var reset = function () {
a = 0;
updateValue();
};
Value $<span id="Value">0</span>
<button onclick="add(1)">Add 1</button>
<button onclick="reset()">Reset</button>
if you need to do a page refresh (like if you press F5 on the keyboard) this will work for you.
the "location.reload();" will work also.
change '.again' to a btn name you want.
document.querySelector('.again').addEventListener('click', function () { location.reload(); });
I have an html page that needs to store the time at the point of button click back on to the database. I have a JS function that calculate the time.But somehow the html button is not holding the value.Here is the code.
<html>
<head>
<script>
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
function checkMsec(j)
{
if ( (j<100) && (j<10))
{
j="00" + j;
}
if ((j<100) && (j>10))
{
j="0" + j;
}
return j;
}
function timeCheck(stTime)
{
var currentTime=new Date();
var cDat = currentTime.getDate();
var cMon = currentTime.getMonth() + 1;
var cYear = currentTime.getFullYear();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
var ms = currentTime.getMilliseconds();
m = checkTime(m);
s = checkTime(s);
ms = checkTime(ms);
stTime = cDat+"-"+cMon+"-"+cYear+" "+h+":"+m+":"+s+":"+ms;
//alert(stTime); // this is displaying the time as an alert
return stTime; //Here I am expecting the id attribute of the button will have the stTime
}
</script>
</head>
<body>
<form name ="frm1" method ="POST" action="<% gait_url %>">
<p>Time 1: <input type="button" name=start1 value= "Start" id="start1" onClick ="timeCheck(this)">
<input type="button" name=stop1 id="stop1" value= "Stop" onClick ="timeCheck(this)"></p>
<p>Time 2: <input type="button" name=start2 value= "Start" id="start2" onClick ="timeCheck(this)">
<input type="button" name=stop2 id="stop2" value= "Stop" onClick ="timeCheck(this)"> </p>
<input type="submit" value="Back to Menu" name="Back to Menu">
</form>
</body>
</html>
The return value goes to the object's event method, not to the objects property "id".
Change this
stTime = cDat+"-"+cMon+"-"+cYear+" "+h+":"+m+":"+s+":"+ms;
//alert(stTime); // this is displaying the time as an alert
return stTime; //Here I am expecting the id attribute of the button will have the stTime
to
stTime.id = cDat+"-"+cMon+"-"+cYear+" "+h+":"+m+":"+s+":"+ms;
I want to add a variable b, that starts off at a value of 100. When I click the add button for value a, it adds 1 to value a but minus 1 from the 100 and vice versa with the minus button.
<head>
<script type="text/javascript">
var b = 100
document.getElementById('Valueb').innerHTML = b;
var a = 0;
var add = function(valueToAdd){
a += valueToAdd;
document.getElementById('Valuea').innerHTML = a;
if(a == 0) {
document.getElementById('minus').disabled = true;
} else {
document.getElementById('minus').disabled = false;
}
}
</script>
</head>
<body>
Valueb:<span id="Valueb">0</span>
Valuea:<span id="Valuea">0</span>
<button type="button" id = add onclick="javascript:add(1)">+</button>
<button type="button" id = minus onclick="javascript:add(-1)">-</button>
</body>
You need to put the script in the end of body section.
<head>
<body>
Value b:<span id="Valueb">0</span>
Value a:<span id="Valuea">0</span>
<button type="button" id = add onclick="javascript:add(1)">+</button>
<button type="button" id = minus onclick="javascript:add(-1)">-</button>
<script type="text/javascript">
var b = 100
document.getElementById('Valueb').innerHTML = b;
var a = 0;
var add = function(valueToAdd){
a += valueToAdd;
b -=valueToAdd;
document.getElementById('Valuea').innerHTML = a;
document.getElementById('Valueb').innerHTML = b;
if(a == 0) {
document.getElementById('minus').disabled = true;
} else {
document.getElementById('minus').disabled = false;
}
}
</script>
</head>
</body>
Press F12 (or whatever) in your browser and look in the console.
Reload the page and you can see errors in your Javascript code.
<span id="Valueb">0</span> if not visible to Javascript the way your code is.
So you can put the Javascript at the end before </body> or you can use window.addEventListener('load', functionname, false); so the code will run when the page has loaded.
Maybe this is what your looking for...
<!DOCTYPE html>
<head>
<title>Something</title>
<style type="text/css">
body, button {
margin: 20px;
font-size: 80px;
text-align: center;
}
button {
width: 2em;
height: 2em;
}
</style>
<script type="text/javascript">
'use strict';
var a = 0,
b = 100,
outputa = null,
outputb = null,
buttonadd = null,
buttonminus = null;
function letsgo() {
outputa = document.getElementById('Valuea');
outputb = document.getElementById('Valueb');
buttonadd = document.getElementById('add');
buttonminus = document.getElementById('minus');
outputa.innerHTML = a;
outputb.innerHTML = b;
checkdisable();
}
function add(valueToAdd) {
a += valueToAdd;
b -= valueToAdd;
outputa.innerHTML = a;
outputb.innerHTML = b;
checkdisable();
}
function checkdisable() {
if(a <= 0) {
buttonminus.disabled = true;
} else {
buttonminus.disabled = false;
}
if(a >= 100) {
buttonadd.disabled = true;
} else {
buttonadd.disabled = false;
}
}
if (window.addEventListener) {
window.addEventListener("load", letsgo, false);
}
</script>
</head>
<body>
<div>
Valuea:<span id="Valuea">X</span>
Valueb:<span id="Valueb">X</span>
</div>
<div>
<button type="button" id="add" onclick="javascript:add(1)">+</button>
<button type="button" id="minus" onclick="javascript:add(-1)">-</button>
</div>
</body>