When I try to load in saved content from the last webpage session the number loads in but the variable dosent change which means when I press the button to add 1 to the variable instead of adding on to the last saved number it starts all the way from one.
heres the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="collectWood()">chop wood</button>
<p>wood:</p>
<p id="woodOut">0</p>
<button onclick="saveData()">save Data</button>
<button onclick="loadData()">load Data</button>
<script>
var wood = localStorage.getItem;
//saves game data
function saveData() {
localStorage.setItem("woodSave", wood);
}
function loadData() {
document.getElementById('woodOut').innerHTML = localStorage.getItem("woodSave");
}
//outputs one wood when button is clicked
function collectWood() {
wood = wood + 1;
document.getElementById("woodOut").innerHTML = wood;
}
</script>
</body>
</html>
Related
I'd like to change my page while processing something but my page is only updated at the end of the process.
I created this simple code to show the problem.
When I press the button, it should remove the button from the page and show a message while processing the wait function. But it is not. It only hides the button at the end of the function.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getmybutton() {
$('#mybutton').remove();
$('#end').append('<p>button should be gone now!</p>' );
wait(2000);
$('#end').append('<h1>end of my test</h1>');
}
function wait(ms) {
var start = new Date().getTime();
var end = start;
while (end < start + ms) {
end = new Date().getTime();
}
}
</script>
</HEAD>
<BODY>
<h1>test
</h1>
<button id='mybutton' onclick="getmybutton()" type="submit">press my button</button>
<div id="end">
</div>
</BODY>
</HTML>
You want to use setTimeout() in this situation.
Your implementation will hold up the current thread, setTimeout will wait to execute your endOfTest after the time interval has passed in a seperate thread.
The first parameter is the function you want to execute, and the second parameter is the time in ms in which it will execute the function after that time has elapsed.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getmybutton() {
$('#mybutton').remove();
$('#end').append('<p>button should be gone now!</p>' );
//Function, Time
setTimeout(endOfTest, 2000);
}
function endOfTest() {
$('#end').append('<h1>end of my test</h1>');
}
</script>
</HEAD>
<BODY>
<h1>test
</h1>
<button id='mybutton' onclick="getmybutton()" type="submit">press my button</button>
<div id="end">
</div>
</BODY>
</HTML>
Hello again StackOverflow peeps! = )
Now I'm trying to get the value from two textboxes into a div\p\span
So, in the first box I write some text, and in the second a number
Now, when I click the button, its supposed to take the value from box1 and then write it in the div, as many times as the value in box2.
I've gotten it to take the value from box1 to the div, but I can't get it to duplicate it with a numbervalue from box2. I removed my faulty code and whats left is just the copy value to <p> thing
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function starfire () {
document.getElementById("tekst").innerHTML = document.getElementById("boks1").value;
return true;
}
</script>
</head>
<header>
<h1>cake</h1>
</header>
<body>
<input type="text" id="boks1">
<input type="number" id="boks2">
<br>
<button type="button" id="btn" onclick="starfire()">Trykk</button>
<p id="tekst"></p>
</body>
</html>
Appreciate any help from you awesome people <3 =)
Sincerely
Gruff
function starfire () {
var boks1=document.getElementById("boks1").value;
var boks2=parseInt(document.getElementById("boks2").value);
var html="";
for (var i=1; i<=boks2; i++) {
html+=boks1;
}
document.getElementById("tekst").innerHTML = html;
}
Im trying to add one to a variable on the push of a button in javascript. Here's what I have:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var add = 0;
function add1(){add++}
document.write(add);
</script>
<br/>
<input type="button" value="Add One" onclick="add1()" />
</body>
</html>
Well most likely the variable add is being incremented by 1 when you push the button. However that code isn't really doing what you want.
This is probably more like what you're after:
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
var add = 0;
function add1(){
add++;
document.getElementById('numberField').innerHTML = add;
}
</script>
<span id="numberField"></span>
<input type="button" value="Add One" onclick="add1()" />
</body>
</html>
When you do document.write(add) it's replacing everything in the body with the value of add.
We moved the "writing the value" piece of code into the function that is called when you press the button. This is so we redraw the number after it has been incremented.
By updating the contents of an html tag instead of the entire page, we don't loose the button. The html tag has the id numberField, and can be accessed with document.getElementById('numberField');.
I have a project where I need the button that starts the function to be "blocked" for 3.5 seconds after the last click. I mean the button should be still displayed just as it was, but on click it should not react in any way for 3.5 seconds. Here is the sample that displays current time on button click:
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">Date</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Date();
}
</script>
</body>
</html>
The user should be able to click on the button (and run the function) several times without needing to reload the page.
How do I achieve this?
<button id="button" type="button" onclick="myFunction()">Date</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = Date();
document.getElementById("button").setAttribute('disabled', true);
setTimeout(function(){
document.getElementById("button").removeAttribute('disabled');
}, 3500)
}
</script>
jsFiddle
i have searched around but cant find exactly what i need. i want the div, which contains a variable value, to update every time the variable changes. is this possible? without reloading the whole page, as this would reset the variable value.
<head>
<script> var eg=30</script>
</head>
<body>
<div> 30 </div>
<button onclick=eg++>increase</button>
</body>
how would i then make the div containing the number update
You have to write your variable to div after update it.
<head>
<script> var eg=30</script>
</head>
<body>
<div id="mydiv"> 30 </div>
<button onclick='eg++; document.getElementById("mydiv").innerHTML = eg;'>increase</button>
</body>
document.getElementsByTagName('div')[0].innerHTML = your_var;
Add this on the onclick event
<head>
<script> var eg=30</script>
</head>
<body>
<div id="display"> 30 </div>
<button onclick="eg++;document.getElementById('display').innerHTML = eg;">Increase</button>
Start by creating a function that both increases the counter, and updates the div. Then, call that function from onclick. If you place your script at the botton, you can easily remove all the inline scripts from your HTML, which would make it more organized and easier to read:
<body>
<div id="egDiv"> 30 </div>
<button id="egButton">increase</button>
<script>
var eg=30
// Function to increase the counter
function increaseEg() {
eg++;
document.getElementById('egDiv').innerHTML = eg;
}
// Add onclick handler, the simplest way:
document.getElementById('egButton').onclick = increaseEg;
</script>
</body>