javascript

[Joachim Fröhlich]

Guten Tag, mit innerHTML schaffe ich es nach dem onclick Event einen bestehenden Text zu ändern, allerdings haben sich die Schrifteigenschaften verändert. Hat jemand eine Idee, wie die Schrift des alten Textes beibehalten werden kann? Herzlichen Dank im Voraus. Joachim

[Matthias Scharwies]

Servus!

Guten Tag, mit innerHTML schaffe ich es nach dem onclick Event einen bestehenden Text zu ändern, allerdings haben sich die Schrifteigenschaften verändert. Hat jemand eine Idee, wie die Schrift des alten Textes beibehalten werden kann?

Schau mal hier: JavaScript/DOM/Node/textContent

Es ist wsl. nicht genau das, was du suchst, aber die Scripte sind auf dem neuesten Stand. Onclick nimmt man eigentlich nicht mehr.

Wenn dein Element über CSS formatiert ist, müsste die Formatierung eigentlich erhalten bleiben, auch wenn du den Textknoten geändert hast.

Herzliche Grüße

Matthias Scharwies

[Joachim Fröhlich]

Vielen Dank, Mein Problem ein bisschen genauer: Nach einem Klick auf einen Button sollte aus einem Aufgabentext zum Dreisatz ein ergänzter Text mit gleicher Formatierung werden, und das kriege ich bis jetzt nicht hin. Versuche mich mit Deinen Vorschlag zu textcontent. Herzliche Grüße Joachim.

[Gunnar Bittersmann]

@@Joachim Fröhlich

Mein Problem ein bisschen genauer: Nach einem Klick auf einen Button sollte aus einem Aufgabentext zum Dreisatz ein ergänzter Text mit gleicher Formatierung werden

Ob es sich um einen Text zum Dreisatz handelt, ist hier irrelevant. Relevant ist: wie sieht das DOM (das HTML) vorher aus, wie soll es hinterher aussehen und was tut deine Eventhandlerfunktion?

Jolan tru

[Joachim Fröhlich]

Guten Morgen, hier bin ich nochmal, diesmal mit dem Code, der nicht klappt.

<button type="button" onclick="Aufgabe1()">Aufgabe 1</td>
<td width="700" style="background-image: none;">
<p id = "Aufgabe1" style="font-size: 10pt;text-align:left;font-weight:bold;">
<span style="font-family: MS,Sans-serif; ">
Für 60 Tage Aushilfsarbeit bekommt ein Schüler 546 €. Wie viel € bekommt er für 76 Tage?
</span></p>

<script>
function Aufgabe1() {
  document.getElementById("Aufgabe1").innerHTML = 
    `Für 6 Tage Aushilfsarbeit bekommt ein Schüler 546 €.
    Wie viel € bekommt er für 76 Tage?
    Ergebnis: <input type=text; maxlength=4; style=width:40> €>
    <BR>Tragen Sie das Ergebnis auf 2 Stellen nach dem Komma genau ein.`;
}
</script> 

Hat jemand eine Idee? Gruß Joachim

[Rolf B]

Hallo Joachim,

Ich würde deinen Code als solchen markieren, aber auf meinem Handy ist das quälend. Später...

Ich hätte eine Frage: wieso setzt du überhaupt den Aufgabentext per Button, wenn er doch eigentlich schon da steht?

Zu deiner Frage: es passiert das, was wir schon sagten. Du hast einen Formatierungs-Span im Aufgaben-p und den setzt du im Script nicht.

Sodann sieht das Ganze nach Tabellenlayout aus, das ruft nach einer Grundsanierung der Seite...

Rolf

[Gunnar Bittersmann]

@@Rolf B

Ich würde deinen Code als solchen markieren, aber auf meinem Handy ist das quälend. Später...

Zu spät. 😜

Ich hab allerdings den Code nur als solchen markiert. Die Formatierung (dass man nicht ewig horizontal scrollen muss) überlasse ich Joachim.

Jolan tru

[Rolf B]

Hallo Gunnar,

zu spät

Danke 😀

Die Formatierung überlasse ich Joachim.

Da Weil er das als unregistrierter Besucher nicht kann, habe ich das jetzt übernommen.^[1]

Jetzt, wo es lesbarer ist und ich mehr real screen estate habe, noch diese Anmerkungen an Joachim:

• Das Styling ist ein wildes Durcheinander aus Attributen und Styles. Viele Styles sind unnötig restriktiv. Zum Beispiel: Warum width="700" auf der Spalte mit dem Aufgabentext?
• Warum man der Zelle mit dem Aufgabentext ein background-image:none gibt, ist nicht ersichtlich. Gibt es ein Stylesheet, das das Bild setzt und hier überschrieben wird?
• Für die Aufgabentexte wäre es sinnvoller, dem p-Element oder der Aufgabenzelle eine Klasse zu geben und dieser Klasse im Stylesheet die nötigen Eigenschaften zuzuweisen
• Warum man das p-Element mit font-size, text-align und font-weight versieht und dann im span nochmal die font-family setzt, ist ebenfalls nicht ersichtlich. Wird dieses HTML von einem Codegenerator erzeugt, der ein wenig Amok läuft?

Ich würde empfehlen, die Font-Angaben am td-Element oder besser noch an der Table selbst zu machen (sofern da nicht ein Stylesheet querschießt, aber dann sollte das Stylesheet saniert werden). Als size keinesfalls 10pt. pt ist eine Angabe für Drucker und 10pt ist ohnehin viel zu klein. Die Browser-Standardangaben sollten viel besser geeignet sein.

Rolf

---

1. Da Da Da - 😢 ↩︎

[Gunnar Bittersmann]

@@Rolf B

Die Formatierung überlasse ich Joachim.

Da Weil er das als unregistrierter Besucher nicht kann, habe ich das jetzt übernommen.

Ich habe deine Verschlimmbesserung mal geändert. Für einen(!) mehrzeiligen Text nimmt man besser Backticks, nicht Stringkonkatenation.

Jolan tru

[Joachim Fröhlich]

Guten Morgen Rolf, auf den Button soll geklickt werden, damit die Funktion Aufgabe1() aufgerufen und der Aufgabentext geändert wird. Das mit dem span ist ja mein Problem, das ich für den geänderten Text nicht hinkriege, egal was ich bisher versuchte. An so etwas wie eine Gesamtsanierung denke ich momentan nicht, dafür reichen meine Kenntnisse nicht aus. Joachim

[Tabellenkalk]

Hallo,

Ich hätte eine Frage: wieso setzt du überhaupt den Aufgabentext per Button, wenn er doch eigentlich schon da steht?

<scnr>
Um hinterhältige Änderungen des Stundenlohns (Faktor 10) unterzubringen?!
</scnr>

Gruß
Kalk

[Felix Riesterer]

Lieber Joachim,

wie ich schon vermutet hatte, ersetzt Du HTML-Code durch simplen Text. Deswegen ist Deine „Formatierung“ nicht mehr gegeben. Allerdings liegt das scheinbare Problem in Wirklichkeit ganz woanders: Was Du Formatierung nennst, nennen andere ein No-go, was man in Rolfs Hinweis bestätigt sieht, der für Deine Seite eine Grundsanierung vorschlägt.

Frage: Willst Du Deine Seite verbessern, oder stur weiter dem von Dir eingeschlagenen Weg folgen?

Liebe Grüße

Felix Riesterer

[Joachim Fröhlich]

Lieber Felix, natürlich will ich die Seite verbessern, deswegen bitte ich Euch alle ja um Hilfe. Meine Vorgehensweise ist die eines Anfängers, der versucht, den Code bestehender Seiten für seine Zwecke zu nutzen. Mit der Bitte um Nachsicht, herzliche Grüße Joachim

[Felix Riesterer]

Lieber Joachim,

natürlich will ich die Seite verbessern, deswegen bitte ich Euch alle ja um Hilfe.

also gut. Du sollst Hilfe erhalten. Sie mag vielleicht zunächst nicht so aussehen, wie Du sie erwarten würdest, aber sie wird in der Tat Hilfe sein.

Verlinke Deine Seite! Dann kann man Dir konkrete Ratschläge und Hilfe geben.

Meine Vorgehensweise ist die eines Anfängers, der versucht, den Code bestehender Seiten für seine Zwecke zu nutzen.

So haben sicherlich die allermeisten hier angefangen. Das muss aber nicht heißen, dass das unbedingt der beste (und schon gar nicht der effektivste) Weg ist.

Mit der Bitte um Nachsicht,

Wofür Nachsicht? Du willst Hilfe. Das ist wie beim Arzt. Entweder Du willst wirklich Hilfe, oder Du kommst nur deswegen, um gelobt zu werden.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Joachim Fröhlich

Guten Morgen, hier bin ich nochmal, diesmal mit dem Code, der nicht klappt.

<button type="button" onclick="Aufgabe1()">Aufgabe 1</td>
<td width="700" style="background-image: none;">
<p id = "Aufgabe1" style="font-size: 10pt;text-align:left;font-weight:bold;"><span style="font-family: MS,Sans-serif; ">Für 60 Tage Aushilfsarbeit bekommt ein Schüler 546 €. Wie viel € bekommt er für 76 Tage?</span></p>

