I am working from the book "Simply JavaScript" and there is an example on pages 68-69 that I cannot get to run. I have copied it from the book and I am working with a fellow student. I think there must be a coding error in the example and was hoping someone could look it over real quick and give us some guidance.
From what I understand the script should cause an alert box to pop up and display the node name (which according to the book should just be a)
Here is the HTML
<!doctype html>
<head>
<script type="text/javascript" src="script.js"></script>
<meta charset="utf-8">
<title>
Stupid Title
</title>
</head>
<body>
<h1>
Sniper (1998)
</h1>
<p>
In this cinema masterpiece
<a id ="berenger" href="name/nm0000297/">tom Berenger</a> plays a us soldier working in the Panamanian Jungle.
</p>
</body>
And here is my JavaScript
alert("AAAAAAAAAAAAAAHH");
var target = document.getElementById("berenger");
if (target != null)
alert(target.nodeName);
This is my second week of javascript class so I'm pretty new with it.
The DOM isn't ready at this point:
<script type="text/javascript" src="script.js"></script>
Move that line to the end of <body>
Read about those kind of issues in this docs
Related
I am a complete beginner to javascript. I am also new to this website. I am asking for help to complete an assignment. I have been trying for more than 4 hours by looking at lecture material and online for a solution. It is causing me a lot of unnecessary stress. Before javascript we only used CSS and Html. I was given 6 javascript tasks to manipulate the html file (taskc.html) already given to me.
The tasks are as follows
Make a statement to change contents of h1 from "Welcome" to "Text"
2nd statement should make an new alert window when the page loads that delivers a message explaining what the page is about
3rd statement should change the title to "text"
4th statement should log the contents (innerHTML) of the first paragraph element in the console.
5th statement should hide the contents of the second paragraph when the page loads
6th statement should change the contents of the header to have a new colour of your choice
Here is that html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
</body>
</html>
Because the actual coding im meant to add is meant to be in the .js file I was given. so I figured I had to link the js file in the html file so I added
<script type="text/javascript" src="taskc.js"></script>
With that out of the way I went to the lecture notes and I thought I would simply need to modify some of the code given to me there like
document.getElementById('demo').innerHTML = 'Hello World!';
When I put this code in brackets I got the error (document is not defined)
I modified it to match the requirements for task 1
here it is
document.getElementById('header').innerHTML = 'text';
I was confused because I didn't know what this error meant and of course Errors and how to fix them are never explained so I had to lookup how to resolve the error.
I found that to fix it I have to declare it as a variable so I ended up doing this.
var document = 'taskc.html';
When I did this for document, alert and console all the errors went away, but when I did a live preview only statement 1 was working
If anyone could help me fix this I would really appreciate because I don't understand enough javascript to be able to complete this in a reasonable amount of time.
So first: Please use Javascript functions to keep your code tidy and clean.
Example:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Task C - The Document Object Mode</title>
</head>
<body>
<h1 id="header">Welcome</h1>
<p id="first">This site uses JavaScript</p>
<p id="second">Javascript is very useful</p>
<script type="text/javascript" src="taskc.js">test();</script>
</body>
</html>
function test(){
alert("This is a test!");
}
Always implement scripts that are document referenced at the bottom of your html.
If you use JQuery you can use following code to check document is loaded:
$(document).ready(function(){
//foo bar
});
I started to learn javascript and I saw the following code in one of Javascript books:
<!DOCTYPE html>
<html>
<head>
<title>A Simple JavaScript Example</title>
</head>
<body>
<p>Printed before JavaScript is run.</p>
<p>
<script type=”text/javascript”>
document.write(“Printed by JavaScript.”);
</script>
</p>
<p>Printed after JavaScript is run.</p>
</body>
</html>
According to the book, three lines has to be printed. However, when I open this html file in the browser I see only the first and the last lines. The line "Printed by JavaScript" doesn't show.
Do you have any idea what can be the problem?
I guess it's because you used incorrect double quotes (wrong copy-paste from the book sample):
”
should become:
"
so that you have:
<script type="text/javascript">
document.write("Printed by JavaScript.");
</script>
I am very new to javascript but I can't go forward in learning because my console.log doesn't work AT ALL I will type in the console.log message and on my html page nothing shows up. i have try to debug it but I'm so new I don't know how all I can do is go to the forums and ask, it seem some people have the problem but, there is no good answer to the problem. I've tried every thing i know how to do (which isn't very much) but nothing works PLEASE HELP!!
this is my program
<html>
<head>
<title>My First proper HTML page</title>
</head>
<body>
<h1>Hello</h1>
<p>My First web page.</p>
<script type="text/javascript">
console.log("Hello World!"</script>
</body>
</html>
i know that it has to be in dev tool to see it now but how do i make it show up in the html not in dev.?
there has to be a way!
i now now that document.write is the right way but that isn't working either
<html>
<head>
<title>My First proper HTML page</title>
</head>
<body>
<h1>Hello</h1>
<p>My First web page.</p>
<script>
var name = "Nicholas";
document.write("Hello " + name);
if (name.length > 7 {
document.write("Wow you have a Really Long name!");
}
</script>
</body>
</html>
Technically, console.log is not supposed to show up on your HTML page. Rather, it shows up on your console's (web browser) log.
Even with all the correct answers provided, you can view your answer by visiting the Developer Tool -> Console (For Chrome, on Apple, it's Option + Command + J). For Windows, using Chrome, you hold the following keys: Ctrl+Shift+J
Here is a clip of the code and the log recorded by the console:
because you have to type console.log()
not control.log
Also, console.log needs to be either inside script tags, or in a separate javascript file. In your case you would have to do:
console.log("Hello, World!");
Try the below sample
<html>
<head>
<script type="text/javascript">
console.log("Hello World")
</script>
</head>
<body>
Hello
</body>
</html>
Unless you typed/edited your post.. that has an invalid Javascript.
<html>
<head>
<title>My First proper HTML page</title>
</head>
<body>
<h1>Hello</h1>
<p>My First web page.</p>
<script type="text/javascript">
console.log("Hello World!");
</script>
</body>
</html>
You did not have a closing )
Ah, as others have explained.. Console is not your HTML page, its part of the web browser itself. For example, in google chrome press CTRL+SHIFT+J to show it.
Your after document.write
I have an extremely basic html document written as the following:
<html>
<head>
<title>A Basic Javascript Game</title>
</head>
<body>
<script language="JavaScript" src="mygame.js">
</script>
</body>
</html>
I've created an according Javascript file, have made sure that it's syntax is alright. The first line of the mygame.js file is:
var persontotalkto = prompt("You wake up one Saturday morning. The Holidays just started, and you can't wait to tell your family where you've decided for all of us to go on vacation! Who do you talk to: WIFE, SON, or DAUGHTER?").toUpperCase();
But when I open the html file, I'm not getting any prompt whatsoever. I have javascript enabled, so what is the problem?
Change the script tag to either the HTML4 version:
<script type="text/javascript" src="mygame.js"></script>
Or the HTML5
<script src="mygame.js"></script>
(Either will work on any browser released this millennium.)
Change
<script language="JavaScript" src="mygame.js">
</script>
to
<script type="text/javascript" src="mygame.js">
</script>
I do not know why this simple code although it was meant to be for education purpose
so please me help identify the thing that I have made wrong:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Random thoughts part one</title>
<meta http-equiv="content-type" content="text/html;charset = utf-8" />
<meta name="keywords" content="thoughts, random, philosophy, mohamed, samir ,sameer, muhammad , mohammed samir" />
<meta name="description" content="This is a personal page about Mohamed Samir khalil that contain his thoughts and believes" />
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<script type="text/javascript">//
<![CDATA[
alert("hello");
var target = document.getElementById("unique_element");
alert(target.length);
//]]>
</script>
<center>
<h3>Random thoughts</h3>
</center>
<p id="unique_element">I do not think it is coincidence, because every time I walk in streets I have that strong feeling that keeps telling me ”Man, you have to help people!”.</p>
<p>In the beginning I thought that because of thinned for recognition I mean I do this just to hear people say “thank you” and to hear people say “it is great thing that you
are between us” so I thought it is all about ego, but you know when I really realized that it is not about ego!</p>
<p>I realized that when I helped someone and they did not say thank you, what was supposed to happen is that , I should feel anger because it is all about ego, right?</p>
<p>But what really happened that I felt happy just to help now people who are reading this will say either “you are so kind” or “Okay, you want to make it up huh!”but
the reality is just neither this or that ; actually I realized that I am helping people because this is what make us humans and this thing let us feel that we are not alone in this world so
it is kind of socializing too and also when you help people, I guarantee that someday someone will help you in a very tough situation and he or she will come out of nowhere this is the rule
of life and this is how people should live.</p>
</body>
</link>
</head>
</html>
Your script runs before the DOM is parsed so:
var target = document.getElementById("unique_element");
won't return the HTML element and target.length will simply fail. Try to put the JavaScript part before the closing </body>-tag.
You are trying to show the length of a DOM Element.
Try alert(target.innerHTML.length); instead.