JS console.log in HTML ausgeben?

Hallöchen!

Wir arbeiten gerade an einer simplen Webseite in der Schule. Dabei müssen wir sowohl HTML als auch Javascript verwenden. Nun habe ich am Ende der JS Funktion jedoch einen console.log command, welcher mir ein bestimmtes Element eines Array ausgibt. Dies ist dann auch das Endprodukt der Funktion. Wie kann ich diesen console.log command nun auf meiner Webseite ausgeben? Bzw. wie kann ich dieses Element auf meiner Webseite aus geben.

Der command:

console.log(Liste[XinOriginal)

Das Element:

"e ist der häufigste Buchstabe: " + e + " mal"

Danke für eure Hilfe!

3 Antworten

DummeStudentin

18.01.2023, 19:53

Du willst also den Text eines HTML Elements in JS ändern. Hier ein passendes Beispiel: https://www.w3schools.com/js/tryit.asp?filename=tryjs_change_innerhtml

BeamerBen

18.01.2023, 20:07

Negativ an dem Beispiel ist die Verwendung von innerHTML, wenn es um Text, nicht HTML Content, geht sollte textContent (oder bei Bedarf innerText) verwendet werden.

Das bietet bessere Performance und kann mögliche XSS Attacken verhindern.

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmiersprache, Programmieren & Softwareentwicklung

18.01.2023, 19:52

Folgende drei Funktionen sollten dir dabei massgeblich helfen können:

Element.appendChild()

Document.createNode()

Document.createTextNode()

BeamerBen

18.01.2023, 19:59

Js:

// Setup von Placeholder Variablen, da ich ja deinen Code nicht habe
let liste = ["hallo ich bin ein Eintrag in einem Array"],
    xinOriginal = 0
// Element Text ändern
document.querySelector("#output").textContent = liste[xinOriginal]

Html:

<div id="output"></div>

In dem Beispiel hast du ein vorhandenes HTML Dokument und änderst davon den Text ab auf das was du anzeigen möchtest. Das wäre die einfachste Möglichkeit für einen Anfänger.

Eventuell musst du natürlich vorher den Inhalt sinnvoll zu Text konvertieren.

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zur Frage

Zugriff auf svg Element in HTML gibt immer "null" zurück?

Hallo zusammen,

folgendes Problem:

Ich möchte aus meinem javascript Code zu laufzeit auf meine sonarGrafik.svg zugreifen können um deren Elemente zu manipulieren (oder neue hinzufügen zu können).

So sieht erstmal der ganze HTML Code aus:

<!DOCTYPE html>
<html>
<head>
    <title>Arduino Daten</title>
    <link rel="icon" href="data:,">
    <script src="scripts/script.js"></script>
    <link rel="stylesheet" href="styles/style.css"> 
</head>
<body>
    <object id = "svgObject" data="styles/sonarGrafik.svg" type="image/svg+xml"></object>
</body>
</html>

Der betroffene Teil in meinem javascript Code:

function insertDots(cx, cy) {
    const svgObject = document.getElementById("svgObject");
    console.log(svgObject.contentDocument) // hier erhalte ich in der Console immer "null"


    svgObject.addEventListener("load", function() {
        if (svgObject && svgObject.contentDocument) {
            const sonarSVG = svgObject.contentDocument.getElementById("sonar");
            console.log(sonarSVG);
        }
    });
}

(Die funktion insertDots(cx, cy) wird alle paar sekunden aufgerufen und ich erhalte in der Browser Konsole immer nur null. Dementsprechend ist die if Bedienung darunter auch nie wahr)

In meiner .svg Datei gibt es definitv die id= "sonar":

<svg id="sonar" width="700" height="700" xmlns="http://www.w3.org/2000/svg">
  <rect x="0" y="0" width="100%" height="100%" fill="rgba(128, 128,   128, 0.25)" />
</svg>

So sieht meine Ordnerstruktur aus:

Website
│   SonarVisuallisierung.html
│
├── scripts
│       script.js
│
└── styles
        style.css
        sonarGrafik.svg

Gibt es irgendwo einen Fehler oder eine andere Möglichkeit auf die Elemente der .svg Datei über das script zuzugreifen? (Den Inhalt der .svg will ich ausgelagert lassen und nicht in das HTML einfügen wegen der Übersichtlichkeit)

Danke für alle Lösungsvorschläge.

...zur Frage

JavaScript in HTML - Ausgabe?

Hallo wie kann ich in einem Textfeld von HTML eine variable von JavaScript ausgeben?

Würde gerne mehrere Sachen zusammenrechnen und anschließend das Ergebnis auf der HTML Webseite ausgeben...

Wie ist das möglich?

Danke schon mal

...zur Frage

JavaScript objekt komplett ausgeben?

Wenn ich console.log(data),eingeben würde wird mir das ganze objekt data ausklappbar angezeigt.

Dann steht da sowas wie pet:"dog" ... , Ich möchte es aber alles mit Document.write ausgeben lassen auf der Html seite.

Das dort nur Dog steht.

document.write(data.pet + data.age ....) abtippen würde keiner machen

...zur Frage

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zur Frage

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zur Frage

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zur Frage

Welche Programmiersprache(n) nach HTML, CSS, Javascript?

Ich weiß HTML, CSS sind keine aber welche Programmiersprachen sollte man nach Javascript lernen mein Bereich wäre momentan zum Start Webseiten (Webanwendungen) sowie Apps.

...zur Frage

Guter Anbieter für Domain und Web Hosting bei dem man mit HTML/CSS und JS selber seine Webseite erstellen kann?

Hallo kennt da jemand ein guter?
Es muss nur so einfach wie möglich sein aber ich will alles selber programmieren mit HTML CSS und JavaScript also sowas wie Wordpress oder ähnliches will ich gar nicht.

...zur Frage

In HTML/Javascript Taschenrechner-Element Löschen Taste einbauen?

Moin zusammen,

Ich muss für meine Ausbildung mithilfe von HTML und Javascript einen Taschenrechner samt Funktionen bauen. Ich bin soweit auch mit allem fertig nur weiß ich nicht wie ich einer Taste die Funktion onclick zuweisen kann, dass ein Element im Result Area gelöscht wird. Ich kann lediglich alle angehängten Elemente im result area löschen. Gibt es hierfür eine vordefinierte Funktion? Hoffe es ist einigermaßen verständlich formuliert. Z.B. steht im Ergebnisfeld: "4+48" und nun möchte man nur die "8" weglöschen und nicht alles. Vielen dank!

...zur Frage

HTMX gut für Anfänger?

Ist es okay, erstmal HTMX und CSS, statt HTML, CSS und JavaScript für die Entwicklung einer Webseite zu nutzen, um erstmal das Prinzip von HTML und CSS zu verstehen? Ich habe nämlich nicht die ,,Kapazität", um jetzt auch noch JavaScript zu lernen, da ich mich gerade auf Java konzentriere.

...zur Frage

User in Webseite einbauen?

Wie kann ich User und Profile auf meine Webseite aufbauen? Also mit geht es mit HTML oder nur mit Javascript

...zur Frage

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zur Frage

Wie kann ich diesen JavaScript code auslesen?

Hi, ich möchte aus neugier wissen, wie eine Website mithilfe eines JS einen coupon generiert, der lokal erzeugt wird.

Folgender code wird dafür gebraucht.

Alles was wof im JS ist, ist für "wheel of fortune" also ein Drehrad, das einen coupon ausgibt sobald man eine E-Mail Adresse eingibt.

pastebin.com/kaAhPezN

Danke im Vorraus!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen