Mit Javascript zu einem Teil im HTML Dokument springen?

Hallo !

Ich bin gerade dabei eines meiner ersten Projekte mit JavaScript/CSS/HTML umzusetzen.

Ich bin gerade dabei eine Suchfunktion einzubauen.

Ich habe eine Layout von Material Design Lite verwendet. Ich habe es so umgesetzt, dass das ganze im einem HTML Formular steht und beim absenden (drücken der ENTER Taste) eine JavaScript Funktion ausgeführt wird. Bei dieser hole ich mir mithilfe von document.getElementById().value den Wert der eingegeben wurde und sage, dass dieser Wert auf eine Variable übertragen wird. Ich frage per If und else ab was eingeben wurde (Bsp. 1) und will dann das zum einem bestimmten Teil im HTML Text gesprungen wird.

Mein Problem :

Ich muss es irgendwie umsetzen, dass mit JavaScript Code zu einem bestimmten Teil (im HTML Text ) gesprungen wird OHNE das man auf einen Link klicken muss.

Weiß jemand von euch hier, wie das möglich ist ?

(Danke für deine Zeit, beim Lesen und Danke für jede Antwort)

Hier der Code meiner JavaScript Funktion

Bild zum Beitrag

Hier der Code des HTML Formulars

Bild zum Beitrag

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

iNeedHelp961

08.06.2022, 12:23

https://developer.mozilla.org/de/docs/Web/API/Element/scrollIntoView

Ich hab es noch nie versucht, sollte allerdings funktionieren.

Du erstellst eine Variable mit deinem Ziel:

var target = document.getElementById("example-id");

Und dann scrollst du mit:

target.scrollIntoView({block: "end", behavior: "smooth"});

Wenn ich das jetzt richtig verstehe, macht das Block Attribute bis wohin du scrollst und behavior macht es Smoother (Mit Animation anstatt diese "Teleportation").

white47583

Beitragsersteller

08.06.2022, 14:31

Also für dich die Info ich habe meinen Fehler gefunden. Vielen Vielen Dank für deine Bemühungen und deine Zeit. Du hast mir echt sehr geholfen. Noch einen schönen Tag !

white47583

Beitragsersteller

08.06.2022, 14:23

Also ich habe es getestet und das 2. Funktioniert auf jeden Fall schon mal. Nur eine Frage bei der 1. Methode muss ich statt Element etwas anderes angeben ? Bzw. muss ich dort die Id, classe oder den Namen des HTML Elements angeben

white47583

Beitragsersteller

08.06.2022, 14:19

OK. Ich teste das kurz

white47583

Beitragsersteller

08.06.2022, 13:43

Also ich habe es getestet. Leider hat es nicht funktioniert. Target wird nicht definiert, obwohl ich die richtige Id verwendet habe.

Die Seite wird neu geladen, in der Console wird uncaught ausgegeben. Ich habe über die Console versucht target auszugeben, aber dieses wurde nicht definiert. Wahrscheinlich, weil die Seite neu geladen wurde.

Ich erkundige mich nochmal im Internet. Falls einer von euch eine Lösung hätte, würde ich mich sehr freuen. Danke

iNeedHelp961

08.06.2022, 14:11

@white47583

Okay, 2 Lösungen hätte ich noch. Aber das target nicht Defeniert wird hat nichts mit dem Code zu tun, denke ich. Also halt irgendwas ist eindeutig Falsch die Console sollte mehr sagen als "Uncaught".

Also Option 1 Wäre du machst es erstmal ohne Attribute, nur:

element.scrollIntoView();

Oder was noch geht, du gibst erstmal dem Element das du willst eine ID, beispielsweiße "test-id". Nun kannst du machen:

location.href = "#test-id";

Ich glaub das ging aber auch wenn du machst:

window.location = "#test-id";

white47583

Beitragsersteller

08.06.2022, 12:50

Ohh und wenn ich das richtig verstehe ist das 2. CSS Code oder ?

PWolff

08.06.2022, 13:21

@white47583

Meinst du

{block: "end", behavior: "smooth"}

? - Nein, das ist "JSON" - "JavaScript Object Notation". CSS hat diese Darstellungsform im Wesentlichen übernommen. (Allerdings überrascht mich, dass developer.mozilla.org fehlerhaftes JSON verwendet - die Namen der Elemente MÜSSEN lt. JSON-Spezifikation in doppelten Anführungszeichen stehen; hier:

{"block": "end", "behavior": "smooth"}

Ich wüsste jetzt aber keinen JavaScript-Interpreter, der die Form ohne Anführungszeichen nicht akzeptieren würde (sofern es nur ein gültiger JavaScript-Name ist).

iNeedHelp961

08.06.2022, 13:21

@white47583

Jetzt wo du es sagst. Ich glaube das sind tatsächlich sogar beides CSS Attribute. Musste ausprobieren

iNeedHelp961

08.06.2022, 13:22

@PWolff

Ja, es ist JSON. Aber JSON ist ja nur zum Auslesen, am Ende kommt es zu CSS.

white47583

Beitragsersteller

08.06.2022, 12:49

OK ! Danke ich werde das jetzt gleich in meiner Datei testen und gebe dir dann eine Rückmeldung, ob es geklappt hat. Vielen Dank !

Ähnliche Beiträge

Was mache ich in Javascript mit getElementById falsch?

Ich versuche mit document.createTextNode einen Text in Javascript auszugeben. Doch der Zugriff auf mein HTML Objekt <a id="Textid"></a> funktioniert nicht. Die Browser-Konsole gibt immer

Uncaught TypeError: document.getElementById(...) is null

aus. Ich werde daraus aber nicht richtig schlau. Kann mir jemand weiterhelfen?

var Text = document.createTextNode('Das ist der Text');
document.getElementById('Textid').appendChild(Text);

...zum Beitrag

Javascript Seitenübergreifend?

Hallo,

ich möchte in einen Html Code einen Javascript Code für Lesezeichen einfügen. Also ich habe eine Seite mit vielen Texten (Seite x), zu jedem Text gibt es einen Button, der das jeweilige Lesezeichen hinzufügen soll. Wenn dieser Knopf gedrückt wird, dann soll ein derzeit unsichtbarer Container (display: none;) auf display:flex; bzw. Sichtbar gestellt werden (in Seite y).

Der Code der diese Funktion ausführen soll wäre derzeit:

function textfield1() {

var x = document.getElementById("th1");

if (x.style.display === "none") {

x.style.display = "block";

} else {

x.style.display = "none";

}

Dieser Code wird natürlich nur auf Seite x ausgeführt
kann mir jemand helfen, dass dieser Container dann auf Seite y gezeigt wird?

...zum Beitrag

JavaScript Texfeld leeren?

Ich habe folgendes Textfeld.

<input type="text" id="eingabe" placeholder="" value="">

Ich habe dazu in JavaScript in eine Funktion geschrieben die ausgeführt werden soll, wenn ein Button gedrückt wird. In dieser existieren folgende Zeilen Code.

document.getElementById("eingabe").setAttribute("value", "");
      document.getElementById("eingabe").setAttribute("placeholder", "Richtig");

Damit möchte ich erreichen, dass der Inhalt des Textfeldes geleert wird und in dem Textfeld im Hintergrund das Wort Richtig steht.

Jedoch wird das Textfeld nicht geleert.

...zum Beitrag

Textfarbe des von JavaScript ausgegebenen Textes ändern?

Hallo, ich schreibe gerade eine HTML-Seite.

Dabei benutze ich ein JS um zu bestimmten Uhrzeiten einen bestimmten Text auszugeben. Dazu benutze ich die Funktion getTime().

Wie kann ich den Text, der hierbei ausgegeben wird (also durch answer="xxx" ) verändern? Also durch CSS z.B. die Schriftfarbe und -größe ändern??

Hier mein bisheriger Code:

...zum Beitrag

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?

...zum Beitrag

Javascript in JSON Datei nachschlagen lassen?

Ich möchte eine Javascript Funktion Programmieren, die einen Text aus einem Eingabefeld(HTML) ausließt, anschließend jeden Buchstaben einzeln in einer JSON Datei nachschlägt und zum Schluss den zu den Buchstaben gehörenden Hexadezimalcode, der in der JSON Datei den Buchstaben zugeordnet ist, in ein anderes Textfeld(HTML) ausgibt.

Das mit dem auslesen und ausgeben, ist auch kein Problem, aber ich weiß nicht, wie ich den Javascript Code, mit der JSON Datei Arbeiten lassen kann, weil ich das noch nie gemacht habe und es nicht ganz verstehe.

Weiß irgendjemand, wie der Code dafür lautet und kann ihn am besten noch verständlich erklären?

...zum Beitrag

Html Input in Javascript ausgeben?

Ich würde gerne einen HTML Input Text in Javascript ausgeben lassen.

Dazu habe ich bereits ein Script erstellt, in dem ich einer Variable den Wert des HTML Input gebe(Es geht um die Variable "VorName"), mit Hilfe von "document.getElementById". Allerdings will die Variable den Wert nicht annehmen/ändert ihn nicht.

Ich habe auch onclick angewendet

Warum funktioniert das nicht? ) :

Danke im voraus für Tipps und Hilfe

...zum Beitrag

JavaScript Funktion funktioniert nicht?

Hallo,

Ich habe für meine Webseite eine Navigationsleiste gemacht, die sich einklappt, wenn man eine bestimmte Bildschirmbreite hat. Dann sind dort noch drei Punkte und wenn man klickt, öffnet sich eine Übersicht. Das hat alles super funktioniert.

Doch auf Seiten, wo ich schon JavaScript habe, funktioniert die Funktion plötzlich nicht mehr.

Namen sind alle nur einmal vergeben, Links stimmen und so weiter.

Und auf meiner Indexseite funktioniert das Icon nicht, obwohl es überall auf jeder anderen Seite funktioniert.

...zum Beitrag

Wie kann man Text über JavaScript versenden?

Hi Leute, ich möchte eine kleine Homepage (HTML, CSS, JavaScript)erstellen und hätte gern eine Funktion, bei der man Text eingeben kann, der mir anschließend zugesendet wird. Bitte schreibt nicht, dass ich einfach eine E-Mail Adresse verlinken soll. Vielen Dank im Voraus. :-)

