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

dannyotti

13.08.2023, 12:11

Was genau meinst du mit class?

Die kannst du ja eigentlich beim button selber angeben.

Oder meinst du eine Class nach betätigen des buttons? Dass er dannach anders aussieht=?

Lisa1Natur0

Fragesteller

13.08.2023, 12:13

nein der code funtuniert nicht. warum? Welche werte muss ich mit meinen ersetzten damit es klappt. (´button1´) ist zb. ein wert von mir.

dannyotti

13.08.2023, 12:18

Könntest du vielleicht auch mal den HTML Teil posten wo der button drinnen sein soll? Gibt es mehrere? weil du eine Liste mit Buttons erstellt hast oben.

Lisa1Natur0

Fragesteller

13.08.2023, 12:24

Ist als antwort unten weil das für hier zu viele zeilen sind

3 Antworten

Lisa1Natur0

13.08.2023, 12:23

Ich hab die Frage gestellt.

HTML Teil mir den Buttons!!!!!

<div class="box1" style="text-align: center;">
    <h1>Pegasus</h1>
    <h2>Für die Lang und Kurzzeitversorgung von intensivpflegebedürftigen und beatmungspflichtigen Menschen zu Hause</h2>
      <button class="button1" target-data="über-uns">Mehr erfahren</button>
      <button class="button2" target-data="kontakt">In Verbindung setzen</button>
    </div>

Lisa1Natur0

Fragesteller

13.08.2023, 15:27

alles poser hier. keiner hier kann html / css / javascript!!!!!!!!!!!!!!!

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, JavaScript

13.08.2023, 13:27

Die Attribute auf den Buttons müssen data-target, statt target-data heißen.
Es muss in deinem Dokument ein Element mit der ID über-uns geben, zu dem gescrollt werden kann.
Wenn dein zweiter Button ebenso zu einem Zielelement scrollen soll, musst du ihm die Klasse button1 zufügen und im Dokument ein Element mit der ID kontakt bereitstellen.

Lisa1Natur0

Fragesteller

13.08.2023, 13:37

was meinst du mit dem teil "dokument"

regex9

13.08.2023, 13:46

@Lisa1Natur0

Dein HTML-Dokument.

Lisa1Natur0

Fragesteller

13.08.2023, 13:58

@regex9

muss das mit id sein oder geht das auch mit class

regex9

13.08.2023, 14:25

@Lisa1Natur0

Man kann das Ganze auch umbauen, sodass man ebenso auf ein Element mit Klasse verweisen könnte. Es wäre allerdings unnötiger Aufwand, da letzten Endes doch nur auf ein bestimmtes Zielelement verwiesen werden kann. Eine ID ist an dieser Stelle schon passend und bietet zudem den Vorteil, dass man zum Zielelement eine URL bilden kann (Bsp.: https://deinewebseite.de/#kontakt).

Lisa1Natur0

Fragesteller

13.08.2023, 15:30

AI und VSC sagen aber target-data.

regex9

13.08.2023, 22:13

@Lisa1Natur0

Es gibt kein target-data-Attribut in HTML.
Das Skript sucht nach einem data-target-Attribut, um dessen Wert zu lesen.

Lisa1Natur0

Fragesteller

15.08.2023, 00:17

@regex9

Habs verwechselt ja. Aber klappt noch immer nicht 😪

regex9

15.08.2023, 01:14

@Lisa1Natur0

Wenn du dich an die obigen Schritte hältst, funktioniert es.

Demo: https://jsfiddle.net/t3qknapv/

dannyotti

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Webseite

13.08.2023, 12:28

Beide Buttons müssen die klasse "button1" haben, damit oben genannter Code überhaupt funktionieren kann.

Wo genau hast du den JS teil eingebunden? Anfang oder ENDE?

Lisa1Natur0

Fragesteller

13.08.2023, 12:46

ende. die beiden buttons sollen aber nicht zum selben ziel. das problem ist nach dem code soll doch der 1. button funktionieren, tut er aber nicht. oder hab ich da was falsch verstanden

Babelfish

13.08.2023, 13:52

Wo genau hast du den JS teil eingebunden? Anfang oder ENDE?

Das ist in dem Fall egal.

Ähnliche Fragen

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

HTML window.location.href geht nicht?

https://streamable.com/9pfpva

Ich weiss nicht genau wo hier der Fehler ist aber er leitet nicht beim richitgen namen und passwort weiter? Weiß jemand woran das liegt? Ich bin relativ am anfang mit html.

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function login() {
                var username = document.getElementById('username').value;
                var password = document.getElementById('password').value;


                if (username === 'test123' && password === 'test') {
                    window.location.href = 'http://www.google.com';
                } else {
                    alert('Ungültiger Benutzername oder falsches Passwort.'); // Fehlermeldung bei ungültigen Daten
                }
                return false;
            }


            var loginButton = document.getElementById('loginButton');
            loginButton.addEventListener('click', login);
        });
    </script>

...zur Frage

Kann mir jemand bei der Funktion in JavaScript helfen?

// init

let count = 0;

// counter element

const counter = document.getElementById("value");

// increment function

function incrementCounter() {

count = Number(localStorage.getItem("count"));

counter.innerText = count;

localStorage.setItem("count", count + 1);

}

// event listener

window.onload = incrementCounter;

let zurücksetzen = document.getElementById("resetbutton");

function aufnull (){

zurücksetzen = localStorage.setItem("count", 0)

count = Number(localStorage.getItem("count"));

zurücksetzen.addEventListener("click", aufnull);

incrementCounter();

};

zurücksetzen.addEventListener("click", aufnull);

ZUR FRAGE: Ich baue einen Besucherzähler und möchte, dass sich der Wer wieder auf 0 zurücksetzt, wenn man auf den Button Reset drückt. Leider setzt es sich erst zurück, wenn man reset drückt und die seite anschließend wieder aktualisiert.
Kann mir jemand helfen und es erklären?

...zur Frage

Ton abspielen Javascript?

Hallo,

Ich möchte auf meiner html Seite einen Sound abspielen, wenn ein Button geklickt wird. Die Seite läuft über den Localhost.

html:

 <script src="script.js"></script>
    <script src="anmeldungj.js"></script>
   <script src="/socket.io/socket.io.js"></script>
    <audio id="ringtone" src="Sound2.mp3"></audio>

JavaScript

var RingSound;
var Sound = new Audio('Sound2.mp3')
RingSound = document.getElementById("ringtone");
...
function Send() {
    if (delay && messageInput.value.replace(/\s/g, "") != "") {
        delay = false;
        setTimeout(delayReset, 1000);
        socket.emit("send", messageInput.value);
        messageInput.value = "";
        RingSound.play();
        Sound.play();
    }
}

Der Pfad stimmt:

Es wird aber kein Sound abgespielt, ich habe es über zwei Varianten versucht.

Ich hoffe jemand kann mir helfen

Jannik

...zur Frage

Javascript Rechnung mit Kommastellen?

Ich habe in JS eine Funktion, mit welcher ich meine Zeugnisnote berechnen kann, allerdings hätte ich es gerne so das z.B statt "3" eine "3,5" angegeben wird und nicht auf die nächste Zahl gerundet wird. Wie mache ich das?

function lkberechnung(){
    const at = parseInt(document.getElementById("lkallgemein").value)
    const kl1 = parseInt(document.getElementById("kl1").value)
    const kl2 = parseInt(document.getElementById("kl2").value)


    const lkergebnis = String(Math.round((kl1 +kl2 + at*2)/4));
    document.getElementById("lkergebnis").innerHTML =("Du hast " + lkergebnis + " Punkte auf dem Zeugnis");

...zur Frage

Undisabled eines Buttons durch JavaScript?

Hallo,

ich möchte mit Hilfe von JavaScript einen Button, der vorher disabled war, wieder aktiviert, sodass er undisabled ist. Die funktioniert leider nicht und ich habe kein Ahnung an was es liegen könnte.

Mein HTML Code:

<body>

</body>

}

Mein Javascript Code:

let button = document.getElementbyid('button' );

function Test() {

button.disabled = false;

}

Weiß jemand an was es liegen könnte?

...zur Frage

Nav bar farb wechsel?

Hi ich möchte gerne das meine navbar die farbe wechselt wenn ich scrolle, was ich auch geschafft habe aber ich möchte gerne das sie erst die farbe wechselt wenn ich bis zu einer bestimmten höhe scrolle, also nicht direkt wenn ich anfange zu scrollen. Was muss ich da tun? :))) Hoffe man versteht was ich meine

<script>
 document.addEventListener('scroll',() => {
    const header =document.querySelector('header');
    
      if (window.scrollY >4) {
      header.classList.add('scrolled');
    } else {
      header.classList.remove('scrolled');
    }
  })
</script>

...zur Frage

Javascript - getElementById funktioniert nicht?

Hey alle zusammen, kann mir jemand sagen, wieso auf der Konsole nicht "123" ausgegeben wird?

