4
Html 2 scripte harmonieren nicht
Hi!
Ich habe zwei scripte die ich gerne zusammen auf einer html seite nutzen möchte:
Einzeln funktionieren beide, nur wenn ich sie zusammen füge, geht mal das eine, mal das andere, mal gar nichts. Es ist bestimmt eine Kleinigkeit, nur finde ich keine Lösung.
Wo im Script 1 aktuell statisch <h1>111</h1> steht, soll eigentlich der generierte Wert <h1 id="content"></h1> aus Script 2 erzeugt werden.
Und die eigentlichen Funktionen aus Script 1 sollen natürlich auch funktionieren.
Danke für eure Hilfe
Script 1:
<!doctype html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">
<script type="text/javascript">
function addDays(days){
var d = new Date();
d.setDate(d.getDate()+days);
return d;
}
function setDates(){
document.getElementById('date').innerHTML = addDays(-1).toLocaleDateString();
document.getElementById('date2').innerHTML = addDays(-2).toLocaleDateString();
document.getElementById('date5').innerHTML = addDays(-5).toLocaleDateString();
}
</script>
<body onload="setDates()">
<head>
<header class="w3-container w3-theme w3-padding" id="myHeader">
<div class="w3-center">
<h1>111</h1>
</div>
</header>
</head>
<div class="w3-container w3-theme-d1">
<p id="date"></p>
<p>text1</p>
<p>text1.1</p>
</div>
<div class="w3-container w3-theme-d2">
<p id="date2"></p>
<p>text2</p>
<p>text2.1</p>
</div>
<div class="w3-container w3-theme-d3">
<p id="date5"></p>
<p>text3</p>
<p>text3.1</p>
</div>
</body>
</html>
Script 2:
<!doctype html>
<html>
<meta charset="utf-8">
<script type="text/javascript">
function setValue(){
Startwert
var startwert = 100;
increment pro Tag
var increment = 20;
Startdatum festlegen
var dStart = new Date("2019/01/01");
heutiges Datum holen
var today = new Date();
Differenz in Tagen zwischen Heute und dem spezifischen Datum berechnen
var diff = Math.round((today - dStart) / (60*60*24*1000));
Summe aus Startwert + (Tagen * increment) ausgeben
document.getElementById('content').innerHTML = startwert + (diff * increment);
}
</script>
<body onload="setValue()">
<h1 id="content"></h1>
</body>
</html>
Ich habe zwei scripte die ich gerne zusammen auf einer html seite nutzen möchte:
Einzeln funktionieren beide, nur wenn ich sie zusammen füge, geht mal das eine, mal das andere, mal gar nichts. Es ist bestimmt eine Kleinigkeit, nur finde ich keine Lösung.
Wo im Script 1 aktuell statisch <h1>111</h1> steht, soll eigentlich der generierte Wert <h1 id="content"></h1> aus Script 2 erzeugt werden.
Und die eigentlichen Funktionen aus Script 1 sollen natürlich auch funktionieren.
Danke für eure Hilfe
Script 1:
<!doctype html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">
<script type="text/javascript">
function addDays(days){
var d = new Date();
d.setDate(d.getDate()+days);
return d;
}
function setDates(){
document.getElementById('date').innerHTML = addDays(-1).toLocaleDateString();
document.getElementById('date2').innerHTML = addDays(-2).toLocaleDateString();
document.getElementById('date5').innerHTML = addDays(-5).toLocaleDateString();
}
</script>
<body onload="setDates()">
<head>
<header class="w3-container w3-theme w3-padding" id="myHeader">
<div class="w3-center">
<h1>111</h1>
</div>
</header>
</head>
<div class="w3-container w3-theme-d1">
<p id="date"></p>
<p>text1</p>
<p>text1.1</p>
</div>
<div class="w3-container w3-theme-d2">
<p id="date2"></p>
<p>text2</p>
<p>text2.1</p>
</div>
<div class="w3-container w3-theme-d3">
<p id="date5"></p>
<p>text3</p>
<p>text3.1</p>
</div>
</body>
</html>
Script 2:
<!doctype html>
<html>
<meta charset="utf-8">
<script type="text/javascript">
function setValue(){
Startwert
var startwert = 100;
increment pro Tag
var increment = 20;
Startdatum festlegen
var dStart = new Date("2019/01/01");
heutiges Datum holen
var today = new Date();
Differenz in Tagen zwischen Heute und dem spezifischen Datum berechnen
var diff = Math.round((today - dStart) / (60*60*24*1000));
Summe aus Startwert + (Tagen * increment) ausgeben
document.getElementById('content').innerHTML = startwert + (diff * increment);
}
</script>
<body onload="setValue()">
<h1 id="content"></h1>
</body>
</html>
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 399513
Url: https://administrator.de/contentid/399513
Printed on: April 23, 2024 at 21:04 o'clock
4 Comments
Latest comment
Nabend,
setze das Ganze mal in Codeblocks - einen Block pro Datei !
~arano
setze das Ganze mal in Codeblocks - einen Block pro Datei !
~arano
HTML und JavaScript wird von oben nach unten geparst, d.h. in dem Moment, wo das Skript abläuft und den errechneten Wert in das <h1 id="content"> einfügen soll, ist dieses dem Browser noch gar nicht bekannt. Die einfache Lösung ist, die Skripte unter das <h1> zu setzen, eleganter ist es, den onLoad-Event zu verwenden, wie in https://www.w3schools.com/jsref/event_onload.asp beschrieben.
Gruß Demig0d
Gruß Demig0d
Hallo Demigod,
lass mich dir zwei Stellen seines Quelltextes aufzeigen ;)
Seine Scripte sind immerhin zwei Funktionsdefinitionen, platziert er diese unter dem H1-Tag passiert genau gar nix !
Er müsste schon den Funktionsaufruf unter dem H1-Tag platzieren. (irgendwo unter / z.B. ganz unten)
Da er es aber bereits im 'onload' des Body-Tags stehen hat, ist das absolut in Ordnung.
Die eigentliche frage ist ja aktuell eher:
Wie sieht sein: " [..] wenn ich sie zusammen füge, [..]" aus ?
~Arano
lass mich dir zwei Stellen seines Quelltextes aufzeigen ;)
<body onload="setDates()"> <body onload="setValue()"> Die einfache Lösung ist, die Skripte unter das <h1> zu setzen,
So pauschal auf seine Scripte - ist das FALSCH !Seine Scripte sind immerhin zwei Funktionsdefinitionen, platziert er diese unter dem H1-Tag passiert genau gar nix !
Er müsste schon den Funktionsaufruf unter dem H1-Tag platzieren. (irgendwo unter / z.B. ganz unten)
Da er es aber bereits im 'onload' des Body-Tags stehen hat, ist das absolut in Ordnung.
Die eigentliche frage ist ja aktuell eher:
Wie sieht sein: " [..] wenn ich sie zusammen füge, [..]" aus ?
~Arano
Wir wissen ja nicht, wie er die Skripte verbunden hatte:
oder
oder
oder noch anders. So bleibt alles Kaffeesatzleserei.
Gruß Denig0d
<body onload="setDates()">
<body onload="setValue()"> oder
<body onload="setDates();setValue()"> oder
<body onload="setDates()" onload="setValue()"> oder noch anders. So bleibt alles Kaffeesatzleserei.
Gruß Denig0d
