Elemente innerhalb einer HTML-Datei zählen und Ergebnis ausgeben?

McMoneysack91 · 4. April 2023

Liebe Freunde,

ich habe eine HTML-Datei mit einem Index. Dieser beinhaltet ganz viele Links, also <a href=.".."></a>.

Nun möchte ich im Footer der Datei gerne die Anzahl dieser Links im Index automatisiert ausgegeben haben. Wichtig ist auch, dass auch wirklich NUR die innerhalb des bestimmten <div> mit einer speziellen ID also z.b. <div id="index"> gezählt werden und nicht etwa alle anderen <a href> auf der Seite die ja ganz normale Verweise etc. sein könnten.

Gibt es dazu in HTML/JS eine simple Lösung?

Ergebnis soll eine Fußzeile sein, die in etwa sagt:

"Dieser Index beinhaltet bereits [zähle alle <a href=> aus <div id="index">] Einträge."

KillerCow · 4. April 2023

Bin keine JS-Bastler, aber "getElementById()" und "getElementByTagName().length" mit den korrekten Parametern aufeinander angewendet, dürfte die richtige Richtung sein, schätze ich.

Joshinator · 4. April 2023

Javascript:

const alleLinksInDivs = document.querySelectorAll('#index a').length

Mehr braucht man schon gar nicht.
QuerySelectorAll frisst so ziemlich alles was CSS Selektoren auch können, also recht einfach anpassbar.

DeviLEX · 4. April 2023

Hi,
ich nutze dafür meist JQuery.
Das sollte für dich passen:
$( "#idname a" ).length;
Musst dann noch irgendwo hinschreiben lassen.
z.B. in ein bestimmtes DIV mit ID=linkanzahl.

$("#linkanzahl").text($( "#idname a" ).length);

Hilfe zu den Selectoren findest hier oder auch bei JQuery
https://www.w3schools.com/cssref/css_selectors.php

McMoneysack91 · 4. April 2023

GANZ vielen Dank für diese Code-Zeile. Wie bekomme ich das Ergebnis nun als Text auf die HTML-Seite sichtbar? Muss ich das Ergebnis wiederum irgendwo referenzieren?

Joshinator · 4. April 2023

Javascript muss nur wissen wo du die Zahl hin haben willst, so z.B.

HTML:

<div id="index">
    all die hrefs...
</div>

<footer>
    Dieser Index beinhaltet bereits <span id="link_anzahl"></span> Einträge.
</footer>

<script>
    const linkAnzahl = document.querySelectorAll('#index a').length;
    document.getElementById('link_anzahl').innerText = linkAnzahl;
</script>

DeviLEX · 4. April 2023

Hier noch vollständigkeitshalber die JQuery Lösung, das reine JavaScript ist in deinem Fall aber vollkommen ausreichend.
JQuery muss geladen sein, dann kann das Snippet eingefügt werden.
Der Text erscheint im DIV, das platzierst da wo Du es haben möchstest.

HTML:

<script src="https://code.jquery.com/jquery-3.6.3.js"></script>
<script>
$("#linkanzahl").text($( "#idname a" ).length);
</script>
<div id="linkanzahl"></div>

floq0r · 4. April 2023

Ist denn für die JQuery Lösung denn nicht zumindest für die Adressierung von #linkanzahl ein Abwarten vom document load notwendig?

McMoneysack91 · 4. April 2023

Hm. Leider klappen die hier freundlicherweise eingereichten Lösungen nicht.

Ich muss dazusagen, dass die HTML Datei lokal auf meinem Rechner liegt. NICHT auf einem Server. Ich poste einfach mal den Grundbaustein:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="css/format.css"
</head>
<body>
 <a id="pagetop"></a>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Suchbegriffe eingeben..." id="myInput" onkeyup="filterFunction()">
    <div class="inner" id="index">
        <a href="/beispiele/beispiel1.html">Beispiellink 1</a>
        <a href="/beispiele/beispiel2.html">Beispiellink 2</a>
    </div>
  </div>
 
<footer>
 <p>Dieser Index beinhaltet bereits (x) Einträge.</p>
</footer>
</body>
</html>

    
<script>
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (filter.length > 0 && txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "inline";
    } else {
      a[i].style.display = "none";
    }
  }
}
</script>

Wie ihr seht ist der Index bereits mit einem Script versehen (ebenfalls großen Dank hier an das Forum) aber das soll der Sache hoffentlich keinen Abbruch tun.

Das große allumfassende <div> hier heißt myDropdown. also habe ich eure gelieferten Ergebnisse mal umgeschrieben auf #myDropdown statt #index. Aber leider tut sich da immer noch nichts.

Ich habe mal aus all den Einträgen nur 2 stehen gelassen. Die Ergebniszeile des Footers müsste also 2 ausgeben.

DeviLEX · 4. April 2023

So zählt es die gesamt Anzahl Links und nach der Suche zeig es zusätzlich die Anzahl der Treffer an:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="css/format.css"
</head>
<body>
 <a id="pagetop"></a>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Suchbegriffe eingeben..." id="myInput" onkeyup="filterFunction()">
    <div class="inner" id="index">
        <a href="/beispiele/beispiel1.html">Beispiellink 1</a>
        <a href="/beispiele/beispiel2.html">Beispiellink 2</a>
    </div>
  </div>
 
<footer>
 <p>Dieser Index beinhaltet bereits <span id="link_anzahl"></span> Einträge.</p>
</footer>
</body>
</html>

    
<script>
document.getElementById('link_anzahl').innerText = document.querySelectorAll('#index a').length;

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i, found;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  found=0;
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (filter.length > 0 && txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "inline";
      found++;
    } else {
      a[i].style.display = "none";
    }
  }
  document.getElementById('link_anzahl').innerText = found + "/" + document.querySelectorAll('#index a').length;
}
</script>

McMoneysack91 · 4. April 2023

TAUSEND DANK! Es hat fantastisch funktioniert! Ganz lieben Dank an diesen Thread für diese schnelle Unterstützung.

McMoneysack91 · 5. April 2023

--Nachtrag--

@DeviLEX ich habe soeben ein witziges Phänomen festgestellt. Wenn ich die HTML-Datei einfach öffne und noch nichts mache, zeigt er mir brav die Anzahl der zugrundeliegenden Einträge im "myDropdown" an. Alles gut.

Aber sobald ich anfange mit dem Suchfeld (und damit mit dem Script) zu arbeiten, switcht er um auf eine x/y Zählung. Wenn ich also einen Wert eingebe und das Script anfängt mir die passenden Links vorzuschlagen, zählt der Zähler nur noch die verbliebenen Links mit einem Slash von der Gesamtanzahl der Links.

Weil ich ja in diesem Fall nur die beiden Beispiellinks hatte, zeigt er mir hier 1/2 an, weil ja nur noch ein zutreffender Link angezeigt wird von 2 insgesamt existierenden.

In meiner Echtdatei habe ich das auch mal probiert, wo ich 72 Einträge habe. Sobald ich anfange zu tippen und immer mehr Links wegfallen, geht der Zähler entsprechend mit. 72 --> 39/72 --> 21/72 --> 12/72 --> 3/72 --> bis ich bei meinem Suchbegriff bin 1/72.

Sobald ich das Suchfeld aber komplett leere, springt der Zähler nicht wieder zurück zur einen Zahl sondern bleibt bei seinem x/y Format und zeigt eben 72/72 oder in diesem Beispiel 2/2 an.

Sobald ich die Seite neu lade, ist alles wieder gut und er zeigt nur die Zahl an, solange man noch nicht mit dem Script arbeitet.

Es hat garantiert was mit dem Script des Index zu tun, gar keine Frage. Denn dein Codebeitrag zum Zähler hat voll ins Schwarze getroffen, daran gibt es nichts auszusetzen.

Nun die Frage: kann man dieses Phänomen vielleicht umgehen? Vielleicht nicht indem man in "myDropdown" zählt sondern noch spezifischer geht und in der Class "inner" zählt, die ja ein Teil von "myDropdown" ist?

DeviLEX · 5. April 2023

Genau so ist es programmiert :-)
Was ist wenn die Eingabe gelöscht wird, dann wird kein Link mehr angezeigt oder? Eigentlich sollte ja dann wieder alles angezeigt werden.
Ersetzte mal die Funktion mit folgendem:

Javascript:

function filterFunction() {
  var input, filter, ul, li, a, i, found;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  found=0; 

  if(filter == "") {
    for (i = 0; i < a.length; i++) {
      a[i].style.display = "inline";
    }
    document.getElementById('link_anzahl').innerText = document.querySelectorAll('#index a').length;
    
  } else {
    for (i = 0; i < a.length; i++) {
      txtValue = a[i].textContent || a[i].innerText;
      if (filter.length > 0 && txtValue.toUpperCase().indexOf(filter) > -1) {
        a[i].style.display = "inline";
        found++;
      } else {
        a[i].style.display = "none";
      }
    }
    document.getElementById('link_anzahl').innerText = found + "/" + document.querySelectorAll('#index a').length;
  }
}

McMoneysack91 · 5. April 2023

DeviLEX schrieb:

JavaScript:

Code:

function filterFunction() {
  var input, filter, ul, li, a, i, found;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  found=0;

  if(filter == "") {
    for (i = 0; i < a.length; i++) {
      a[i].style.display = "inline";
    }
    document.getElementById('link_anzahl').innerText = document.querySelectorAll('#index a').length;
   
  } else {
    for (i = 0; i < a.length; i++) {
      txtValue = a[i].textContent || a[i].innerText;
      if (filter.length > 0 && txtValue.toUpperCase().indexOf(filter) > -1) {
        a[i].style.display = "inline";
        found++;
      } else {
        a[i].style.display = "none";
      }
    }
    document.getElementById('link_anzahl').innerText = found + "/" + document.querySelectorAll('#index a').length;
  }
}

Hierbei ist leider komplett tote Hose. Dann funktioniert auch die Suchleiste nicht mehr so, dass sie Links vorschlägt

Domi_bas · 5. April 2023

Kleiner Tipp, eine id gibt es nur ein einziges Mal auf der gesamten Seite! Was du zählen willst sind alle <a href=... class="index">

Eine Klasse kann öfters vorkommen, eine id (ausgeschrieben ~ identifier => Identifizierer) kann nur einmal vorkommen.

DeviLEX · 5. April 2023

Die ID sollte nur einmalig im DIV vorhanden sein, die Links haben keine ID.

Hast es an der richtigen Stelle eingefügt? Habs vorher getestet und hat bei mir funktioniert. Hier noch der komplette Code, bitte mal ausprobieren:

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <link rel="stylesheet" href="css/format.css"
</head>
<body>
 <a id="pagetop"></a>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Suchbegriffe eingeben..." id="myInput" onkeyup="filterFunction()">
    <div class="inner" id="index">
        <a href="/beispiele/beispiel1.html">Beispiellink 1</a>
        <a href="/beispiele/beispiel2.html">Beispiellink 2</a>
    </div>
  </div>
 
<footer>
 <p>Dieser Index beinhaltet bereits <span id="link_anzahl"></span> Einträge.</p>
