HTML – die neusten Beiträge

Angular: Wieso wird Component zweimal aufgerufen?

Hi,

ich bin gerade dabei in Angular eine kleine Webseite zu erstellen. Einfach Just for Fun.

Kurz meine Components + Quellcode.

app-component.html

<app-toolbar></app-toolbar>


<router-outlet></router-outlet>

toolbar.component.html

<div class="head" style="background-color: darkgreen;">
    <div class="box">
            <button class="selectionButton" routerLink="/startseite">
                <div class="menuButton"></div>
                <div class="menuButton"></div>
                <div class="menuButton"></div>
            </button>
    </div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">TypeScript</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">Java</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton" routerLink="/htmluebersicht">
            <font size="5">HTML</font>
        </button>    
    </div>
    <div class="box">
        <button class="selectionButton">
            <font size="5">Cypress</font>
        </button>
    </div>
</div>

html-page.component.html

<p>html-page works!</p>

Wenn ich jetzt auf den Button HTML ("/htmluebersicht") klicke, kommt der Text "html-page works!" .... Alles gut, so solls.
Wenn ich jetzt aber wieder auf den Menü Button ("/startseite") klicke wird meine toolbar.component.html irgendwie zweimal auf der Webseite angezeigt.

Weis jemand wieso die toolbar dann zweimal angezeigt wird?

Ich hoffe es ist verständlich was ich meine.

Computer, Programm, HTML, Webseite, programmieren, Frontend, TypeScript, Angular

Wie überprüfe ich mit JS oder PHP welche HTML Checkbox in einem Form ausgewählt wurde, bevor es abgesendet wurde?

Wie in der Langen Frage geschrieben, ich suche Code der es mir ermöglicht über Java Skript oder PHP auszuwerten welche Checkbox geklickt wurde.

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="frei" align="center"><strong> Abteilung FF </strong></label><br>

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="workS" align="center"><strong> Abteilung W </strong></label><br>

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="MO" align="center"><strong> Abteilung O </strong></label><br>

Im allgemeinen Nutze ich bereits die Funktion in JS damit der User nur ein Element auswählen kann. Doch nun bräuchte ich eine Direkte Ausgabe je nachdem welches Element ausgewählt wurde. D.h. Ich suche eine Möglichkeit auszuwerten welches angeklickt wurde und dann möchte ich etwas ausführen über if, eles if, else.

Falls es helfen sollte hier habe ich die Begrenzung Methode für das anklicken.

   //Dieser Code überprüft ob drei Elemente ausgewählt wurden. Wenn dies der fall ist dann werden alle weiteren Element Blockiert.

   const groups = [...document.getElementsByClassName("radio-multichoice")].reduce((result, element) => {

 result[element.name] = result[element.name] || [];

 result[element.name].push(element);

 return result;

}, {});

for (const [name, elements] of Object.entries(groups)) {

 const limit = name.split(":")[name.split(":").length-1];

 for(const el of elements) {

  el.addEventListener("change", e => {

   if (elements.filter(x => x.checked).length > limit) {

     e.target.checked = false;

   }

  });

 }

}

Könnte mir dabei jemand Helfen, falls ihr nachfragen habt weil ich es mal wieder nicht richtig erklären konnte stellt bitte eine Nachfrage.

Computer, HTML, Webseite, programmieren, JavaScript, PHP, Webentwicklung

Meistgelesene Beiträge zum Thema HTML