I am very new to JavaScript and cannot seem to get the setTimeout command to do anything. I know this has been asked many times before, but I have spent the last two hours looking at all previous cases of it and it still isn't working for me. Here is what I have got at the moment:
<html>
<script type="text/javascript">
var i = 0;
function aloop() {
document.write(i);
i++;
}
function afunction() {
if (i <= 12) {
setTimeout(aloop(), 1000);
afunction();
}
}
</script>
<form>
<input type=submit value="Click me!" onClick="afunction()">
</html>
Can anyone tell me what I should do to make this work?
Pass a function to setTimeout, not the return value of a function call.
setTimeout(aloop,1000);
The problem is you're calling your function instead of queuing your function.
setTimeout(aloop, 1000) NOT setTimeout(aloop(), 1000);
You didn't describe what doesn't work, but I'll assume you want the i to be written in 1000 millisecond intervals.
Do this:
<html>
<!-- you're missing your head tags -->
<head>
<title> my page </title>
<script type="text/javascript">
var i=0;
function aloop() {
// don't use document.write after the DOM is loaded
document.body.innerHTML = i;
i++;
afunction(); // do the next call here
}
function afunction() {
if (i<=12) {
// v---pass the function, don't call
setTimeout(aloop,1000);
// afunction(); // remove this because it'll call it immediately
}
}
</script>
</head>
<!-- you're missing your body tags -->
<body>
<form>
<input type=submit value="Click me!" onClick="afunction()">
</form> <!-- you're missing your closing form tag -->
</body>
</html>
Related
I am a Bit Beginner In JavaScript. So I need a code about { If we clicked a button a function need to run} more of them suggested this but it still not working ! and I don`t know why? Can you solve it?
if(document.getElementById("btn").clicked == true){
//some code here
console.log("working");
}
<button id=""btn>ClickEvent</button>
Do not use the if. if statement is executed on page load.
Instead, use Onclick() for example :
var data = "";
function clickBtn() {
if(data != "")
document.getElementById("result").innerHTML = "Hello World !";
else
getData();
}
function getData() {
data = "Hello World !";
}
<button onclick="clickBtn()">Click me</button>
<p id="result"></p>
Good question, lets use the an HTML file that references a JavaScript.
So the first file lets call it webpage.html
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<input type="button" value="save" onclick="save()"></input>
<input type="button" value="display" onclick="print()"></input>
<div id="area"></div>
</body>
</html>
And the second file script.js
function save()
{
StringTest="Hello world";
}
function print()
{
document.getElementById("area").innerHTML=StringTest;
}
The approach might be a little different but this is recommended as you would more control over the elements in the script.
For example:
<input type="button" will tell the script that it is a form input of the type button whose click will call the function print() in the JavaScript
document.getElementById("area")captures the elements that we define from the Document Object Model(DOM)
I am learning JS as part of my studies and at the moment I am trying some examples from W3Schools and am stuck on JS Functions page. The link of the page is:
http://www.w3schools.com/js/tryit.asp?filename=tryjs_function_return
If I use the example code them the code runs perfectly just as below code:
<html>
<head>
</head>
<body>
<p id="demo"> </p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(3, 4);
</script>
</body>
</html>
But if I take the script portion of the above code inside Head tags just like below code then the function does not execute at all and I do not get any value:
<html>
<head>
<script>
function myFunction(a, b) {
return a * b;
document.getElementById("demo").innerHTML = myFunction(3, 4);
}
</script>
</head>
<body>
<p id="demo"> </p>
<button type="button" onclick="myFunction()">Click me</button>
</body>
</html>
Can someone point me where I am doing wrong and how to fix this issue.
Cheers,
Your code has a couple issues. Here's how to fix it:
First off, you functions return a value at the end of the function, after processing parameters. Having a return at the beginning is bad.
Second, you've got to call the function with arguments from the onclick HTML attribute. Right now, there's nothing in the function call myFunction(). It should look like myFunction(3, 4).
Lastly, what was the point of calling myFunction() within the function declaration? That doesn't make sense.
I've adjusted your code with comments to help you make sense of it. This should be helpful.
<html>
<head>
<script>
function myFunction(a, b) {
// Return is usually the last thing you do in a function.
// Also, don't call a function from within the function.
// Instead, put what you had in return in the demo element's innerHTML.
return document.getElementById("demo").innerHTML = a * b; // a * b,
// not 3 * 4.
}
</script>
</head>
<body>
<p id="demo"> </p>
<!-- Also, there were no arguments here. You need to specify arguments in
the onclick event -->
<button type="button" onclick="myFunction(3, 4)">Click me</button>
</body>
</html>
I hope this is helpful!
When you are calling myFunction in the click handler you are not passing any parameters to it, also the first statement in it is a return statement which means the second param will not get executed.
What you need to do is to define the function such a way that it will take 2 parameters then will multiply them and put the result to #demo element.
Then on click of the button, you can call the function with the desired parameters
<html>
<head>
<script>
function myFunction(a , b) {
document.getElementById("demo").innerHTML = a * b;
}
</script>
</head>
<body>
<p id = "demo"> </p>
<button type="button" onclick = "myFunction(3, 4)">Click me</button>
</body>
</html>
There are significant errors in this function definition:
function myFunction(a , b) {
return a * b;
document.getElementById("demo").innerHTML = myFunction(3, 4);
}
First, you call it using myFunction(), which assigns both a and b the value undefined; when you multiply them, you get NaN, which you return. When you return from a function, nothing else in the function gets executed. And if you didn't return, you would get into an infinite recursive loop (which would probably end in a stack overflow) as you keep calling the function from itself again and again.
These errors are the reason the script is not working; nothing to do with it being in the head.
Because you had return in myFunction and
document.getElementById("demo").innerHTML = myFunction(3, 4);
not executed. You could change into like this
<head>
<script>
function myFunction(a , b) {
return a * b;
}
function buttonClick() {
document.getElementById("demo").innerHTML = myFunction(3, 4);
}
</script>
</head>
<body>
<p id = "demo"> </p>
<button type="button" onclick = "buttonClick()">Click me</button>
</body>
I'm new to programming and would need some help, why the document.write() didn't work and basically the page crashes... Can anyone help me?
<!DOCTYPE html>
<html>
<head>
</head>
<script type="text/javascript">
function showText() {
var x;
var counter;
if ( x === 0) {
counter = 0;
x = 1;
}
counter = counter + 1;
document.write("Times clicked: " + counter);
}
</script>
<body>
<script type="text/javascript">
showText();
</script>
<button onclick="showText();">Click Me!<button>
</body>
</html>
Avoid using document.write
Quoting from the MDN Developer Network documentation page:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.
So basically, your issue is using document.write after the page has loaded: this will result in deleting the entire content of the page and displaying that string.
Also, your code doesn't work because your count variable is declared inside the showText function, and you're trying to access it outside of it, running into an error.
Solution
To make your code work you should create another element, let's say a <p> element, and display the text inside of it. Here's an example of a correct page:
<!DOCTYPE html>
<html>
<head></head>
<body>
<button id="btn">Click me!</button>
<p id="txt">Times clicked: 0</p>
<script type="text/javascript">
function showText() {
count++;
text.textContent = "Times clicked: " + count;
}
var count = 0,
button = document.getElementById("btn"),
text = document.getElementById("txt");
button.addEventListener("click", showText);
</script>
</body>
</html>
Check out a live demo here.
<html>
<head>
<script type="text/javascript" language="JavaScript">
var inter;
var seconds = 1;
function recharge()
{
inter = window.setInterval( "printA()" , 1000 );
}
function printA()
{
document.write( "you are here: " + seconds + " seconds" );
seconds++;
}
</script>
</head>
<body>
<button onclick="recharge();"> Start </button>
</body>
</html>
my problem is... recharge() contains a setInterval() that contains a function printA() this
function that does is print whit a document.write a variable that sum one every time that recharge
is called.. but just print 1 and doesnt print the next number. I tried whit a alert instead of document.write
and its work so I don't know what i am doing wrong. i am a noob. Thanks for your help.
So as I'm understanding your question and comments, you want to print something like this:
you are here: 2 seconds
you are here: 3 seconds
you are here: 4 seconds
I would recommend doing something like this:
<html>
<head>
<script type="text/javascript" language="JavaScript">
var inter;
var seconds = 1;
function recharge()
{
inter = window.setInterval( "printA()" , 1000 );
}
function printA()
{
document.body.innerHTML += "<div>you are here "+seconds+" seconds</div>";
seconds++;
}
</script>
</head>
<body>
<button onclick="recharge();"> Start </button>
</body>
</html>
The += will keep appending html to the document.
When you document.write(), the whole page is re-written, meaning all your JavaScript is lost. alert() should work however - what did you try? The innerHTML method by winhowes works probably best. Also I don't see what 'recharge();' is supposed to achieve.
I have a number of links, that when clicked on, passes a variable thru to another portion of the page.
Yet, for some reason, I can’t figure it out! What am I missing?
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
return myid;
}
</script>
</head>
<body>
Click Me<br />
<script type="text/javascript">
document.write(myid);
</script>
</body>
You are getting a little mixed up here. Even though the function returns a value, it has nothing to return it to. Try this:
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
document.getElementById("debug").innerHTML = myid;
}
</script>
</head>
<body>
Click Me<br />
<div id="debug"></div>
</body>
if you want to use it later you need to declare myid as a global variable. its scope is currently only within myFunction. also the document.write() function will only execute at runtime so you need to have another function the executes that with every click, or just combine the two.
When you click the link all that happens is that the myFunction() is called which returns the string. The line document.write(myid); is not executed anymore so nothing is visible.
<script>
// This is global
var myid = ''
myfunc = function(a){
myid = "Hi There!" + a;
alert(myid);
}
test_global = function(){
alert(myid);
}
</script>
Set MYID
<input type="button" onclick="test_global();" value="Test MYID" />
Here is a simple example of some similar stuff:
clickme or ClickMeAlso
<input id='other' type='text'/>
<script>
function myfunc(a) {
return a + " howdy";
};
</script>
You can see this in action here:http://jsfiddle.net/5Sbn2/