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>
Related
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function mouseOn() {
function int() {
document.getElementById("hover").click();
}
var interval = setInterval(int, 0);
}
function mouseOff() { clearInterval(interval); }
</script>
</head>
<body>
<button id="hover"
onmouseenter="mouseOn();"
onmouseleave="mouseOff();">
Hover and Autoclick
</button>
</body>
</html>
It doesn't autoclick when my mouse hovers on it. Do you guys know how to fix this?
You only had one mistake in the initialization of the interval variable inside the function instead of in the main scope, I added a small check of the text changing to red when clicked and it works fine for me now
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var interval
function mouseOn() {
function int() {
document.getElementById("hover").click();
}
interval = setInterval(int, 0);
}
function mouseOff() {
clearInterval(interval);
}
function test() {
document.getElementById("hover").style.color = "red";
}
</script>
</head>
<body> <button id="hover" onclick="test();" onmouseenter="mouseOn();" onmouseleave="mouseOff();">Hover and Autoclick</button> </body>
</html>
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>
Below is my code for some of my coursework(I will admit). As you can see in the comments i have done the 'setinterval' with a button. But what I want is the 'setInterval' to be able to run automatically. What i mean by this is I do not want the user to have to click the button. Is there a way to do this and if so could you point me in the right direction.
<!DOCTYPE html>
<html>
<head>
<title>Task 3 Manual traffic lights</title>
</head>
<body>
<h1>JavaScript Task 3</h1>
<p >This is my Traffic Light script</p>
<img id="change-light" src="red_traffic_light.png" width="150" height="300" align=middle>
<!-- <button onclick="setInterval(changelights, 1000)" >Start the timer</button> -->
<script>
var list = ["red_traffic_light.png", "red-amber-traffic-light.png","green_traffic_light.png", "amber-traffic-light.png"
];
var index = 0
function changelights() {
index = index + 1
if (index == list.length) index = 0;
var image = document.getElementById('change-light');
image.src=list[index];
}
</script>
</body>
</html>
Just put setInterval(changelights, 1000) inside your script tag.
when browser run that line of code. it will start the timer.
<script>
setInterval(changelights, 1000);
</script>
Call it when your document is ready:
With jQuery :
$( document ).ready(function() {
setInterval(changelights, 1000);
});
Pure javascript:
(function() {
setInterval(changelights, 1000);
})();
I am trying to create a program that generates random functions then shows them in LaTeX but I can't figure out how to edit LaTeX when a button is pressed.
This code works:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>
<script>
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
</script>
</body>
</html>
But this does not:
<html>
<head>
<script type="text/javascript" src="http://latex.codecogs.com/latexit.js"></script>
</head>
<body>
<div lang="latex" id='Latexdiv'></div>
<button onclick="change();">Change the LaTeX</button>
<script>
function change()
{
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
}
</script>
</body>
</html>
I tried to use MathJax like this:
<html>
<body>
<button onclick='change();'>Change the LaTeX</button>
<div lang='latex' id='Latexdiv'></div>
<script type='text/javascript'>
var latexdiv = document.getElementById('Latexdiv');
function change()
{
var latex = document.createElement('script');
latex.src = 'http://latex.codecogs.com/latexit.js';
document.head.appendChild(latex);
var mathjax = document.createElement('script');
mathjax.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
document.head.appendChild(mathjax);
latexdiv.innerHTML = '\\(sin(x)\\)';
};
</script>
</body>
</html>
This, unfortunately, only works the first time you press the button. If you press it twice, it just shows "\(sin(x)\)" in regular HTML. How would you get it to work twice?
http://latex.codecogs.com/latexit.js executes at the end:
LatexIT.add('*');
That adds and onload listener that executes a render function, that's why works in the first case, the page ends loading after your first script.
You could simply add the render function in your change function.
function change()
{
document.getElementById('Latexdiv').innerHTML = 'sin(x)';
LatexIT.render('*',false);
}
I want to display "hello" message for 3 minutes and after that it should be vanished. I want to handle onLoad event of JavaScript. The following is the code that I had tried with onClick because I don't know how to handle onLoad. Please give me correct code.
<html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
document.write("Hello");
}
</script>
</head>
<body>
<form>
<input type="button" value="Display alert box onClick="timeMsg()"/>
</form>
</body>
</html>
You want to show the message first, then start your setTimeout timer with the duration for when you want your "hide" event to fire. Time is also measured in milliseconds, so 60000ms is 60 seconds(1 minute), and 180000ms is 3 minutes.
<script type="text/javascript">
function showMessage() {
document.getElementById("container").innerHTML = "hello!";
setTimeout(function() {
document.getElementById("container").innerHTML = "";
},180000);
}
</script>
</head>
<body onload="showMessage()">
<div id="container"></div>
</body>