Per if Abfrage schauen ob Button gedrückt wird JavaScript?

Hi, ich versuche es hinzubekommen, dass wenn ein Button gedrückt wird eine Funktion aufgerufen wird. Wenn nicht dann eine andere. Ungefähr so soll es aussehen:

if (Button1 wurde angeklickt) {
   submit()
} else {
   counter()
}

Klingt einfach, aber ich hab nichts brauchbares gefunden...

08.04.2021, 15:41

Button 1 mit der id "submit"

3 Antworten

BeamerBen

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, programmieren

08.04.2021, 16:10

Informiere dich über das JavaScript Event System.

Normalerweise macht man das nicht über ein if Statement.

Hier findest du eine deutsche Erklärung: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Ereignisverarbeitung

Falls du Englisch kannst: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Woher ich das weiß:Berufserfahrung – Software Entwickler / Devops

BeamerBen

08.04.2021, 16:11

edit: Ich habe gesehen das die MDN Seite zum großteil nicht übersetzt war, deswegen habe ich den Link ausgetauscht und auf selfhtml verlinkt

Zellner82

08.04.2021, 15:44

Die Seite, wenn du Englisch kannst, von

www.w3schools.com

ist hin und wieder für die Anfänge geeignet.

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, Webseite

08.04.2021, 15:44

ich versuche es hinzubekommen, dass wenn ein Button gedrückt wird eine Funktion aufgerufen wird.

<!doctype html>
<title>click button</title>
<script>
function hello(text) {
  alert(text)
}
</script>
<button onclick="hello('world')">click me!</button>

Alex

Ähnliche Beiträge

E-Mail Adresse bestätigen! HTML JavaScript Code?

Hallo zusammen, ich brauche einen JavaScript Code für die zwei E-Mail Adresse zu bestätigen. Wenn eine andere oder falsche mail Adresse eintippt wie oben soll eine Fehler Meldung erscheinen!

Habe zwar eine JavaScript Code, aber der geht nicht!

function check() {

if (document.forms['Check'].elements['Bestaetigungsmail'].value != document.forms['Check'].elements['Bestaetigungsmail_2'].value) {

alert("uups!");

}

else {document.forms['Check'].submit();}

}

...zum Beitrag

HTML Javascript - Beim Drücken von Enter Button anstatt Submit

Hallo

Ich habe mir einen kleinen Rechner gebastelt und möchte da nun die Eingabefelder mit Javascript auslesen. Das funktioniert auch alles.

Allerdings mache ich das ganze mit einem normalen anstelle eines Submit-Buttons, da sonst die Seite neu geladen wird und dadurch alle Werte in den Eingabefeldern weg sind.

Mein Problem dabei ist, das, wenn man Enter drückt, meine Funktion nicht aufgerufen wird, da es ja nur ein gewöhnlicher Button ist. Ist es möglich, ein Mittelding zwischen beiden Buttons zu machen? Also einerseits soll die Seite nicht neu geladen werden (was beim Submit-Button passieren würde), andererseits soll, wenn man Enter drückt, die Funktion eines bestimmten Buttons ausgeführt werden.

Ich hoffe, ihr könnt mir helfen.

Phippe

...zum Beitrag

JavaScript EventListener funktioniert nicht richtig?

Mein JS-Code:

'use strict'

let lines = document.getElementsByClassName("src-line");
let activeLine = -1;

for (let i1 = 0, i2 = lines.length; i1 < i2; i1++) {
  lines[i1].addEventListener("mouseover", function(){
    lines[i1].style.cursor = "text";
  });
  lines[i1].addEventListener("click", function(){
    activeLine = i1;
    console.log(activeLine);
  });
}
addEventListener("keydown", keypressed(e));

function keypressed(e) {
  if (activeLine != -1) {
    if (e.key == "Backspace") {
      console.log("Backspace");
      ediText[activeLine] = ediText[activeLine].substring(0, ediText[activeLine].length - 1);
    }
    else if (e.key == "Tab") {
      ediText[activeLine] += "&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    else if (e.key == "Shift") {
      return;
    }
    else if (e.key == "Space") {
      ediText[activeLine] += "&nbsp;";
    }
    else {
      ediText[activeLine] += e.key;
    }

    console.log(e.key)
    charCompiler(ediText);
  }

  return 0;
};

Wenn ich nun auf ein Element mit der Klasse src-line klicke, wird in der Konsole immer der Listenindex angezeigt. Ich habe momentan zwei, also zeigt es immer 0 oder 1 an.

Wenn ich jetzt allerdings anfange, Buchstaben einzugeben, wird das zuletzt angeklickte Element verändert. Jedoch kann ich jetzt nicht mehr das Element wechseln, denn klicke ich jetzt auf das andere Element, wird das click-Event nicht mehr aufgerufen. D.h. activeLine wird nicht mehr geändert. Ich habe keinen Plan, warum.

Ist evtl. am Code was falsch, weil ich habe keine Ahnung warum das click-Event nach dem keydown einfach ignoriert wird, obwohl es davor ja noch ging. Btw wird auch in der Konsole beim Klicken danach nichts mehr angezeigt.

...zum Beitrag

Warum ist $_POST hier leer?

Hi, arbeite gerade an nem Kontaktformular, welches mit JQuery und Ajax gesendet werden soll. Hier der Code:

let form = $(this);
let actionUrl = "assets/php/contact.php";

$.ajax({
    type: "POST",
    url: actionUrl,
    contentType: "application/json",
    data: form.serialize(),
    success: function (backendError) {
        console.log(backendError);
        errorHandler(backendError);
    },
    error: function () {
        console.log("failure");
        alert("Internal Error occured. Please try again later");
    }
});

hier der PHP Code zum senden:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    try {
        $errors = array();
        $name = "";
        $email = "";
        $human = "";
        $message = "";

        if (empty($_POST["name"])) {
            $errors[] = "name";
        } else {
            $name = $_POST["name"];
        }

        if (empty($_POST["email"])) {
            $errors[] = "email";
        } else {
            $email = $_POST["email"];
        }

        if (empty($_POST["human"])) {
            $errors[] = "human";
        }

        if (empty($_POST["message"])) {
            $errors[] = "message";
        } else {
            $message = $_POST["message"];
        }

        if (count($errors) === 0) {
            $to = "my@email.de";
            $subject = "Kontaktformular - " . $name;
            $message = "";
            $additional_headers = array(
                "From" => $email,
                "Reply-To" => $email,
                "X-Mailer" => phpversion()
            );

            mail($to, $subject, $message, $additional_headers);
            $response["error"] = false;
            echo json_encode($response);
            exit;
        } else {
            $response["error"] = $errors;
            echo json_encode($response);
            exit;
        }
    } catch (Exception $exception) {
        // in Log File Time + Error + IP
        exit;
    }
}

mein Problem: das POST Array is leer. Habs mir mal ganz oben ausgeben lassen, und stand nix drin, obwohl jquery die inputfelder per POST an das PHP File sendet. Ich denke, dass ich irgendwas bei der $ajax methode falsch gemacht habe, und es deshalb net funktioniert. bin am verzweifeln :) danke für jede Hilfe!

...zum Beitrag

Warum funktoniert dieser PHP Code nicht (PHPMailer)?

Ich wäre sehr dankbar!

<!DOCTYPE html>
<html lang="de">
<head>
  <title>PHP SMPT Mailer</title>
</head>
<body>
  <?php
  use PHPMailer\PHPMailer\PHPMailer;
  use PHPMailer\PHPMailer\Exception;
  
  require 'PHPMailer/src/Exception.php';
  require 'PHPMailer/src/PHPMailer.php';
  require 'PHPMailer/src/SMTP.php';
  if(isset($_POST["submit"])){
    $mail = new PHPMailer();
    $mail->isSMTP();
    $mail->Host = "smtp.gmail.com";
    $mail->SMTPAuth = true;
    $mail->Username = "email";
    $mail->Password = "ps";     
  
    $mail->setFrom("email", "n");
    $mail->addAddress("email", "n");
    $mail->addAttachment("Anhang.zip", "Test.zip");
    $mail->isHTML(true);
    $mail->Subject = "Test";
    $mail->Body = $_POST["msg"];
    if($mail->send()){
      echo "Deine Email wurde erfolgreich verschickt.";
    } else {
      echo "Es gab einen Fehler ".$mail->ErrorInfo;
    }
  }
  ?>
  <h1>PHP SMPT Mailer</h1>
  <form method="post" action="index.php">
    <textarea name="msg" placeholder="Nachricht"></textarea><br>
    <button type="submit" name="submit">Senden</button>
  </form>
</body>
</html>

...zum Beitrag

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?

...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

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

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

Wie sende ich Variablen von JavaScript nach Flask via jQuery?

Hallo,

ich bin in JavaScript/jQuery und auch Python/Flask noch ein ziemlicher Anfänger. Ich versuche gerade, einfach nur ein JSON-Objekt aus JavaScript in einem HTML-Template mit Flask anzuzeigen.

Hier mein Code:

Flask:

from flask import Flask,request, render_template

app = Flask(__name__)

@app.route("/")
def rofl():
  return render_template("test.html")

@app.route("/test", methods=['POST'])
def test():
  Namensliste = request.get_json(True)
  print(Namensliste)
  return render_template("rofl.html", Namensliste=Namensliste)

if __name__ == '__main__':
  app.run(port=5200)

test.html:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form action="#" method="post">
    <button type="button" onclick="JSONTest()"> Send UserInfo</button>
  </form>
</body>

rofl.html:

<head>
  <meta charset="UTF-8">
  <title>Titel</title>
</head>
<body>
  NamensListe: {{Namensliste}}
</body>

JavaScript-Datei:

var myJason = {
  "name1" : "Jens",
  "name2" : "Josef",
  "name3" : "Johannes"
}

function JSONTest() {
  var MyJason= JSON.stringify(myJason);
  console.log(MyJason)
  $.ajax({
    type: 'POST',
    url: '/test',
    data: MyJason,
    success: function(data) {
      console.log(data, "Rückmeldung1");
  }});
}

Wie mein Code eigentlich funktionieren soll ist: Ich rufe die Route "/" auf, drücke auf den Button: "JSONTest()" und meine Funktion sendet via jQuery mein JSON-Objekt an "/test". Dort wird das Objekt in Namensliste gespeichert und rofl.html mit der Namensliste darin aufgerufen.

Ich weiß, dass hier wahrscheinlich viele Grundlagenfehler drin sind, aber ich habe wirklich ewig lang gegooglet und finde einfach nicht, wie man es richtig macht.

Danke schon einmal für jede Idee.

...zum Beitrag

Addition in Javascript funktioniert nicht?

Ich versuche es zu erreichen, dass wenn ein HTML-Button gedrückt wird eine Javascript-Funktion aufgerufen wird. Diese soll die Variable Anzahl dann um 1 erhöhen. Beim 1. Mal funktioniert das auch und der voher definierte Wert (z.B. 7) erhöt sich um einen. Dann bleibt er aber bei 8.

var Anzahl = parseFloat(7);



function gedrueckt(Anzahl) {
    Anzahl += 1;
    console.log(Anzahl);
}

Wisst ihr woran das liegen könnte?

Ich hoffe auf antworten

Bohne47

...zum Beitrag

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));
}

...zum Beitrag

Wie kriegt man mit PHP raus welcher button gedrückt wurde?

Hallo,

Ich hab eine HTML-Tabelle erstellt die in der letzen Spalte submits hat. Meine Frage ist wie krieg ich raus ob so ein submit gedrückt wurde und in welcher Zeile sich das submit befindet

Mein PHP ansatz ist so

if(isset($_POST['button']){
 und ab hier komm ich nicht weiter wie krieg ich jetzt raus welche Zeile der Button gedrückt wurde 
    }

...zum Beitrag

Wie kann ich mehrere Buttons nacheinander ausgeben lassen?

Mein Programm soll mehrere Buttons nacheinander ausgeben können, ohne dass das vorherige Ergebnis überschrieben wird. Bisher wird aber immer die letzte Ausgabe überschrieben, wenn ich einen anderen Button drücke.

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class IchBinFrame extends JFrame implements ActionListener {
  private JButton button1 = new JButton("Ich");
  private JButton button2 = new JButton("Bin");
  private JButton button3 = new JButton("Wie");
  TextArea text = new TextArea(10, 10);

  public IchBinFrame() {
    this.setDefaultCloseOperation(EXIT_ON_CLOSE);
    init();
  }

  private void init() {
    JPanel panel1 =new JPanel();
    panel1.setLayout(new FlowLayout());

    // Verknüpfe alle Buttons mit dem Panel
    button1.addActionListener(this);
    button2.addActionListener(this);
    button3.addActionListener(this);
    panel1.add(button1);
    panel1.add(button2);
    panel1.add(button3);

    this.setLayout(new BorderLayout());
    this.add(panel1, BorderLayout.NORTH);
    this.add(text, BorderLayout.CENTER);
  }

  public void actionPerformed(ActionEvent evt) {
    Object src = evt.getSource();

    if (src == button1) {
      text.setText("Ich ");
    }
    else if (src == button2) {
      text.setText("Bin ");
    }
    else if (src == button3) {
      text.setText("Wie ");
    }
  }
}

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen