I am new to html and scripts. I currently have a very simple html file,
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" scr="/Users/MyName1/Desktop/Folder1/testing.js"></script>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph!</p>
<button type="button" onclick="test()">Ship Package</button>
</body>
</html>
and here is my JavaScript Script,
function test(){ console.log("hi"); };
I tried scr="testing.js" since the file is in the same folder as the html file but it gave me a "ReferenceError Can't find variable test". I then included the whole scr path in the HTML, (even though the html file and the script are in the same folder) but I still get the same "ReferenceError". What is going on? What might I be doing wrong. I am using atom as the IDE btw. Any help is appreciated! Thank you!
The script source attribute is incorrect, it should be src, not scr
<script type="text/javascript" scr="/Users/MyName1/Desktop/Folder1/testing.js"></script>
to
<script type="text/javascript" src="C:/Users/MyName1/Desktop/Folder1/testing.js"></script>
Related
I'm pretty new to JQuery and I may be missing a few things about it.
I have created a .php file which contains the header of my website. I included it into my main .php file. The "header.php" contains a 'div class= userbox_rectangle_full_header' that I would like to select from a JQuery loaded in the main "homepage.php".
I tried selecting it to show an alert on the click of the 'div'. When the Jquery is loaded in the "header.php", no problem, the alert correctly shows. But nothing happens when the .js file is loaded in "homepage.php".
Hope you'll be able to help me about what I'm missing.
The main homepage in which I load the JQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<title>DSI Welcome</title>
<link rel="stylesheet" href="../css/homepage.css" />
</head>
<body>
<header>
<?php include 'header.php';?>
</header>
<div class="work_space" id="homepage_work_space">HOMEPAGE</div>
<div class="work_space" id="userpage_work_space">USERPAGE</div>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery_color_animation.js"></script>
<script src="../js/script/homepage_script.js"></script>
</html>
The "header.php" file which I include into the main "homepage.php":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Header</title>
<link rel="stylesheet" href="../css/header.css" />
</head>
<body>
<header>
<div class="userbox_rectangle_full_header"> </div>
</header>
</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/jquery_color_animation.js"></script>
<script src="../js/script/header_animation.js"></script>
</html>
Finally, the JQuery code which is not working when loaded in the "homepage.php", but working when loaded in the "header.php":
$(document).ready(function() {
$('#homepage_work_space').on('click', function(){
alert('hi');
});
});
Thank you in advance !
There is some points in your code thats better to know .
Your html structure is wrong! simple html5 structure:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<!-- Your JQuery Main File -->
</head>
<body>
Content of the document......
</body>
</html>
Define your main jquery file in head of your body.
Your document has 2 <body> tag . (one your main body and other included from header.php )
Define your script files(except jquery that defined in head) in the footer , just before </body>
And in your header.php file dont define any script!
Have a good time!
It looks like you're loading in the scripts outside of the body. Make sure to load them inside your <head> tags.
here's a copy and paste from the revision history of the question, in order to demonstrate how the HTML markup should look alike, according to the op's description ...
file index.php:
<html>
<head>
<script src="../js/jquery-3.3.1.js"/>
<script src="../js/jquery_color_animation.js"/>
<script src="../js/script/homepage_script.js"/>
</head>
<body>
<?php include 'header.php'; ?>
<!-- further content goes here -->
</body>
</html>
file header.php:
<div class="userbox_rectangle_full_header">
<div class="work_space" id="homepage_work_space">HOMEPAGE</div>
<div class="work_space" id="userpage_work_space">USERPAGE</div>
</div>
file homepage_script.js:
$(document).ready(function() {
$('.work_space').on('click', function(){
alert('hi');
});
});
I'd suggest Twig or any other PHP template-engine, which are frameworks specialized on rendering HTML markup, including template bits, etc.
I have a React JS file which renders the following:
React.render(
<TreeNode node={tree} />,
document.getElementById("tree")
);
I reference it from a HTML file in the following way:
<!doctype html>
<html lang="en">
<link rel="stylesheet" href="app/listTree/treenode.css">
<h3>It's <code>TreeNodes</code> all the way down</h3>
<p>Edit the <code>tree</code> variable to change the tree</p>
<div id="tree">
<script src="/listTree/TreeNode.js"></script>
</div>
</html>
However, the contents of the JS file are not displayed.
I don't have experience in working with JavaScript.
Why is this happening?
Your script is already selecting the tree div element. So, there is no need to put a script tag inside of the div tag.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="app/listTree/treenode.css">
</head>
<body>
<h3>It's <code>TreeNodes</code> all the way down</h3>
<p>Edit the <code>tree</code> variable to change the tree</p>
<div id="tree">
</div>
<script src="listTree/TreeNode.js" type="text/jsx"></script>
</body>
</html>
You are also missing the <head> and <body> html tags.
Further, if you want to render jsx in your React code, you need to add <script> tags for them as well (and type="text/jsx" as a tag attribute):
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="app/listTree/treenode.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
<h3>It's <code>TreeNodes</code> all the way down</h3>
<p>Edit the <code>tree</code> variable to change the tree</p>
<div id="tree">
</div>
<script src="listTree/TreeNode.js" type="text/jsx"></script>
</body>
</html>
EDIT:
As a test to make sure your environment is working (and you don't just have a problem in your Component. Try to replace the code inside Treenode.js with this:
React.render(
<div>Testing...</div>,
document.getElementById("tree")
);
Then, you have no external dependencies. If you see Testing... rendered, you know that the environment is set up correctly.
Try to load your script after your div and not inside
<div id="tree">
</div>
<script src="/listTree/TreeNode.js"></script>
You need to load React also
Here is how I get it working add the following script
<script src="https://npmcdn.com/babel-core#5.8.38/browser.min.js"></script>
and change the type to 'text/babel'
<script type="text/babel" src="script.js"></script>
and the external js file should be with
.jsx
extension
please see working example here
You should not place a slash before "listTree".
So your script tag should look like this:
<script src="listTree/TreeNode.js"></script>
So I know this is a super noob question but after adding a script tag for a .js file,my title element stops working.
As an example :
<html>
<title>TEST</title>
<head>
<script type="text/javascript" src="datetime.js"></script>
</head>
<body onload="showDateTime()">
<p>
</p>
</body>
</script>
</html>
yet if I delete the "<script type="text/javascript" src="datetime.js"></script>" portion, the title element works again. ANy help would be appreciated. Thanks
Two problems:
The title tag must be placed inside the <head></head>
The <script> tag is incorrectly nested. It must be closed in the head
<html>
<head>
<title>TEST</title>
<script type="text/javascript" src="datetime.js"></script>
</head>
<body onload="showDateTime()">
<p id='datetime-container'>
</p>
</body>
</html>
The code above should work.
The title tag needs to be inside the head.
http://www.w3schools.com/html/html_head.asp
I have an image.html file in dreamweaver.
in source code I link an js file called img.js
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>PHOTO</title>
<script language="javascript" type="text/javascript" src="js/img.js"></script>
</body>
</html>
if an use an alert in img.js
alert("My First Jquery Test");
it shows correctly in web page but if write some javascript code like
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
The paragraph above was changed by a script.
nothing shows..why and how I show this?
The script is working as you can see here.
Report your fully HTML file if still have problem.
Remember:
<html>
<head></head>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
</body>
</html>
Do it right
edit img.js
window.onload=function(){
alert("My First Jquery Test");
document.getElementById("p2").style.color="blue";
}
Html:
<!DOCTYPE html>
<html>
<head>
<SCRIPT language="JavaScript" src="mapbody.js"></SCRIPT>
</head>
<body>
Click for a message..
</body>
</html>
mapbody.js:
function a_message()
{
alert('I came from an external script! Ha, Ha, Ha!!!!');
}
When I pull up the web page and click the link nothing happens. Both files are in the same folder. What am I missing?
Several things:
HTML-elements should all be lower-case.
The language-attribute in the script-tag is obsolete. Use type="text/javascript" instead.
A JavaScript-function call should go into the onclick-attribute, not the href.
A proper implementation might look like this:
<!DOCTYPE html>
<html>
<head>
<title>Is required!</title>
<script type="text/javascript" src="mapbody.js"></script>
</head>
<body>
<a onclick="a_message();" href="#">Click for a message..</a>
</body>
</html>
Also, binding function-calls to an HTML-Element using the onclick (or any other onXX-attribute) is old-school. Library's like jQuery enable you to use CSS-selectors to bind actions on certain HTML-elements, which allows a full separation of HTML and JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
Click for a message..
<script type="text/javascript" src="mapbody.js"></script>
</body>
</html>
Lukas Knuth was faster than me. :)
Works for me (Firefox 8) : http://jsfiddle.net/FCXxU/
Is the URL to your script good?
A simple way to check that is to add an alert('test'); at the beginning of mapbody.js (before the function).