...zum Beitrag

Wie kann ich mit JavaScript eine einfache Validierung umsetzen?

Hallo zusammne,

ich möchte gerne, dass wenn man in das Inputfield vom Typ email etwas eingibt, eine alert-Funktion aufgerufen wird. Die Funktion soll erst aufgerufen werden, wenn in das Eingabefeld vom Typ email fünf Zeichen eingegben worden sind.

Beispiele:

Maxmu (hier sollte das alert aufgerufen werden) stermann@muster.com, wäre richtig.
ds@d, wäre falsch, da nur vier Zeichen eingegeben worden sind und die Funktion sollte nicht aufgerufen werden.

Hier das Codebeispiel.

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="Stylesheet" href="style.css">
    <script src="Übungen.js"></script>
  </head>
  <body>
    <form>
      <label for Anmelden>Anmelden</label>
      <input type="email" name="Anmelden" id="Anmelden">
      <label for Password>Password</label>
      <input type="password" name="Password" id="Passwort">
      <button type="button" onclick="Einloggen()">Anmelden</button>
    </form>
  </body>
</html>

JavaScript:

const Anmeldedaten = document.getElementById("Anmelden").innerHTML;

function Einloggen() {
  if (Anmeldedaten.length > 5) {
    alert("Es hat geklappt!");
  }
}

Ich bedanke mich im Voraus bei euch. :)

...zum Beitrag

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.

...zum Beitrag

JavaScript - document.getElementById für Class?

var x = document.getElementById('x').innerHTML;

Wie funktioniert diese Funktion, wenn man eine Klasse ansprechen will?

...zum Beitrag

Javascript - Note berechnen?

Schönen guten Abend,

ich versuche mir selber JS beizubringen und merke, dass es doch nicht ganz so einfach ist. Ich versuche ein Rechner zu programmieren, mit welche man die Zeugnisnote berechnen kann. Leider habe ich Probleme die Werte die ich ins Input-Feld eingebe in JS aufzurufen und zu verarbeiten. Würde mir jemand diesbezüglich helfen?

Bitte verzichtet darauf mir zu sagte wie einfach das sei und wie schlecht ich bin, ich will mich weiter motivieren mich weiterzubilden und mir nicht erzählen lassen wie einfach oder dass ich es doch lassen solle.

Mein JS

function berechnung(){
    var at = document.getElementById("allgemein")
    var kl = document.getElementById("klausur")
    document.getElementById("ergebnis").innerHTML = kl;
    allgemein+klausur
    console.log
}

Mein HTML

<div class="section">
            <p><h2>Notenrechner</h2></p>

            <input type="int" id="allgemein"> <br>
            <input type="int" id="klausur">
            <button onclick="berechnung()">Note berechnen</button>
            <p id=ergebnis></p>


        </div>

...zum Beitrag

C-Knopf im Taschenrechner programmieren?

Ich habe vor, einen Taschenrechner in HTML und JS zu coden, aber ich weiß nicht, wie ich diesen Knopf, der alles löscht in eine Funktion packen kann.

So habe ich es bisher versucht, aber es funktioniert nicht:

function deleteAll() {
  let container = document.getElementById("resultarea");
  let remove = clrs(container.innerHTML);
  container.innerHTML = remove;
}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen