I have 3 files.
Connections.js
Main.html.
ScriptFile.js
I am copying only small part of the code here.
Connection.js has a class
import {net} from 'net';
export class connect {
Testfunction() {return "something"}
}
main.html has a function
<html>
<head>
<script src= 'Connections.js'></script>
<script src= 'ScriptFile.js'></script>
</head>
<body>
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
</body>
</html>
ScriptFile.js
import { connect } from "./Connections.js";
const ObjConnect = new connect()
function myFunction() {
document.getElementById("demo").innerHTML = ObjConnect.Testfunction();
}
How do I make "text" in my html file to change to "something" when I click on it?
First you have a typo at file name.
It's Connection, not Connections in main.js
Case1. using module
main.html
<html>
<head>
<script type="module" src="Connection.js"></script>
<script type="module" src="ScriptFile.js"></script>
</head>
<body>
<p id="demo">Click me to change my text color.</p>
</body>
</html>
ScriptFile.js
import { connect } from './Connection.js';
const ObjConnect = new connect();
function myFunction() {
document.getElementById('demo').innerHTML = ObjConnect.Testfunction();
}
document.getElementById('demo').addEventListener('click', myFunction);
Case2. using script
main.html
<html>
<head>
<script src="Connection.js"></script>
<script src="ScriptFile.js"></script>
</head>
<body>
<p id="demo" onclick="myFunction()">Click me to change my text color.</p>
</body>
</html>
Connection.js
class connect {
Testfunction() {
return 'something';
}
}
ScripFile.js
const ObjConnect = new connect();
function myFunction() {
document.getElementById('demo').innerHTML = ObjConnect.Testfunction();
}
Related
This question already has answers here:
Using HTML script tags to code while they have a source
(2 answers)
Closed 2 years ago.
<!DOCTYPE html>
<html>
<style></style>
<script src="main.js">
function myFunction() {
document.body.style.background = "url('images/img_tree.png')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
Why won't this work? I am using the brackets IDE currently.
The problem is you set src="main.js", in this case all script inside script tag will be not execute, it only execute javascript in main.js file.
<!DOCTYPE html>
<html>
<style></style>
<script>
function myFunction() {
document.body.style.background = "url('https://geology.com/world/world-map-360.gif')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
You need to remove the src="main.js" from your script tag
Does this fix it ?
<!DOCTYPE html>
<html>
<style></style>
<script>
function myFunction() {
document.body.style.background = "url('https://fsb.zobj.net/crop.php?r=e9wUbuA4gtFtr46UA2PE5GMcriRP4IPSzPTWOBs82VJEK_zIJcyRW5kh6JE_GrxfEmFki6gil-dD-LL5eMpMNcj5Sjw4u4Y6MwkMhR-1WlgJ50l6FRXVLRylR_2lbwvcMeLEOIUkEzNPODPaAqMfI4ClDs3vu9s3Z2s8bF55uCt0KPXzxye5ueQyfDyFFgfks2aGkOwr7pURMvK_')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body>
</html>
Delete src="main.js" on script tag
if you want to use main.js file. you have to add extra script tag
like this
<!DOCTYPE html>
<html>
<style></style>
<script src="main.js"></script>
<script>
function myFunction() {
document.body.style.background = "url('images/img_tree.png')"
}
</script>
<body>
<button onclick="myFunction()">Set background</button>
</body></html>
Or you can add myFunction on your main.js file
Use the following code snippet for the add background image.
// Sets the background image
const setBackground = (image) => {
document.body.style.background = "url('"+IMAGE_URLS.[image]+"')";
};
I want to inject text into a div using a variable. Here's a Stack Snippet of my code:
tDNA() {
var dna = prompt("Enter the DNA: ");
}
document.getElementById("dna").innerHTML = "DNA: " + dna;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<src="main.js">
<div id="dna"></div>
</body>
</html>
function promp
You need to import your script like this
<script type="text/javascript" src="main.js"></script>
You can try this out.
HTML
<html>
<head>
</head>
<body>
<script defer src = "main.js"></script>
<div id = "dna">
<p></p>
</div>
</body>
</html>
JavaScript
function promptDNA(){
var dna = prompt("Enter the DNA: ");
d1 = document.querySelector("p");
d1.textContent = dna;
}
promptDNA();
Like this, you have to add the data to the HTML where the variable dna is in scope and then actually call the function
function promptDNA(){
var dna = prompt("Enter the DNA: ");
document.getElementById("dna").textContent = "DNA: " + dna;
}
promptDNA()
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="dna"></div>
<script src="main.js"></script>
</body>
</html>
Also, you're importing your script improperly.
I've read many tutorials and tried them, but they don't work.
Just for example I wrote this simple code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script>
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
</script>
</body>
</html>
I get Test Message text in my page.
Then I put my JS code to an external file: '/js/js.js'
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
And modify the HTML file to:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/js/js.js"></script>
</head>
<body>
<p id="testElement"> Html text</p>
</body>
</html>
When I open the HTML file in a browser, I only get Html text. My JS does not work. Please explain what I am doing wrong.
Your problem is that javascript linked in head is executed before the body is loaded, so you can just put the script at the end of the body like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement"> Html text</p>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
Check the JavaScript error console.
Your code runs before the document is rendered so the node testElemet doesn't exist.
Either move your script-include down as the last element in the body or wrap your code in a load/ready event.
function on_document_ready(callback) {
if (document.readyState === "complete") {
callback();
} else {
document.addEventListener("DOMContentLoaded", callback);
}
}
on_document_ready(function () {
var paragraph = document.getElementById("testElemet");
paragraph.innerHTML = "Test Message";
});
This should work fine:
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="testElement">Html text</p>
<script type="text/javascript" src="/js/js.js"></script>
</body>
</html>
Please make sure that <script type="text/javascript" src="/js/js.js"></script> is placed just before </body>.
Try this
var doSomething = function()
{
var paragraph = document.getElementById("testElement");
paragraph.innerHTML = "Test Message";
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js.js"></script>
</head>
<body onload = "doSomething();">
<p id="testElement"> Html text</p>
</body>
</html>
Try saving both the files in the same folder.
Make use of your browsers developer console, to determine whether any errors have occurred.
Regarding 'onload', you can have a look at this link.
How can I link these js function and js call to cordova(phonegap) project?
***index file***
here is js functions
<html>
<head>
<script>
function SetStart(ss) {
Start0 = ss;
Init();
}
function Init() {
//initialization
}
</script>
</head>
***.and js call in index file.***
<body>
<div id ="links">
<img src="img/abc.jpg">
</div>
</body>
</html>
I want to call a function on my body load. I want to render my html page after getting the response from the function. For example:
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
}
</script>
</head>
<body onload="welcome()">
<p>hai</p>
</body>
I want the hai to be displayed after pressing ok in the alert box. Can anyone help me with this?
You could do something like this:
<head>
<script type="text/javascript">
alert("Welcome");
</script>
</head>
<body>
<p>hai</p>
</body>
This would alert before the body is loaded, then when you clicked 'ok' it would load the body.
You can do it that way:
<html>
<head></head>
<body onload="render()">
<script>
var content = '<h1>Hello, World!</h1>';
function render() {
var answer = confirm('Do you want to render the page?');
if (answer) {
document.body.innerHTML = content;
}
}
</script>
</body>
</html>
And a live demo.
try this
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
}
welcome();
</script>
</head>
<body>
<p>hai</p>
</body>
You could add a class to the body to make contents not visible and remove it after the function is called..
<html>
<head>
<script type="text/javascript">
function welcome(){
alert("Welcome");
document.body.className = '';
}
</script>
<style type="text/css">
.invisible{visibility:hidden;}
</style>
</head>
<body onload="welcome()" class="invisible">
<p>hai</p>
</body>
</html>
Try this code,
<body onload="welcome()">
<p id='hi'></p>
<script type="text/javascript">
function welcome(){
alert("Welcome");
document.getElementById('hi').innerHTML='hi';
}
</script>
</body>