I have created an html file
<html>
<head>
<title>test</title>
</head>
<body>
<p id="demo">l</p>
<script type="text/javascript" src="profile/test.js">
s(shiva);
</script>
</body>
</html>
i want to change the value of the paragaraph. So my external js file is
function s(nam) {
document.getElementById("demo").innerHTML = nam;
}
But is not changing can anyone suggest me how can change the value.
You can not include code in a javascript tag with a "src" attribute. So move the loose javascript in a new tag.
<script type="text/javascript" src="profile/test.js"></script>
<script type="text/javascript">
s('shiva');
</script>
Related
Doing some basic practice/testing for a project I'm working on and can't get my html file to access the functions written in the attached javascript file. I feel like there's something super basic that I'm missing but I can't put my finger on it.
I pulled the basic button from here: Creating an ON/OFF button with javascript
And I tried the solutions here: HTML file not pulling information from javascript file
My html:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>
My js:
function turn(){
currentvalue = document.getElementById('turn').value;
if(currentvalue == "X"){
document.getElementById("turn").value="O";
}
else{
document.getElementById("turn").value="X";
}
}
The function itself works when embedded in a script tag within <body> but not when pulled from the attached javascript file. What am I missing?
function turn(){
currentvalue = document.getElementById('turn').value;
if(currentvalue == "X"){
document.getElementById("turn").value="O";
}
else{
document.getElementById("turn").value="X";
}
}
<!DOCTYPE html>
<head>
<script type="text/javascript" src="app.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="button" value="X" id="turn" onclick="turn();">
</body>
</html>
You need to add defer atrribute.
You should use <script> tag in body.
<!DOCTYPE html>
<html lang="en">
<head> </head>
<body>
<input type="button" value="X" id="turn" onclick="turn();" />
<script src="app.js"></script>
</body>
</html>
For summary: Modern approach to old approach
You can use module which are defered by default <script type="module" src="/app.js"></script>
You can use defer to make sure your js is executed after page has load i.e <script src=app.js" defer></script>
You can put your <script> tag before </body> body tag closing
For more details, you can look at this excellent answer.
I have typed in the javascript just as you have but on a separate file linked through the HTML file. The button shows up however I am not getting any alert when it is clicked. My code is as follows:
Javascript(index.js):
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
</html>
Anyone know why my button is not working? It seems to me all my code is in order unless I am overlooking something.
Your code is being executed prior to the element it refers to existing in the page. Move the JavaScript to the end of the document or wrap it in a window.onload function.
window.onload = function () {
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
}
jsFiddle example
You need to wait for the document to be constructed before you can reference elements in it.
Put your script tag in body, just before the end. This will ensure that the document is there when the script runs.
Or, you can wrap your js in a load listener like this
window.addEventListener("load", function(){
//...your stuff here
})
You should not put <script type="text/javascript" src="index.js"></script>
before <body></body>, because when the browser is trying to register the event, the <button> is not loaded already. So when you take a look at the control panel, you would get something like TypeError: document.getElementById(...) is null.
The right version might be
<!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
Sometimes you should put script code below the button
<button id="myButton">Click</button>
document.getElementById("myButton").onclick = function () {
alert("Hi");
}
first thing is you haven't included jquery in your code, change your HTML to this
!DOCTYPE html>
<html>
<head>
<title>Javascript is Fun!(When it works)</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<button id="myButton">Click</button>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
and your index.js to
$(document).ready(function(){
$('#myButton').click(function(){
alert("Hi");
});
});
this worked for me hope this work for you too
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
Some of my sites are fine but others I go to create from scratch like so:
<?php
define("NAME", "Terrasoft");
?><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?=NAME?></title>
</head>
<script href="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script href="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($) {
$(function() {
$("#date").html(Date.parse("today"));
});
})(jQuery);
</script>
<style type="text/css">
#date {
font-weight: bold;
}
</style>
<body>
<div>
Welcome to the <strong>Terrasoft Development Server</strong>. This page was output at a system time of <strong><?=date("g:i:s A")?></strong> on <strong><?=date("F j<\s\u\p>S</s\u\p>")?></strong>. The current local time is <span id="date"></span>.
</div>
</body>
</html>
... and the script elements at the top do not get included and have no content inside Firebug. I am online—that's not the issue. I get jQuery is not defined. Any ideas? Thanks.
Script tags do not have the href attribute, use src.
<script src="http://yourjavascript.com/8953781221/date.js" type="text/javascript"></script>
<script src="assets/js/jquery-1.10.2.min.js" type="text/javascript"></script>
You should be aware that href attributes are for <a> tags/anchor.
the src attribute specifies the URL of an external script file.
Note: Point to the external script file exactly where the script is written.
Syntax:
<script src="URL">
The system at JSFiddler seems to think this is Ok too, but won't display the alert either. http://jsfiddle.net/dmafackler/zEEpB/3/
<!doctype html>
<html>
<head>
<title>foobar</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
$(document).ready(function() { alert("Is anybody home?"); });
</script>
</head>
<body>
<p>Copasetic.</p>
</body>
</html>
<script> tags aren't self-closing. You need to provide a closing tag:
<script type="text/javascript" src="jquery.js"></script>
If you don't, the HTML isn't parsed correctly: