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);
})();
Related
This is the script I am working with (below)
As the images are built into the script I am unsure on how to add a download link/link to website. to the second image
The script changes from image 1 to image 2 after 10 seconds and then I want then to be able to CLICK image 2 (like a button)
Here is the script I am working with if you could maybe help me with adding it in or tell me what I need to add in and where that would be much appreciated
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<body>
<img id="img1" src="https://i.makeagif.com/media/1-28-2016/N_tuzx.gif" />
<script>
setTimeout(function(){
document.getElementById("img1").src = "https://2.bp.blogspot.com/-fgPjlOk4PWc/WzQrQ_NBxRI/AAAAAAAAAWw/bvINTos17nssgQXqhevQq97dvUfzINdhgCPcBGAYYCw/s320/download-2062197_960_720.png";
}, 10000);
</script>
</body>
</html>
Thank you for your time
After you've changed src of the image, just add a "click" event listener to it
setTimeout(function(){
document.getElementById("img1").src = "link";
document.getElementById("img1").addEventListener("click", function (event) {
// when someone clicks
});
}, 10000);
Use below code and replace Download_Link with desired link
<!DOCTYPE html>
<head>
<title>Demo</title>
</head>
<body>
<div id="wrapper">
<img id="img1" src="https://i.makeagif.com/media/1-28-2016/N_tuzx.gif" />
</div>
<script>
setTimeout(function(){
var mydiv = document.getElementById("img1");
var aTag = document.createElement('a');
aTag.setAttribute('href',"Download_Link");
aTag.setAttribute('download', true);
aTag.appendChild(mydiv);
document.getElementById("wrapper").appendChild(aTag);
document.getElementById("img1").src = "https://2.bp.blogspot.com/-fgPjlOk4PWc/WzQrQ_NBxRI/AAAAAAAAAWw/bvINTos17nssgQXqhevQq97dvUfzINdhgCPcBGAYYCw/s320/download-2062197_960_720.png";
}, 10000);
</script>
</body>
</html>
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>
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 have a problem that some link we show is separeted from the rest of the page itself, so the link showes up immediatly as you open the page but the page takes 2-3 seconds to load, I'm trying to delay the link (in this example it's google) so it will show up a few seconds after the page is loaded.
am I getting close?
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show(), 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com;
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<style>
#Link{display:none;}
</style>
<body window.onLoad="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</div>
</body>
</html>
You have a few errors in your page which is stopping this from working:
Usually the first thing to check when something is not working is the browser console (press F12) and looks for errors. This won't fix problems with logic but should put you in a good position to start debugging things.
You have a missing " syntax error in exportSrc - this will show in the browser console
The load attribute in the body is incorrect. You should just use onload="myFunction()"
Your setTimeout is calling show instead of referencing it. Remove the ()s.
Put the <style> tags inside the <head>
You have an extra </div> tag
This should work better:
<!DOCTYPE html>
<html>
<head>
<title>Delay export link</title>
<style>
#Link{display:none;}
</style>
<script type="text/javascript">
function myFunction() {
myVar = setTimeout(show, 2000);
}
function show() {
document.getElementById("Link").style.display = "inline";
}
function exportSrc() {
var scrt_var = "www.google.com";
document.getElementById("Link").setAttribute("href",scrt_var);
}
</script>
</head>
<body onload="myFunction();">
<a id="Link" onclick="exportSrc();" target='_blank'>
<img src="http://i57.tinypic.com/mkw779.png">
</a>
</body>
</html>
Try
<body onLoad="myFunction();">
Instead of window.onLoad
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>