</footer>
</body>
</html>

    
<script>
document.getElementById('link_anzahl').innerText = document.querySelectorAll('#index a').length;

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i, found;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  found=0; 

  if(filter == "") {
    for (i = 0; i < a.length; i++) {
      a[i].style.display = "inline";
    }
    document.getElementById('link_anzahl').innerText = document.querySelectorAll('#index a').length;
    
  } else {
    for (i = 0; i < a.length; i++) {
      txtValue = a[i].textContent || a[i].innerText;
      if (filter.length > 0 && txtValue.toUpperCase().indexOf(filter) > -1) {
        a[i].style.display = "inline";
        found++;
      } else {
        a[i].style.display = "none";
      }
    }
    document.getElementById('link_anzahl').innerText = found + "/" + document.querySelectorAll('#index a').length;
  }
}
</script>

Domi_bas · 5. April 2023

DeviLEX schrieb:
Die ID sollte nur einmalig im DIV vorhanden sein, die Links haben keine ID.

Ah ok, hab ich übersehen... Bin weg

McMoneysack91 · 5. April 2023

DeviLEX schrieb:
Hast es an der richtigen Stelle eingefügt? Habs vorher getestet und hat bei mir funktioniert. Hier noch der komplette Code, bitte mal ausprobieren

Leider nach wie vor 2/2 Zählung sobald man was mit der Suchleiste macht. Vielleicht hat es mit dem Browser zu tun, dass er diese Codes anders interpretiert? Ich bin leider gezwungen dieses Tool was ich jetzt baue AUSSCHLIESSLICH in Microsoft Edge laufen zu lassen. Internet Explorer verhält sich identisch zu Edge und zeigt bei der ersten Interaktion mit der Suchleiste 2/2 an.

Ich bin mir sicher dass ICH irgendwas falsch mache, zumal du ja sagst dass du den neuen Code selbst schon erfolgreich getestet hast.

Ergänzung (5. April 2023)

LOL Edit: Problem gelöst.

ich habe den Baustein "found + "/" + " entfernt. Jetzt wird immer nur die Anzahl der Links angezeigt, egal wie ich mit der Suchleiste agiere.

Ich wette ich habe mich mit meinem Wunsch einfach missverständlich ausgedrückt.

Soll heißen: JETZT ist alles perfekt

DeviLEX · 5. April 2023

Ich dachte, das wäre eine sinnvolle Ergänzung. Dann reicht auch der einmalige Aufruf am Anfang und muss nicht beim Filtern aktualisiert werden.

McMoneysack91 · 5. April 2023

@DeviLEX auch für dich noch kurz zur Kenntnis: für das endgültige Ergebnis habe ich deinen Code aus Post #10 genommen.

Der Code aus Post #16 hat leider ein ungewolltes Verhalten mitgebracht, nämlich, wenn man in die Suchleiste geklickt hat ohne was zu tippen, wurden bereits alle verfügbaren Links als Dropdown ausgegeben und erst wenn man losgetippt verschwanden die alle und es blieben nur noch die die zur Benutzereingabe passten.

Der Code aus Post #10 nur eben mit dem entfernten Zusatz found + "/ + lässt ja die Suchfunktion unberührt und gibt zu jeder Zeit exakt die enthaltenen Links wieder.

Der gesamte Hintergrund dieser Funktion ist ja nur quasi ein "Gut gemacht" an sich selbst. Denn dieses Tool wird später hier allen zur Verfügung stehen und ist ja ein kleines Schulterklopfen für sich selbst und vertrauenserweckend für den Anwender wenn er sieht dass schon so viele mögliche Suchbegriffe eingepflegt sind.

Elemente innerhalb einer HTML-Datei zählen und Ergebnis ausgeben?

McMoneysack91

Gast

Lt. Commander

Commander

Cadet 1st Year

McMoneysack91

Gast

Commander

Cadet 1st Year

Commander

McMoneysack91

Gast

Cadet 1st Year

McMoneysack91

Gast

McMoneysack91

Gast

Cadet 1st Year

McMoneysack91

Gast

Lieutenant

Cadet 1st Year

Lieutenant

McMoneysack91

Gast

Cadet 1st Year

McMoneysack91

Gast