JavaScript alles außer eine Klasse ansprechen?

Hallo zusammen,

wie kann ich ich JavaScript alles bis auf eine Klasse ansprechen?

z.B. bei document.addEventListener eine Klasse außen vor lassen.

Vorab danke!

1 Antwort

Von Experte MrAmazing2 bestätigt

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, CSS, JavaScript

26.03.2022, 22:44

Du kannst die Pseudoklasse not in einem Selektor verwenden.

Beispiel:

<p>a</p>
<p class="ignore-me">b</p>
<p>c</p>
<script>
  const paragraphs = document.querySelectorAll("p:not(.ignore-me)");
  for (const paragraph of paragraphs) {
    paragraph.addEventListener("click", () => alert("Hello"));
  }
</script>

Bei Klick auf einen der Paragraphen wird Hello in einem Dialogfenster ausgegeben. Nur beim zweiten Paragraph passiert nichts, denn dieser wurde in der Selektion, welche Paragraphen mit Listenern ausgestattet werden sollen, ausgeschlossen.

Hallo,

kann mir jemand sagen oder evtl zeigen wo das gut erklärt steht, wie ich eine Klasse aus dem Html-Gerüst in einem JavaScript anspreche.

Solche Dinge wie <main> oder <section> spreche ich ja einfach mit dem Namen an wie z.b.

main
section

Doch Klassen bekommen zumindest in CSS einen Punkt davor zum Ansprechen.Z.b.:

html:

<div class="groups">

css:

.groups { ... }

Doch wie spreche ich Klassen im JavaScript an. Ich habe bisher immer ohne js websites erstellt und möchte mich nun doch mit js mehr beschäftigen.

LG Lengo19

...zur Frage

Ist es noch sinnvoll, NextJS zu lernen?

SEO ist kein Punkt, wenn ich ehrlich bin. Heutzutage können auch Crawler normales React crawlen.

Als Zweites kommt das Server Side Rendering doch nur beim ersten Aufruf der Seite wirklich etwas bringt.

Danach ist es stinknormales React, das nicht mehr im Server für mich ausgeführt wurde und als HTML geschickt wird.

Natürlich sind 0.5-1 Sekunden wichtig, um den Nutzer ein gutes Gefühl zu geben und alles.

Aber warum sollte man sich den Stress mit NextJS antun? So wichtig wie mir diese 0.5 Sekunden auch sind. Man kann auch an anderen Ecken leichter optimieren und komprimieren.

React ist eine leichtgewichtige Bibliothek für ein bisschen Rendering und Next ein richtiges Framework.

Vielleicht ist da noch der Vorteil, das Leute ohne JavaScript wenigstens irgendwas sehen, aber wenn ich ehrlich bin, können einem Menschen mit JavaScript aus egal sein. Das sind fast alle Aluhutträger und die will man nicht in irgendeiner Art ansprechen als Kunde.

Auch keine Menschen die noch Internet Explorer und veraltete Smartphones nutzen. Da nehme ich lieber Rücksicht auf Sehbehinderte.

Was sagt ihr? Macht es noch Sinn, NextJS zu lernen? Warum nutzt ihr das?

...zur Frage

alle aus meiner klasse tragen einen BH nur ich nicht...

alles aus meiner klasse tragen einen BH außer ich ..ich weis auch gar nicht wie ich meine mum darauf ansprechen soll weil wir jetzt nicht gerade wie abf`s sind ich finde das auch i-wie peinlich wenn wir uns in Sport umziehen und ich da in sonem Unterhemd stehe und alle mich doof anglotzten

...zur Frage

Wie soll ich meinen Crush ansprechen?

Ich habe einen Crush auf ein Mädchen aus meiner Klasse und ich weiß nicht wie ich sie ansprechen soll, und sagen dass ich sie mag.

Ich und sie gehen in die 7. Klasse

...zur Frage

Wofür steht "this" in diesem Javascript?

Ich habe bisher noch nie mit Java oder Javascript gearbeitet und muss mich nun gezwungener Weise einarbeiten. So ganz habe ich den this Befehl jedoch noch nicht verstanden.

Wofür steht "this" in diesem Javascript? (Ausschnitt) PhonegapPrototype.prototype.requestData = function(url, user, password) { var me = this;

steht hier "this" für "PhonegapPrototype.prototype.", also kann ich in der Funktion me anstelle von PhonegapPrototype.prototype. schreiben?

Danke vorab! Gruß Michael

...zur Frage

Mädchen ansprechen, dass eine Klasse über mir ist?

Ich möchte ein Mädchen ansprechen, welches eine Klasse über mir ist (Ich 7. Klasse, sie 8.Klasse). Ich sehe sie oft am Spind, nur ist dort immer recht viel los. Das hindert mich aber nicht daran, sie anzusprechen. Das einzige, was mir im Weg steht, sind ihre Freundinnen. So ziemlich IMMER ist eine dabei. Soll ich sie auch ansprechen, wenn eine dabei ist, oder auf eine Gelegenheit warten, in der sie alleine ist? Habe ich überhaupt eine Chance?

...zur Frage

CSS-Klasse ansprechen nur bei anderer CSS-Klasse?

Hallo Zusammen

Wie kann ich die Klasse "amount" ansprechen, aber nur wenn diese in der Klasse "price" ist? Ich möchte nicht alle "amount" CSS-Klassen meiner Seite ansprechen.

<spanclass="price"><spanclass="amount">40.00EUR</span></span>

Besten Dank

...zur Frage

Ich habe mich in ein Mädchen aus einer Klasse unter mir verliebt ich bin elf und direkt glaube ich auch wie soll ich sie ansprechen?

Wie soll ich sie ansprechen

...zur Frage

Einzelgänger ansprechen?

Heyy GuteFrage Community

Ich hab da mal ne frage. Ich hab in einem Wahlfach einen Schüler denn ich sehr sympathisch finde. Er hat aber gar kein Social Media ausser WhatsApp. Ich hab heute gehört das er gerne alleine ist und angeblich sagte das auch der Lehrer an die Klasse die er geht. Ich möchte ihn aber gerne in der Pause ansprechen , leider weiss ich nicht wie ich eine Person ansprechen soll die eher ein Einzelgänger ist.

Könnt ihr mir tipps geben?

Danke im Voraus!!

Jessie

...zur Frage

Wo soll ich meine elemente in dem Javascript einfügen?

<script>
      document.addEventListener('DOMContentLoaded', function() {
          const scrollButtons = document.querySelectorAll('.button1');

          scrollButtons.forEach(button => {
              button.addEventListener('click', function() {
                  const target = button.getAttribute('data-target');
                  const targetElement = document.getElementById(target);

                  if (targetElement) {
                      window.scrollTo({
                          top: targetElement.offsetTop,
                          behavior: 'smooth'
                      });
                  }
              });
          });
      });
  </script>

Hi,

AI hat mir den code gegeben um meine buttons nützlich zu machen. Weil ich kein Javascript kann weiß ich nicht wo ich meine class namen einfügen soll.

Bitte helft mir

LG Lisa

...zur Frage

Wir haben einen Projektauftrag in Informatik für die 12. Klasse. Hat jemand eine Idee?

Wir brauchen eine Datenbank und es muss eine Website mit JavaScript haben.

...zur Frage

Wie kann man bei der Terrassentür ein Schloss von außen installieren?

Hallo,

Wir haben eine Terrassentür (s. Fotos), die wir von außen mit einem Schloss zum Auf-/Abschließen nachrüsten wollen.

Wie ist dies möglich?
Welchen Handwerker müsste ich hierzu ansprechen?
Gibt es einen Bausatz?

Vielen Dank für eure Unterstützung

Jörg

...zur Frage

JavaScript - document.getElementById für Class?

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

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

...zur Frage

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen