I am trying to get an HTML element from 2 different html files. The problem is I only get one of them.
var message1 = document.getElementById("message1") works.
But when I try to do the same for the element in the other html page:
var message2 = document.getElementById("message2") it returns null
I have a main html file (index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p id = "message1">I hate the post office</p>
<script src="script.js"></script>
</body>
</html>
And I also have another html file (page2.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p id = "message2">Random sentence</p>
<script src="script.js"></script>
</body>
</html>
And finally I have a javascript file (script.js):
//Gets message1 from index.html (works)
var message1 = document.getElementById("message1")
//logs message1 from index.html (works)
console.log(message1)
//gets message2 from page2.html (doesn't work)
var message2 = document.getElementById("message2")
//logs message2 from page2.html (logs null)
console.log(message2)
How do I get the elements of id message and message2 in script.js?
I try this another way using iframe. Add in index.html page
<p id="message">I hate the post office</p>
<iframe src="page2.html" frameborder="0" style="display: none;"></iframe>
<script src="script.js"></script>
Related
If I remove src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs/dist/tf.min.js" then it shows my alert. What's wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Brain Tumor </title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs/dist/tf.min.js">
alert("alert"); // doesn't work if there's src
/*async function LoadModels(){
model = undefined;
model = await tf.loadLayersModel("D:/user/diploma/models/models/model.json");
const image = tf.fromPixels("D:/user/diploma/IM-0115-0001.jpeg");
const prediction = model.predict(image);
alert(prediction);
}
LoadModels();*/
</script>
</head>
...
</html>
EDIT:
You have to add alert in another script tag.
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs/dist/tf.min.js"></script>
<script>
alert("alert");
</script>
I made an HTML document with a button that when I click were to it display a prompt that modify a p tag.
Probably, I made a dumb error of code syntax(I am beginner in js).
Help me and explain please.
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href='calendar.css'/>
<script type="text/javascript">
function name(x){
var x = prompt("Enter the month name","Ex. January");
document.getElementById("month_name").innerHTML = x;
}
</script>
<title>:)</title>
</head>
<body>
<div class="title_Month">
<button onclick="name()" class="title" >Change the month displayed</button>
<p id="month_name"></p>
</div>
</body>
</html>
name is reserved in javascript.
You should avoid using the name of JavaScript built-in objects, properties, and methods
https://www.w3schools.com/js/js_reserved.asp
<DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href='calendar.css'/>
<script type="text/javascript">
function names(){
var x = prompt("Enter the month name","Ex. January");
document.getElementById("month_name").innerHTML = x;
}
</script>
<title>:)</title>
</head>
<body>
<div class="title_Month">
<button onclick="names()" class="title" >Change the month displayed</button>
<p id="month_name"></p>
</div>
</body>
</html>
I have a site that should first load external js codes before it executes code in the dom but i wont work. Everytime my external codes load after the js in the body tag what caused problems like undefined classes and variables
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Site</title>
<link rel="stylesheet" href="./style.css">
<script src="./project/load.js"></script>
</head>
<body>
<h1>project</h1>
<div id="project"></div>
<script src="./script.js"></script>
</body>
</html>
./project/load.js
window.onload = function() {
var links = ["./project/script1.js", "./project/script2.js", "./project/script3.js"];
for(var link of links) {
var script = document.createElement("script");
script.src = link + "?0";
script.setAttribute("onerror", "reload(this)");
document.head.append(script);
}
}
I tried also with 'addEventListener('DOMContentLoaded', function() {...});' but it did work either.
I hope you can help me.
EDIT 1:
request order
./project/load.js
./script.js
./project/script1.js
./project/script2.js
./project/script3.js
Load your javascript with defer attribute. Replace your HTML with below. The "defer" attribute allows the javascript is run only after the page loading is complete. Meaning the DOM is available
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Site</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1>project</h1>
<div id="project"></div>
<script src="./project/load.js" defer></script>
<script src="./script.js" defer></script>
</body>
</html>
References and further read
https://www.sitepoint.com/introduction-jquery-deferred-objects/
https://www.w3schools.com/tags/att_script_defer.asp
Here is what i've done. Please look at this below
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Site</title>
</head>
<body>
<h1>project</h1>
<div id="project"></div>
<script src="load.js" defer></script>
<script src="script.js" defer></script>
</body>
</html>
Javascript - load.js
(function(){
var dom = document.getElementById("project");
if( dom !== null ){
dom.innerHTML = "<p>Iam load.js " + new Date().toString() + "</p>";
console.log("Iam load.js " + new Date().toString());
}
})();
Javascript - script.js
(function(){
var dom = document.getElementById("project");
if( dom !== null ){
dom.innerHTML = dom.innerHTML + "<p>Iam script.js " + new Date().toString() + "</p>";
console.log("Iam script.js " + new Date().toString());
}
})();
Output
You can see that the order in which i've added the script loads first.
So I retrieve a JSON result from a webservice(created with spring) which looks like this:
[
{"id":34,"nachname":"Mozart","vorname":"Wolfgang Amadeus","namenspraedikat":"","instrumentId":0,"geburtsdatum":"27.01.1756","herkunftsland":"Salzburg","sterbedatum":"05.12.1791","plz":null,"ort":null,"straße":null,"handy":null,"fax":null,"email":"","discriminator":"Komponist"}
]
I got a jsp file with following HTML markup:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/repertoireController.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
<div></div>
<div class="komponist-id"></div>
<div class="komponist-name"></div>
</body>
</html>
I want to add the "nachname" and the "id" from the JSON object to the divs with the classes: komponist-id and komponist-name
I tried the following which is from the springIo guides https://spring.io/guides/gs/consuming-rest-jquery/
$(document).ready(function() {
$.ajax({
url: "myurl"
}).then(function(data) {
$('.komponist-id').append(data.id);
$('.komponist-name').append(data.nachname);
});
});
Unfortunately it doesn't work. When i use alert(data.id) it shows that it is undefined what am I doing wrong?
The problem is that your JSON is an array. So you just need to get the first object of it like: data[0] and then get the id/nachname.
var data = [
{"id":34,"nachname":"Mozart","vorname":"Wolfgang Amadeus","namenspraedikat":"","instrumentId":0,"geburtsdatum":"27.01.1756","herkunftsland":"Salzburg","sterbedatum":"05.12.1791","plz":null,"ort":null,"straße":null,"handy":null,"fax":null,"email":"","discriminator":"Komponist"}
];
$(document).ready(function() {
$('.komponist-id').append(data[0].id);
$('.komponist-name').append(data[0].nachname);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/repertoireController.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Insert title here</title>
</head>
<body>
<div></div>
<div class="komponist-id"></div>
<div class="komponist-name"></div>
</body>
</html>
I am a beginner to javascript. I am currently learning it.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<meta http-equiv="author" content="#infinity">
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<script src="javascript.js"></script>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
</body>
</html>
Javascript:
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
Now I think that this should work, but its not working. The text of the <div id="cost"> remains same.
Please help.
Most likely you are trying to update the DOM even before it is loaded - you can make sure the javascript is executed after the DOM is loaded by keeping JS at the end of the body tag like below -
<!DOCTYPE html>
<html>
<head>
<title>Using Javascript</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1>Elderflower</h1>
<div id="content">
<h2>Custom Signage</h2>
<div id="cost">Cost: $5 per tile</div>
</div>
<script>
var number;
var costOne;
var totalCost;
number=5;
costOne=2;
totalCost=number*costOne;
var el=document.getElementById('cost');
el.textContent=totalCost;
</scirpt>
</body>
</html>
Start reading from here about Window load vs DOM load events