Why is document not working on JavaScript - javascript

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";
}

Related

I need help understanding event handlers and functions in JavaScript?

I wrote HTML document and linked to my JS document.
when I execute the HTML file on my browser it only shows the "Click me!" button, but what I expected it to do was to show the result of my math function when clicked. But .. nothing happens. I'm very new to JavaScript so I'm sure this is a simple answer, but Googling isn't helping ... I appreciate any insight to what I'm doing wrong here.
Here's the code from HTML file:
<!DOCTYPE html>
<html lang=""en">
<head>
<meta charset="UTF-8">
<script src="JS/main.js"></script>
</head>
<body>
<p id="Math">
<button onclick="myFunction()">Click me!</button>
</p>
</body>
</html>
Here's the JS file:
function myFunction(a, b) {return a * b;}
document.getElementById("Math") .innerHTML = myFunction(13, 4);
Not sure what are you trying to do, but if you want to change the content of the "Math" element, you must call the function with parameters (eg: onclick="myFunction(1,3)") and that function should replace the content:
function myFunction(a, b) {
document.getElementById("Math").innerHTML = a * b;
}
<p id="Math">
<button onclick="myFunction(3,4)">Click me!</button>
</p>
Also if you want to preserve the button after clicking, this should be located outside the "Math" element to avoid being removed when replacing innerHTML
You’re including you script file in the header, so it runs before the dom is available. When it executes, it won’t be able to find your id, so nothing will happen. You likely will see an error in the console that your document.getElementById call is returning undefined. Either include it at the end of the body, or add a defer tag:
<script src="JS/main.js" defer></script>
Also, as soon as the code runs, it overwrites the content of the p tag, including the button. Make the p and the button siblings.
One error in your html appears to be caused by an extra " in your lang attribute for your opening html tag. Try deleting it.
<html lang="en">

Why is "getElementsByTagName" not finding anything?

This seems like it should be pretty basic, and I can't figure out why it isn't working. I have a super simple page so far and I want to select the paragraphs with JS:
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<script src="misc.js" type="text/javascript"></script>
</head>
<body>
<p id="first">Just one paragraph.</p>
<p id="second">Two, actually.</p>
</body>
</html>
And my JS:
var paras = document.getElementsByTagName('p');
console.log(paras.length);
I expect the console log to show 2 but I'm seeing 0. I read the documentation pretty closely and I can't figure out what I'm doing wrong here.
At the time you run the script, there are no paragraphs in the document.
Either move the script element so it appears after the paragraphs, or put the code in a function and then call that function later (e.g. when the load event fires).

Javascript run() Function is Not Defined

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.

JavaScript: Error "Object doesn't support this action"

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.

Calling JavaScript function loaded from remote file

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"

Categories

Resources