[ERLEDIGT] document.write mit CSS

[nordi]

Weiss nicht, ob das mehr in CSS, javascript oder HTML gehört...

Ich möchte per document.write einen berechneten Wert hinausschreiben, welcher durch eine CSS-Classe formatiert werden soll. Ich habe 2 Varianten versucht, bei beiden zieht die Klasse nicht, weder Hintergrund noch der Text rechtsbündig zieht und auch unter Firefox Webentwickler wird die Klasse nicht angezeigt. Die Werte selber werden richtig geschrieben. (Ich schreibe unmittelbar vorher unter SPAN mit Klasse Infos ohne document.write heraus, welche ordnungsgemäß angezeigt werden.)

Variante 1 (span im HTML):
<span class='t-diff'><script type='text/JavaScript'>writedayDiff('010517','020617')</script></span>

In der Funktion werden Tage berechnet und ausgegeben per document.write:
document.write(day + "*");

als Class definiert:
span.t-diff    { width: 45px; min-width: 55px; float:left; background-color:#FFFBCB; text-align: right; }

Variante 2 (span im document.write):
<script type='text/JavaScript'>writedayDiff('010517','020617');</script>

In der Funktion werden Tage berechnet und ausgegeben per document.write:
document.write("<span class='t-diff'>" + day + "*</span>");

Klasse wie Variante 1

Geht document.write mit einer CSS-Klasse nicht?

 

[SpiceLab]

Geht document.write mit einer CSS-Klasse nicht?

Doch, grundsätzlich schon: https://www.w3schools.com/code/tryit.asp?filename=FDQ69EGU7P8Q

Aber:

Beachten Sie: Der Aufruf von document.write ist ausschließlich sinnvoll, wenn er synchron zum Laden eines Dokuments erfolgt. In allen anderen Fällen führt er entweder zu Fehlern oder dazu, dass das geladene Dokument durch die Ausgabe von write überschrieben wird.

Und:

Empfehlung:
Eine direkte Ausgabe von JavaScript-Werten mit document.write ist heute eher unüblich, da es den Weg zur Injektion von unerwünschtem und evtl. schädlichen Code öffnet.

Hauptartikel: JavaScript/Anwendung und Praxis/Sicherheitskonzepte

Verwenden Sie getElementById um ein HTML-Element anzusprechen und es dann mit innerHTML zu füllen. Eine noch sichere Alternative ist das Erzeugen eines Textknotens mit createTextNode, in den Sie dann mit appendChild Text, aber keinen HTML-Code anhängen können.

Zitatquelle: https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/write

Bei https://jsfiddle.net , wo ich üblicherweise Demos bereitstelle, ist document.write() disallowed.

 

[nordi]

Hi!
ad 1) Der Aufruf erfolgt synchron zum Laden des Dokumentes. Dies zeigt ja schon, dass ursprünglich das Script von <span> umgeben war (bei Variante 1) und der Hinweis, dass die vorangegangenen <span> auch ordnungsgemäß durchgeführt werden.

ad 2) Das ist ein Bericht, bei dem nicht wirklich was passieren kann.

ad 3) Ist eine ganz normale Homepage, keine Vorgaben.

Warum funktioniert dies also nicht?

 

[SpiceLab]

ad 1) Der Aufruf erfolgt synchron zum Laden des Dokumentes. Dies zeigt ja schon, dass ursprünglich das Script von <span> umgeben war (bei Variante 1) und der Hinweis, dass die vorangegangenen <span> auch ordnungsgemäß durchgeführt werden.

...

Warum funktioniert dies also nicht?

Ganz so synchron, wie in meinem funktionstüchtigen Demo, läuft es nicht ab, da ja irgendwo zuvor die Funktion writedayDiff(..., ...) definiert ist, und als erstes verarbeitet werden muß, bevor document.write() am Zug ist, die empfangenen Daten auszugeben, und zu diesem Zeitpunkt ist es schon zu spät für die "nachträgliche" CSS-Formatierung.

Von daher würde ich persönlich innerHTML präferieren. Das zugehörige Element (gerne auch ohne Inhalt) existiert im HTML-Code, und kann folglich beim Ladevorgang wunschgemäß mit CSS (vor)formatiert werden.

<script type='text/JavaScript'>

https://wiki.selfhtml.org/wiki/Referenz:HTML/Attribute/type_(script)

 

[nordi]

Danke für den Hinweis mit innerHTML. Allerdings zieht auch hier die Klasse nicht. Erst wenn ich via innerText das Ergebnis reinstelle, kommt die Klasse! Allerdings ist es dann nicht mehr möglich, eine geschützte Leerstelle hineinzustellen, aber das habe ich anders gelöst.

 

[SpiceLab]

Danke für den Hinweis mit innerHTML. Allerdings zieht auch hier die Klasse nicht. Erst wenn ich via innerText das Ergebnis reinstelle, kommt die Klasse!

Schwer vorstellbar, dass dem so sein soll, denn diese beiden Variationen funktionieren erwartungsgemäß störungsfrei:

1. https://jsfiddle.net/SpiceLab/tw350a6k/
2. https://jsfiddle.net/SpiceLab/vnpm6tLm/

Erläuterung:

1. innerHTML wird auf <span id="test"></span> angewendet, und ladet darin var content = "<b>foo<\/b>bar"
2. innerHTML wird auf <div id="test"></div> angewendet, und ladet darin var content = "<span class='test'><b>foo<\/b>bar<\/span>"

