The code for a counter gives an error
Whereas a similar snippet does not
I can't figure out any valid reason...
The line under consideration is:
<input type=button name="but2" value="stop" onClick="window.clearTimeout(ID);">
The complete code is:
<html>
<head>
<script language="JavaScript">
var counter=0;
ID=window.setTimeout("start();",2000);
function start()
{
counter++;
document.forms[0].elements[0].value=counter;
ID=window.setTimeout("start();",2000);
}
</script>
</head>
<body>
<form name="frm1">
<input type="text" name="timer1">
<input type="button" name="but1" value="start" onClick="counter=0; start();">
<input type=button name="but2" value="stop" onClick="window.clearTimeout(ID);">
</form>
</body>
</html>
Use window.start instead of start for the onClick event. It may be that IE doesn't create a window context when you use code instead of a function for the handler.
Everything about that code there is wrong. Please try to avoid that source of tutorials in the future.
Here is a working script: http://jsfiddle.net/teresko/qTJPx/
List of problem with your script:
missing doctype
language="JavaScript" is deprecated
variables ID and counter ended up in global scope
using html to attach events
incorrect use of setTimeout
<script> tag used in <head> when DOM is not ready yet
.. and i don't even want to go over that "similar snippet", it looks like something that by all rights should be dead an buried.
When you add your JavaScript code, it should be right before the closing </body> tag, because at that stage the DOM is already ready, but page has not begun to render yet.
I would strongly suggest for you to get some newer materials for learning JavaScript.
Hi I think in this line your getting the error
ID=window.setTimeout("start();",2000);
Right ?
Put this code
var ID=window.setTimeout("start();",2000);
you'll not get this JavaScript: Error Object doesn't support this action error.
Related
I've looked at various websites but non have helped. To me everything seems to be correct, but I can't get the
document.getElementByClassName("first").style.display="none";
to work no matter how many times I tried, I kept getting the same error message on JS;
ERROR:'document' is not defined.[no-undef]
Tried defining the 'document' part and didn't help. Maybe, I was doing the connection between external folders incorrect I tried that and nothing changed
HTML:
<html>
<head>
<script src="JS.js"></script>
</head>
<body>
<div class="first">
<p>Hello and welcome to my first page<br>
in this page I will test out new think<br>
and see what works and what doesn't<br>
</p>
</div>
<button type="button" onclick="myFunction">Click me</button>
</body>
</html>
JS:
function myFunction(){
document.getElementsByClassName("first").style.display="none";
The button is suppose to clear all he style's from "first".I've changed many outcomes and have nothing happen to the code just the same error repeating its-self over and over again.
document.getElementByClassName() returns an array of elements, so you'll need the index of the element you want to target.
You should call the function by myFunction() and add [0] to getElementsByClassName to get specific element.
function myFunction() {
document.getElementsByClassName("first")[0].style.display="none";
}
<html>
<head>
<script src="JS.js"></script>
</head>
<body>
<div class="first">
<p>Hello and welcome to my first page<br>
in this page I will test out new think<br>
and see what works and what doesn't<br>
</p>
</div>
<button type="button" onclick="myFunction()">Click me</button>
</body>
</html>
It seams that the error you are recieving comes from a linter, but has nothing to do with your code not working. To fix your linter issue, you might want to have a look at this post.
For errors that are produced at runtime, you should have a look at your browser console (In most cases opened with F12).
In regards to your main issue, there are two things to fix:
1)
Your inline onclick handler should be called like so:
<button type="button" onclick="myFunction()">Click me</button>
2)
Instead of using document.getElementsByClassName() - which returns an array -
I recommend you to use document.querySelector() instead, as it returns just the first element it found and is much easier to use, if you are already familiar with css selectors.
For more information an the querySelector-function have a look at this page.
So, in your code it should look like this:
function myFunction() {
document.querySelector(".first").style.display="none";
}
I know there are a lot of questions like this, but none of them seemed to solve my problem. I have this piece of code that won't run because it says Uncaught ReferenceError: run is not defined. I have tried to move the function into the body of the HTML, but to no avail. My code:
<!DOCTYPE html>
<html>
<textarea name="Text1" cols="100"rows="20" id="textbox">
</textarea>
<button onclick="run()">Export to C++</button>
<script type="text/javascript">
function run() {
var code=new Array();
var input = document.getElementById("textbox").value;
//convert things that are not subroutines here
code.push(input);
code.push("}");
...
for (var i=0;i<code.length;i++)
{
document.write(code[i]+"<br>");
}
}
</script>
</html>
The ... is irrelevant code.
Why isn't this working? Any ideas on how to fix it?
Thanks
Seems it working fine for me, but as I can see the only reason for the problem is the following.
Your page is loading piece by piece from up to down, so all the scripts are going to be included and executed one by one, all the elements are going to be shown one by one as well.
That's not this case in fact, because you are using "on click" event and there are no init actions, so it should be working, but you can try to move your <script></script> at the top (before you assign event).
<!DOCTYPE html>
<html>
<textarea name="Text1" cols="100"rows="20" id="textbox">
</textarea>
<script type="text/javascript">
you script here
</script>
<button onclick="run()">Export to C++</button>
</html>
You may also replace the whole code inside of
<script></script>
by something like alert("Hello"); to check if it's working. Possible you have the issue with internal code.
I have read that if you want to make it look like your site loads faster then you should put your javascript at the end of your html file like the following
<html>
<body>
</body>
<script>
//my awesome javascript functions go here because it lets things load faster
//than if it was at the top
</script>
</html>
The problem is when I create buttons or use onChange events that call these functions.
How am I meant to keep my JS at the bottom of the page and have the JS defined for when it reads that the js function will need to be called?
For example
<html>
<body>
<input type="text" onChange="myfunction()"/>
</body>
<script>
function myfunction(){}
</script>
</html>
I did the code in pseudo code-ishly so you wouldn't focus on any of my syntax errors, but more focus on how I am meant to go about this.
When creating the page, it creates the html properly, but gives me a console error saying "myfunction" is not defined.
If I move the script part above the body this works, but it is recommended to keep it last to increase speed in page load.
Just a note I am not using jquery.
I originally thought this was a duplicate (Javascript at the bottom, function call in the body?) but it doesn't seem to answer my problem.
------------------------update----------------------------
using event listeners
<html>
<body>
<input type="text" id="myawesometext"/>
</body>
<script>
function myfunction(){}
element = document.getElementById('myawesometext');
element.addEventListener("onChange", myfunction, false);
</script>
</html>
<html>
<head>
<script>
if(document.readystate == "interactive"){
alert(document.forms[0].method);
}
</script>
</head>
<body>
<form name="form1" id="form1" method="post">
</form>
<input type="submit" id="submit" name="check" onclick="check()">
</body>
</html>
I also wrote alert() box within the function and triggered with the submit button, in that case the it executed but why isn't it executing in this stage.
First off, there are a several logic/design errors:
It is document.readyState (different capitalization).
While parsing the <head> section, your document will NEVER have document.readyState == "interactive" because the document doesn't switch to that state until it is done parsing the <body>, but by definition it is only parsing the <head> section at this moment.
If you thought your code would somehow fire when the readyState became == "interactive", then that's just not how a simple if statement works. It tests that condition at the moment the code runs and if it's falsey which it is here, then it will never execute.
If you want to run code when the document is loaded and the DOM is ready to modify and interact with, you can see a summary of your options in this answer.
Your options boil down to this:
Move your javascript to a script tag right before the </body> tag and remove the if test you have. At that point in the document parsing, it is safe to interact with any DOM element that was defined before the script.
In modern browsers, add an event listener for the DOMContentLoaded event and run your code when that event fires.
For more general support including older browsers, get a more complete implementation of a function that will notify you when the browser is safe to interact with. You can see such an implementation that works in pretty much all browsers in use today in this other answer.
Use some sort of javascript framework that already offers you a cross browser way to know when the DOM is ready. jQuery offers $(document).ready() as do pretty much all other similar frameworks.
This simplest solution to your code would be this:
<html>
<head>
</head>
<body>
<form name="form1" id="form1" method="post">
<input type="submit" id="submit" name="check" onclick="check()">
</form>
<script>
alert(document.getElementById("form1").method);
</script>
</body>
</html>
Working demo: http://jsfiddle.net/jfriend00/Ka4rL/
P.S. I presume you want your <input> tag inside the form. And, I'd recommend you change to using document.getElementById("form1") rather than forms[0] as this is a much more robust way to program because your code doesn't break if someone adds a new form to the page.
I am just getting started with HTML/JavaScript, and I have a simple question. I am attempting to call a js function from a separate script source, but am having a bit of trouble. My function script (date_button_function.js) reads:
function displayDate()
{
document.getElementById("date").innerHTML=Date();
}
In order to call on this function, my code looks like this:
<html>
<head>
<script type="text/javascript" src="date_button_functoin.js"></script>
<body>
<h1>Testing the Date</h1>
<p id="date">Click below to see the date.</p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
When I actually write out the displayDate function in the HTML script, it runs just fine. However, when calling the function, it does not work. If someone could let me know my syntax error, that would be great.
You're not closing your head tag, that's probably your issue there. Also, as stated on the comments, the name of the js file is wrong, should read "date_button_function.js" instead of "date_button_functoin.js"