<script>
function Aufgabe1() {document.getElementById("Aufgabe1").innerHTML="Für 6 Tage Aushilfsarbeit bekommt ein Schüler 546 €. Wie viel € bekommt er für 76 Tage?   Ergebnis: <input type=text; maxlength=4; style=width:40>                €><BR>Tragen Sie das Ergebnis auf 2 Stellen nach dem Komma genau ein.";
                      } </script> 

Was @Rolf B dir sagen wollte:

innerHTML ersetzt den gesamten Elementinhalt. Das heißt: aus

<p id = "Aufgabe1" style="font-size: 10pt;text-align:left;font-weight:bold;">
  <span style="font-family: MS,Sans-serif; ">
    Für 60 Tage Aushilfsarbeit bekommt ein Schüler 546 €. Wie viel € bekommt er für 76 Tage?
  </span>
</p>

wird:

<p id = "Aufgabe1" style="font-size: 10pt;text-align:left;font-weight:bold;">
  Für 6 Tage Aushilfsarbeit bekommt ein Schüler 546 €. Wie viel € bekommt er für 76 Tage?   Ergebnis:
  <input type=text; maxlength=4; style=width:40>
  €>
  <BR>
  Tragen Sie das Ergebnis auf 2 Stellen nach dem Komma genau ein.
</p>

Das <span style="font-family: MS,Sans-serif; "> (die Angabe der Schriftart) geht dir verloren.

Was du tun kannst:

• Nicht den Inhalt des p-Elementes ersetzen, sondern den des span-Elements.

• Die Schrift gleich mit im style-Attribut des p-Elements angeben und auf das span verzichten.

  Noch besser wäre natürlich, die Styleangaben gar nicht im style-Attribut zu machen, sondern im Stylesheet (style-Element oder externe CSS-Datei).

Jolan tru

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Was du tun kannst:

Gar nicht erst mit innerHTML rumhantieren. Du willst den bestehenden Text ja nicht ändern, sondern ergänzen. Dazu setzt du das, was anfangs nicht zu sehen sein soll, in ein Element mit hidden-Attribut:

<p id="Aufgabe1" style="font-size: 10pt;text-align:left;font-weight:bold;">
  Für 6 Tage Aushilfsarbeit bekommt ein Schüler 546 €. Wie viel € bekommt er für 76 Tage?
  <span id="Aufgabe1-Ergänzung" hidden>
    Ergebnis:
    <input type=text; maxlength=4; style=width:40>
    €>
    <BR>
    Tragen Sie das Ergebnis auf 2 Stellen nach dem Komma genau ein.
  </span>
</p>

Um die Ergänzung anzuzeigen, musst du deim Click des Buttons einfach nur das ausführen:

document.getElementById("Aufgabe1-Ergänzung").hidden = false;

Ich frag mich aber, was das soll. Warum soll das Eingabefeld nicht gleich angezeigt werden, ohne dass dazu erst ein Button geclickt werden muss?

Jolan tru

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Dazu setzt du das, was anfangs nicht zu sehen sein soll, in ein Element mit hidden-Attribut

Ja, aber nicht in irgendeins. Dazu gleich.

Vorher noch:

<p id="Aufgabe1" style="font-size: 10pt;text-align:left;font-weight:bold;">

pt ist keine gute Einheit für die Bildschirmausgabe. Ich musste erstmal nachsehen, wieviel das ist: ⅟₇₂ Zoll. Mit 1in = 96px ergibt sich also 1pt = 1.33px.

Schriftgröße von 13.3px ist ziemlich mickrig, das solltest du Lesern nicht zumuten. Mach lieber keine Angabe zur Schriftgröße, dann gilt die Grundeinstellung des Browsers.

---

  Für 6 Tage Aushilfsarbeit bekommt ein Schüler 546 €. Wie viel € bekommt er für 76 Tage?

Zwischen Zahl und Einheit sollte kein Zeilenumbruch stattfinden. Deshalb non-breaking-space (geschütztes Leerzeichen) dazwischen:

  Für 6 Tage Aushilfsarbeit bekommt ein Schüler 546 €. Wie viel € bekommt er für 76 Tage?

---

    <input type=text; maxlength=4; style=width:40>

width: 40 ist kein gültiges CSS; die Angabe sollte gar nicht wirken. Wenn sie doch wirkt, hast du die Seite im Quirks-Modus.^[1] Das solltest du tunlichst vermeiden und mit <!DOCTYPE html> den Standard-Modus aktivieren.

Und dann width: 40px schreiben – wobei aber Längenangaben in px meist nicht gut sind. Besser: relativ zur Schriftgröße in em bzw. rem angeben.

---

  <span id="Aufgabe1-Ergänzung" hidden>
    Ergebnis:
    <input type=text; maxlength=4; style=width:40>
    €>
    <BR>
    Tragen Sie das Ergebnis auf 2 Stellen nach dem Komma genau ein.
  </span>

Nun zum oben erwähnten Fehler: Das Eingabefeld hat keine Beschriftung. Muss es aber haben: per label.

Ich würde hier nicht nur „Ergebnis:“ als Label-Text nehmen, sondern auch „€“ und den Hinweis „Tragen Sie das Ergebnis auf 2 Stellen nach dem Komma genau ein“ mit einbeziehen. Also alles, was sich in dem span befindet. Wir brauchen dann kein zusätzliches Element, sondern machen aus dem span ein label:

  <label id="Aufgabe1-Ergänzung" hidden>
    Ergebnis:
    <input type=text; maxlength=4; style=width:40px>
    €>
    <BR>
    Tragen Sie das Ergebnis auf 2&nbsp;Stellen nach dem Komma genau ein.
  </label>

Da sich das input innerhalb des label befindet, ist die Zuordnung der Beschriftung zum Eingabefeld gegeben.^[2]

---

Darin fällt noch auf:

    €>

Das > am Ende ist ein Unfall?

    <BR>

br sollte man nur für Zeilenumbrüche bspw. bei Gedichten oder Postadressen verwenden. Hier wäre der Hinweis in ein span zu packen und dieses auf display: block zu setzen.

Jolan tru

---

1. Fun fact: ich verwende Längenangaben ohne Einheit so gut wie täglich – in der CSSBattle. Ansonsten: nein, nicht tun. ↩︎

2. Außer für eine gewisse Microsoft-Vorlesesoftware. Deshalb wird angeraten, die Zuordnung auch in diesem Fall mit for- und id-Attributen anzugeben. ↩︎

[Joachim Fröhlich]

Lieber Gunnar, großartige Unterstützung. Werde allerdings einige Zeit brauchen, um alles gut zu verstehen. Danke für Deine Mühe. Joachim

[Matthias Scharwies]

Guten Morgen!

Mein Problem ein bisschen genauer:

Nach einem Klick auf einen Button sollte aus einem Aufgabentext zum Dreisatz ein ergänzter Text mit gleicher Formatierung werden,

• JavaScript/Tutorials/Spiele/Zahlenspiele

Dieses Tutorial zeigt, wie man in JavaScript Zahlenspiele programmiert. Grundlage ist eine Webseite mit einem Formular. Das Script liefert eine Aufgabe, verarbeitet eine Benutzereingabe und gibt eine Rückmeldung aus.

Für Dreisatz würde ich das so planen:

Für 60 Tage Aushilfsarbeit bekommt ein Schüler 546 €. Wie viel € bekommt er für 76 Tage?

60 Tage	546€
1Tag	??
76Tage	???

Evtl. sollte es schon für den Tagessatz eine Rückmeldung geben, ob die Rechnung richtig ist.

Die Aufgabe und die Zahlenwerte würde ich nicht fest verdrahten, sondern vom Script zufällig ausgeben lassen.

---

Ich würde so etwas gerne für Brüche programmieren:

Gemischte Brüche sollen addiert, subtrahiert oder multipliziert werden.

1. Script liefert 2 Brüche und einen Operanden:

$2 \frac{1}{2} + 1 \frac{3}{4} = ?$

2. Erweitern

$2 \frac{2}{4} + 1 \frac{3}{4} = ?$

3. Addieren und zusammenfassen

$3 \frac{5}{4} → 4 \frac{1}{4}$

Das Script können wir dann als Tutorial ins Wiki packen.

Hätte jemand Lust, so etwas zusammen mit mir zu entwerfen?

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Joachim Fröhlich

mit innerHTML schaffe ich es nach dem onclick Event einen bestehenden Text zu ändern, allerdings haben sich die Schrifteigenschaften verändert. Hat jemand eine Idee, wie die Schrift des alten Textes beibehalten werden kann?

Ohne zu wissen, was du da machst: nein.

Jolan tru

[Felix Riesterer]

Lieber Joachim,

meine Glaskugel sagt mir, dass Dein JavaScript folgendes ändert:

<p>Das hier ist <em>sehr wichtig</em> und deshalb <strong>unbedingt zu beachten</strong>.</p>

<p>Jetzt gibt's nix wichtiges mehr zu beachten.</p>

Weil der „Text“ mit HTML-Elementen ausgezeichnet war, der Ersatz mittels innerHTML aber keine solchen Auszeichnungen hatte, ist nun die „Formatierung“ ebenfalls verschwunden.

Um Dir helfen zu können, muss man das online anschauen können. Dafür verwendest Du am besten Tools für online-Beispiele.

Liebe Grüße

Felix Riesterer