Von daher wird sich vermutlich in Deinem erfolglosen Versuch mit innerHTML ein Fehler eingeschlichen haben.

 

[Tronjer]

Ist so oder so kein vernünftiger Lösungsansatz. Das Erzeugen von DOM-Nodes übernehmen heutzutage Frameworks.

Das hier wäre eine Lösung.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <title>Document</title>
</head>
<body ng-app="myApp">
  <div class="container" ng-controller="AppController as vm">
    <h4>Aktuelles Datum: {{vm.today | date: 'dd. MM. y'}} </h4>
    <form class="form-inline" ng-submit="vm.calcDate()">
      <div class="form-group">
        <input type="number" class="form-control" placeholder="Tage" ng-model="vm.days">
      </div>
      <button type="submit" class="btn btn-primary">Berechnen</button>
    </form>
    <p class="text-primary" ng-if="vm.newDate">Neues Datum: {{vm.newDate | date: 'dd. MM. y'}}</p>
  </div>
  <script>
  angular.module('myApp', [])
    .controller('AppController', function AppController() {
      var vm = this;
      this.days;
      this.today = new Date();
      this.calcDate =function() {
        this.newDate = new Date().setDate(this.today.getDate() + this.days);
      }
    });
  </script>
</body>
</html>

 

[SpiceLab]

Das Erzeugen von DOM-Nodes übernehmen heutzutage Frameworks.

Klar. Ist (bei Dir) im professionellen, gewerblichen Bereich das Tagesgeschäft, in den Projekten alles mit Hilfe des vorgehaltenen Frameworks zu erledigen (Stichwort: Wirtschaftlichkeit).

Ich entwerfe/plane heutzutage den Neubau eines Ein-/Mehrfamilienhauses auch nicht mehr per Hand am Reißbrett in unterschiedlichen Maßstäben für die Vorentwurfs-, Baueingabe-, Werk-/Detailplanung, und beginne dabei jedesmal wieder von vorne, sondern nutze hierfür CAD. Das Haus wird einmal im System angelegt/konstruiert, und dient als Basis für alle nachkommenden Planungsphasen.

ABER: Nicht jeder setzt auf ein mächtiges Framework, um eine einzige Lösung daraus ziehen zu können, die genau so gut das konventionelle (native) JS mit weniger Code erledigt.

In meinem Fall beispielsweise würde das die Aufstockung eines bestehenden Hauses mit zwei Gauben betreffen, um im Dachgeschoß mehr Wohnraum zu schaffen. Bis der Bestand ins CAD gehackt wurde, um sich dann in der Dachstuhlkonstruktion austoben zu können, habe ich dies mittlerweile längst per Hand erledigt.

Die Eingangsfrage drehte sich auch nicht darum, ob hier ein Framework zum Einsatz kommen soll/muss, sondern, ob sich document.write() mit CSS kombinieren lässt.

 

[Tronjer]

Die eigentliche Frage drehte sich darum, wie man ein Datum per JS berechnet und anschließend innerhalb der Seite rendert. Die konzeptionelle Antwort darauf lautet: mittels Data-Binding und Templating. Dafür habe ich ein Beispiel geliefert.

 

[Tronjer]

In meinem Fall beispielsweise würde das die Aufstockung eines bestehenden Hauses mit zwei Gauben betreffen, um im Dachgeschoß mehr Wohnraum zu schaffen. Bis der Bestand ins CAD gehackt wurde, um sich dann in der Dachstuhlkonstruktion austoben zu können, habe ich dies mittlerweile längst per Hand erledigt.

Ich würde wahrscheinlich eine Superclass Building erstellen, deren Properties vererbt und ggf. ergänzt werden

Was natürlich Quatsch ist, weil ich weder etwas von Hauskonstruktion noch von CAD verstehe, aber es geht mir um objektorientierten Ansatz und Nachhaltigkeit. Wenn ich ein HTML-Formular schreibe, ist das kein autonomes Markup, sondern Bestandteil einer Komponente, bzw. Klasse, die instanziiert wird, und wer mir in einem Job-Interview auf die Eingangsfrage mit innerHTML antwortet, hat direkt verloren.

 

[SpiceLab]

Die eigentliche Frage drehte sich darum, wie man ein Datum per JS berechnet und anschließend innerhalb der Seite rendert. Die konzeptionelle Antwort darauf lautet: mittels Data-Binding und Templating. Dafür habe ich ein Beispiel geliefert.

Keine Lust, mit Dir jetzt zu diskutieren, was hier eigentlich der wahre Kern der Frage war, und wie Du sie auslegst, um mit Deinem Beispiel zu trollen.

 

[SpiceLab]

und wer mir in einem Job-Interview auf die Eingangsfrage mit innerHTML antwortet, hat direkt verloren.

Kann ich prima mit leben

 

[Tronjer]

Kann ich prima mit leben

Kannst du mir denn auch erklären, was mein Beispiel-Code mit trollen zu tun hat?

 

[SpiceLab]

Kannst du mir denn auch erklären, was mein Beispiel-Code mit trollen zu tun hat?

Der Code selber nichts...

 

[nordi]

Ist ja schon immer erstaunlich, wie weit Antworten weit über das Ziel hinausschiessen. Etwas, was gar nicht gefragt war.