How can I call a javascript function from an html file - javascript

I have a .js file defined as follows:
<script>
function sayHello() {
alert("Hello World");
}
</script>
And I have a .html file defined as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/testCSS.css">
<title>test html</title>
</head>
<body>
<script type="text/javascript" src="js/testJS.js"></script>
</body>
</html>
How can I call the sayHello() function?

script.js
function sayHello() {
alert("Hello World");
}
index.html
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<script src="script.js"></script>
<script>
sayHello();
</script>
</body>
</html>

You just need to call it!
let me explain in an example.
let's say you have a button in that html that calls sayHello function.
<button type="button" onclick="sayHello ()">Say hello</button>
I think you should take a look at here.

Jus replace the link to script with content of .Js file...
Or call the function
<script>
sayHello()
</script>

Related

Why is my Javascript and JQuery scripting not working?

I was looking at another question and saw that they had been told, when their Javascript was not working, to put a function that started on loading of the page.
I was trying to use this code:(well, not exactly this code, but something like it)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
var code = document.getElementsByTagName("body");
code.append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
And nothing happened. All that it did was show the h1 code that I put in there.
Since you are already including jQuery try this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var code = $("body");
code.append("<p>Yes it did.</p>");
});
</script>
</head>
<body >
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
You forgot to include the parenthesis to call the function in the body element's onload attribute:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded() {
//Modified the two lines below slightly
var code = document.querySelector("body");
code.innerHTML += "<p>Yes it did.</p>";
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>
A better/cleaner way to achieve the same thing would be to use addEventListener and DOMContentLoaded event. Something like below:
document.addEventListener("DOMContentLoaded", appendHtml.call(null, {
selector: 'body',
html: '<p>Yes it did.</p>'
}));
function appendHtml(config) {
document.querySelector(config.selector).innerHTML += config.html;
}
<h1 style="font-family:sans-serif;">Did it work?</h1>
Two reason why it doesn't work:
To select the body you have to use document.body or $("body") (in jQuery)
And you forgot to add parentheses to your function call doThisWhenLoaded()
Here is the code corrected:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
function doThisWhenLoaded(){
$("body").append("<p>Yes it did.</p>");
}
</script>
</head>
<body onload="doThisWhenLoaded()">
<h1 style="font-family:sans-serif;">Did it work?</h1>
</body>
</html>

Block javascript file from executing

Consider these files:
index.html
<!doctype html>
<html>
<body>
<p id="remove">This will be removed!</p>
<script src="script.js"></script>
</body>
script.js
document.getElementById("remove").innerHTML = ("");
Is there a way to block script.js from executing?
This is for a CTF challange
Maybe I should also mention that I cant edit any of these.
document.addEventListener("DOMContentLoaded", theDomHasLoaded, false);
function theDomHasLoaded(e) {
document.getElementById("remove").innerHTML = ("");
}
<!doctype html>
<html>
<body>
<p id="remove">This will be removed!</p>
<script src="script.js"></script>
</body>

JQuery event not caught when triggered iife

I have the following html file, called a.html
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
</body>
</html>
And the following Javascript file, called a.js
(function() {
$(document).trigger('foo');
}());
When I open a.html, the trigger call in a.js is called, the line
$(document).on('foo', function () {
is called but the alert is never called. What am I doing wrong?
The issue in the above code as per my understanding is a.js is getting loaded before the below script.
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
And this event is getting bind after its already been called in a.js.
Try loading a.js below above script like below.
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
<script type="text/javascript" src="a.js"></script>
place both the scripts at one place in the order as shown it will work..
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<label> rerwnr</label>
<script>
</script>
</body>
</html>
(function() {
$(document).on('food', function () {
alert('test');
});
$(document).trigger('food');
}());
https://codepen.io/pavankumark/pen/WExNEg
Check out the link here for more details.
Try adding the script file a.js at the end of body,
<body>
<script>
$(document).on('foo', function () {
alert('test');
});
</script>
<script type="text/javascript" src="a.js"></script>
</body>
You need to update your code like this:
You can put script code to a.js file:
Here id demo: https://jsbin.com/fukujad/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
$(function(){
$(document).on("test", function(){
alert("test triggered");
});
$(document).trigger("test");
});
</script>
</body>
</html>
In a.js you call trigger foo before you defined it,
try to use document ready like this and it will work
$(document).ready(function(){
$(document).trigger('foo');
})
It will wait to load whole document (and all scripts in the document)

Can someone point out my syntax error?

I believe that I have a syntax error somewhere in my script, could someone point it out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
</head>
<body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
</script>
</body>
</html>
Not sure what syntac error you are seeing at your side.. But I would have made some changes
Move the script inside head
add the code inside a function that will be called on page load
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
$(function() {
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
});
</script>
</head>
<body>
</body>
</html>

Call function defined in body from head

I have this simple HTML page:
<html>
<head>
<script>
share();
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
I need to call the function share from the <head> and the function itself must be defined in the <body>.
The above code leads to undefined function error.
This is just a simplified script to explain the issue so it needs to be done that way. Is there a way around this?
You need to wait for the body to be loaded, so
<html>
<head>
<script>
window.onload=share;
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
You can use
<html>
<head>
<script>
windows.onload = function(){
share();
}
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
or you can use Jquery version
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function() {
share();
});
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>
</body>
</html>
Both of them work in this condition however if you want to know the difference between this tow I suggest to see this
window.onload vs $(document).ready()
Use
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
share();
});
</script>
</head>
<body>
<script>
function share() {
alert('test');
}
</script>

Categories