echo "</head><body style=\"font-family: Verdana;\">";
echo "<script type = 'text/JavaScript'>console.log('geht los:');console.log(document.getElementById('scannerInput').value);</script>";
echo "<input type=\"text\" id=\"scannerInput\" value=\"123\" />";

...zur Frage

JavaScript/jQuery! Wie einen Loop einbinden?

Auch hier bin ich absoluter Newby!

Ich habe eine nette kleine Funktion:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code2').html() }).animate({ countNum: 5360 }, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code2').html(Math.floor(this.countNum));

complete: function () {

$('.code2').html(this.countNum + "+");

//alert('finished');

}

});

--------------------------------------------------------------------------------------------------------------

Das funktioniert - alles supi - nun möchte ich, dass die Animation nach einem kleinen Zeitintervall erneut startet. Habe dazu über Google 'setInterval' gefunden und einen Code. Leider fehlt mir noch das Verständnis was ich wo einfügen muss.

Hier der Code von Google:

Edit: Ist der Code vielleicht falsch, javascript vs jquery???

function meineFunktion() { 
    // ... 
} 

setInterval(function() { 
    // alle 3 Sekunden ausführen 
    meineFunktion(); 
}, 3000);

Habe das so in meine Scriptdatei eingebunden:

--------------------------------------------------------------------------------------------------------------

$({ countNum: $('.code').html() }).animate({ countNum: 1295365}, {

duration: 10000,

easing: 'linear',

step: function () {

$('.code').html(Math.floor(this.countNum));

setInterval(function() {

// alle 3 Sekunden ausführen

meineFunktion();

}, 3000);

complete: function () {

$('.code').html(this.countNum + "+");

//alert('finished');

}

--------------------------------------------------------------------------------------------------------------

Ich nehme an mindestestens "meineFunktion()" ist nur ein Platzhalter, aber ich bin nicht sicher, was da vom Code rein soll.

Stört das complete eigentlich die Wiederholung oder zeigt das nur an, was passiert, wenn es fertig hochgezählt hat?

Freue mich wie immer über Antworten! :)

Aber auch über Links z.B. mit einer leicht verständlichen Übersicht der Anatomie eines Jquery Codes, damit ich zukünftig besser allgemeine Beispiele an meine anpassen kann.

Bonusfrage:

Ich würde ganz gerne zu der Zahl noch eine einfache sich drehende Grafik (Kreis, Pfeil oä) hinzufügen. Hat da jemand zufällig nen leicht verständlichen Link oä dazu?

...zur Frage

Was mache ich falsch JavaScript?

Ich habe eine Datei mit allein zahlen von 1-100 in einem Array und will nur die letzten 20 es kommt aber immer ein Fehler.

Quellcode:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>

window.setInterval("AutoUpdate()",parseInt(2000));  

function AutoUpdate()
{      
        $.ajaxSetup({ cache: false });
        $.get('LetzteZeilen.txt', function(data) 
        {   
            data = data.replace(/\n/g, "</br>");
            LetzteZeilen(data);
            if (data == 1) 
            {
                location.reload();
            }
        });     
}

function LetzteZeilen(data)
{
    Test = new Array();
    DataSplit = data.split("</br>");


    LetzteZeilen = 20;
    Laenge = DataSplit.length;
    NichtGewollteZeilen = (Laenge-LetzteZeilen);
    i = 0;
    x = 0;
    
    while (i < Laenge) 
    {
        if(i < NichtGewollteZeilen)
        {
            i++;
        }
        else
        {
            Test[x] = DataSplit[i];
            i++;
            x++;
        }
    }

    console.log(Test);
}
</script>

Fehler:
Uncaught TypeError: LetzteZeilen is not a function
    at Object.success (LetzteZeilenTest.php:16:13)
    at j (jquery.min.js:2:26911)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:27724)
    at x (jquery.min.js:4:11065)

...zur Frage

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?

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

JavaScript Datei auslesen was mache ich falsch?

Ich weiß das es so nicht funktionieren kann aber wie geht es denn richtig???

Was mache ich falsch? Der Error ist :

Uncaught ReferenceError: require is not defined at Test.html:12:28

Mein Code

<!DOCTYPE html>
    <html >
        <head>
        <title>Test</title>
        </head>
            <body>


            </body>

            <script>
                const fs = require("fs");
                fs.readFile("test.txt", (err, data) => {
                if (err) throw err;

                console.log(data.toString());
                });
            </script>
    </html>

...zur Frage

Wie Skaliere ich um die Faktoren 2 und 0.5 ohne Glättung bei Javascript?

Kann ich einfach eine function mit ImageScale erstellen und die werte einfügen oder wie gehe ich voran?.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen