Variable ausgeben / anzeigen

[mpwfg41]

Ich kann mir denken, das ist jetzt eine ABC-Schützen-Fragen:

Ich möchte eine Variable, die beim Seitenaufruf übergeben und ausgelesen wurde, einfach ausgeben; ohne Click oder sonst eine Aktivität. Eventuell mit einer Schriftauszeichnung (Fett, groß, Farbe, Hintergrund o.ä.) Das kann doch nicht so schwer sein, aber ich finde keinen Einstieg.

[woodfighter]

Tach,

Ich möchte eine Variable, die beim Seitenaufruf übergeben und ausgelesen wurde,

du meinst einen Teil der Query (das ist der Teil zwischen Fragezeichen und Nummernkreuz) in der URL?

einfach ausgeben; ohne Click oder sonst eine Aktivität.

Dazu registrierst du ein passendes Event, erzeugst und hängst ein passendes Element mit dem Inhalt (eventuell noch auf den gesuchten Inhalt reduziert mit einer der Stringfunktionen) ins DOM.

Eventuell mit einer Schriftauszeichnung (Fett, groß, Farbe, Hintergrund o.ä.)

Du kannst deinem neuen Element eine Klasse hinzufügen, oder es sonstwie per CSS selektieren und gestalten.

mfg
Woodfighter

[Gunnar Bittersmann]

@@mpwfg41

Ich möchte eine Variable, die beim Seitenaufruf übergeben und ausgelesen wurde, einfach ausgeben; ohne Click oder sonst eine Aktivität.

console.log(a) schreibt den Wert der Variablen a in die Konsole des browsereigenen Entwicklertools.

Eventuell mit einer Schriftauszeichnung (Fett, groß, Farbe, Hintergrund o.ä.)

Ah, der Wert soll auf einer Webseite erscheinen? Dann bietet es sich an, ein HTML-Element dafür vorzusehen. Welches, richtet sich nach dem Inhalt. Das kann output sein oder p oder … einfach span.

Eine ID erleichtert das Herausfinden dieses Elements aus dem DOM mit JavaScript. Wenn das Elementobjekt hast, kannst du es z.B. mit innerHTML mit dem Wert der Variablen a befüllen:

HTML: <output id="a"></output>

JS: document.querySelector('#a').innerHTML = a; oder document.getElementById('a').innerHTML = a;

Styling ist Sache von CSS: #a { font-weight: bold }

LLAP 🖖

[mpwfg41]

@@gunnar Bittersmann,

danke für die schnelle Antwort. Ich möchte ja noch lernen, aber das ist mir zu hoch, da ich auch unter den genannten Begriffen im Wiki keine entsprechende Beschreibung finde. Ich habe folgenden Code:

<div style="position: absolute;left: 300px;top: 200px">
     <table width="160px"border="2"cellpadding="0"cellspacing="2">
          <tr><td>
          <h5>Gewählter Ort:</h5>
          
          An dieser Stelle soll jetzt der Inhalt der Variablen (Ort) stehen _
          
          </td></tr>
     </table>
</div>

Kann mir jemand konkret sagen, was hier einzugeben ist. Dann kann ich auch evtl. im Wiki nachvollziehen, wie der Ablauf gebildet wird. Danke

[Auge]

Hallo

<div style="position: absolute;left: 300px;top: 200px">
     <table width="160px"border="2"cellpadding="0"cellspacing="2">
          <tr><td>
          <h5>Gewählter Ort:</h5>
          
          An dieser Stelle soll jetzt der Inhalt der Variablen (Ort) stehen _
          
          </td></tr>
     </table>
</div>

So wird das nicht funktionieren. Du brauchst explizit ein Element, in das du deinen Wert eintragen kannst.

         <td>
          <h5>Gewählter Ort:</h5>
          <output id="ortsangabe">An dieser Stelle soll jetzt der Inhalt der Variablen (Ort) stehen _</output>
         </td>

Falls, wie es den Anschein erweckt, die Tabelle ausschließlich diesen Inhalt haben sollte, ist sie falsch am Platze. Das Folgende erfüllt den selben Zweck und ist zudem kürzer als aus semantisch sinnvoller.

<section><!-- eventuell auch <aside> statt <section> -->
 <h5>Gewählter Ort:</h5>
 <output id="ortsangabe">An dieser Stelle soll jetzt der Inhalt der Variablen (Ort) stehen _</output>
</section>

Für den JavaScript-teil verweise ich auf woodfighters Posting. Er hat genügend Lesestoff verlinkt. An dieser Stelle sind seine ersten beiden (Event) und die letzten beiden Links (URL-Parameter auslesen) relevant, da das den Text aufnehmende Element schon da ist und somit nicht erzeugt werden muss.

Den ermittelten Inhalt steckst du zu guter Letzt in das output-Element hinein.

var wasAuchImmer = ...; // wird mit dem Wert des URL-Parameters befüllt
document.getElementById("ortsangabe").innerHTML = wasAuchImmer;

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Das Folgende erfüllt den selben Zweck und ist zudem kürzer als aus semantisch sinnvoller.

<section><!-- eventuell auch <aside> statt <section> -->
 <h5>Gewählter Ort:</h5>
 <output id="ortsangabe">An dieser Stelle soll jetzt der Inhalt der Variablen (Ort) stehen _</output>
</section>

Semantisch sinnvoll ist h5 aber auch nicht. Ich glaube nicht, dass es sich hier um eine Überschrift der 5. Hierarchie-Ebene handelt.

h1, h2, h3 sind (ohne Lücke) entsprechend der Hierarchie zu verwenden, nicht anhand der Default-Schriftgröße im Browser.

Aber „Gewählter Ort:“ ist nicht wirklich eine Überschrift. Eher eine Beschriftung: label (ja, das gibt’s auch für output).

<div>
  <label for="ortsangabe">Gewählter Ort:</label>
  <output id="ortsangabe">An dieser Stelle soll jetzt der Inhalt der Variablen (Ort) stehen _</output>
</div>

(Und wenn der Bereich keine Überschrift hat, ist es auch keine section.)

LLAP 🖖

[Orlok]

Hallo Gunnar

[…] Dann bietet es sich an, ein HTML-Element dafür vorzusehen. Welches, richtet sich nach dem Inhalt. Das kann output sein oder p oder … einfach span.

Eine ID erleichtert das Herausfinden dieses Elements aus dem DOM mit JavaScript. Wenn das Elementobjekt hast, kannst du es z.B. mit innerHTML mit dem Wert der Variablen a befüllen […]

Auch wenn es in aller Regel nicht ins Gewicht fällt, würde ich mir in solchen Fällen dennoch immer überlegen, ob man den HTML-Parser wirklich belästigen muss, oder ob innerHTML für die Aufgabe nicht vielleicht etwas überdimensioniert ist.

Unter der Voraussetzung, dass hier kein Code zu parsen ist, könnte man das auch so machen:

paragraph.textContent = a;

oder

output.value = a;

Gruß,

Orlok