Javascript nach Button Klick auf andere Webseite leiten?

Moin!

Ich hab folgende Frage: Wie kann ich es realisieren, dass, wenn ich auf den Success Button klicke, ich dann auf eine andere Seite geleitet werde? Der Link dahin ist auch ein Teil dynamischer PHP Code. Ihr werdet es sehen :)

Hier mein Code:

"use strict";!function(){const n=document.querySelector(".suspend-user"),t=(n&&(n.onclick=function(){Swal.fire({title:"Bist du sicher?",text:"Du kannst diesen Benutzer nicht wiederherstellen!",icon:"warning",showCancelButton:!0,confirmButtonText:"Fortsetzen",cancelButtonText:"Abbrechen",customClass:{confirmButton:"btn btn-primary me-2",cancelButton:"btn btn-label-secondary", text:"Abrechen"},buttonsStyling:!1}).then(function(n){n.value?Swal.fire({icon:"success",title:"Benutzer gelöscht!",text:"Der Benutzer wurde gelöscht.",customClass:{confirmButton:"btn btn-success"}}):n.dismiss===Swal.DismissReason.cancel&&Swal.fire({title:"Vorgang abgebrochen",text:"Der Benutzer wurde nicht gelöscht.",icon:"error",customClass:{confirmButton:"btn btn-success"}})})}),document.querySelectorAll(".cancel-subscription"));t&&t.forEach(n=>{n.onclick=function(){Swal.fire({text:"Are you sure you would like to cancel your subscription?",icon:"warning",showCancelButton:!0,confirmButtonText:"Yes",customClass:{confirmButton:"btn btn-primary me-2",cancelButton:"btn btn-label-secondary"},buttonsStyling:!1}).then(function(n){n.value?Swal.fire({icon:"success",title:"Unsubscribed!",text:"Your subscription cancelled successfully.",customClass:{confirmButton:"btn btn-success"}}):n.dismiss===Swal.DismissReason.cancel&&Swal.fire({title:"Cancelled",text:"Unsubscription Cancelled!!",icon:"error",customClass:{confirmButton:"btn btn-success"}})})}})}();

Und ich möchte gern auf folgende Seite weitergeleitet werden:

index.php?page=deleteUser&&delete_id=<?=$user_data['user_id']?>

Könntet ihr mir hier behilflich sein? Wenn ich auf den Button "Fortsetzen" klicke erscheint noch eine Bestätigungsnachricht, wenn man dann auf "OK" klickt, soll der Redirect ausgeführt werden.

Danke euch im Vorraus!

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

fluffiknuffi2

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

29.04.2022, 11:36

window.location.href auf die neue URL setzen.

Woher ich das weiß:Berufserfahrung – Studium + Berufserfahrung

speedwanted55

Fragesteller

29.04.2022, 11:40

Danke dir!

Aber wo muss ich das hinschreiben, damit es nach den Klicken auf den Success Button ausgeführt wird?

regex9

29.04.2022, 13:32

@speedwanted55

Die fire-Methode hat offensichtlich einen Callback (vgl. mit dem ersten Vorkommen in deinem JavaScript-Code).

Swal.fire({ /* ... */ }).then(function(n) {
  // button was clicked ...
})

speedwanted55

Fragesteller

29.04.2022, 13:34

@regex9

Stimmt! Danke für den Tipp!

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Technologie

29.04.2022, 11:37

entweder so

https://www.codegrepper.com/code-examples/javascript/button+onclick+location.href

oder so

https://www.w3schools.com/jsref/event_onclick.asp

mit funktion

https://www.w3schools.com/jsref/prop_loc_href.asp

und dann noch ein

https://www.w3schools.com/jsref/met_win_confirm.asp

Ähnliche Fragen

Element-Inhalt abrufen?

Ich programmiere seit einiger Zeit mit HTML CSS und JS und habe mit Getboostrap eine Website erstmals geschrieben, wo mein Ziel es war dass man dort einen Key eingeben kann womit man dann auf eine weitere HTML Datei umgeleitet wird die den Namen hat. Damit meine ich das wenn man als Key hallo123 eingibt das man auf die Seite Hallo.html umgeleitet wird. Ist zwar nicht gerade so sicher aber es reicht für den Start aus. Ich habe jetzt aber das Problem das ich bei "document.getElementById()" nicht dem Inhalt aus dem Eingabe Feld erhalte wodurch man egal was man eingibt zu null.html umgeleitet wird. Weiß jemand wie ich das Behebe?

<!doctype html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Mit Projekt-Key herunterladen | LSprojects</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
body {
    background-color: rgb(26, 24, 24);
    color: white;
}
.btn  {
    background-color: rgb(161, 156, 156);
    color: white;
}
</style>
<script>
    function submit() {
        let code = document.getElementById(codeinput);
        window.location = "/codes/" + code + ".html"
    }
</script>


<body>
    <div class="vertical-center horizontal-center">
        <h1>Geben sie den Key hier ein:</h1>
        <div class="input-group mb-3 dark-backround">
            <button href="submit()" onclick="submit()" class="btn btn-outline-secondary" type="button"
                id="load">Laden</button>
            <input type="text" class="form-control" placeholder="Projekt-Key" id="codeinput" aria-label=""
                aria-describedby="load">
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
        crossorigin="anonymous"></script>
</body>


</html>

...zur Frage

Wie update ich den HTML Text?

Ich bin in der Programmier AG meiner Schule und soll es jetzt so machen, dass der Fehler Text sobald ich einen Fehler mache geupdated wird und die Anzahl der Fehler aktuell ist. Gerade aktualisiert es nur wenn ich etwas richtiges eingebe.

Der Code lautet wie folgt:

<html>
<head>
<meta charset="utf-8">
<title>Kopfrechnen-Quiz</title>
<script>
var richtigeAntwort;
var aktuelleNummer = 1;
var Anzahlfalsch = 0;
function wennGeladen() {
stelleAufgabe();
aktuelleNummer = 1;
//alert(Math.floor( Math.random() * 100 ));
Anzahlfalsch = 0;
}
function pruefeAntwort() {
event.preventDefault();
if (document.getElementById("antwort").value == richtigeAntwort) { 
alert("Richtig!");
aktuelleNummer++;
stelleAufgabe();
}
else {
alert ("Leider falsch. Bitte nochmal versuchen");
refresh ("falsch")
Anzahlfalsch++;
}
}
function stelleAufgabe() {
var zahl1 = Math.floor(Math.random()*100);
var zahl2 = Math.floor(Math.random()*100);
richtigeAntwort = zahl1 + zahl2;
document.getElementById("falsch").innerHTML = "Anzahl der Fehler: " + Anzahlfalsch;
document.getElementById("nummer").innerHTML = "Aufgabe Nummer: " + aktuelleNummer;
document.getElementById("aufgabe").innerHTML = zahl1 + "+" + zahl2 + ":";
}
</script>
</head>
<body onload="wennGeladen()">
<h1>Kopfrechnen-Quiz</h1>
<h2 id="nummer"></h2>
<h3 id="falsch"></h3>
Bitte berechne: <span id="aufgabe"></span>
<form onSubmit="pruefeAntwort()">
<input id="antwort">
</form>
</body>
</html>

es wäre nett, wenn mir jemand helfen könnte.

...zur Frage

HTML und JS Seitentitel alle 0.2 Sekunden ändern?

Ich bin gerade dabei, eine Seite zu erstellen, die die Möglichkeit hat auf Knopfdruck auf einen Button den Title zu ändern. Das habe ich geschafft, nur wenn ich diesen Titel alle X Sekunden ändern möchte, wie mache ich das?

Ich bedanke mich für verstandlichen Code!

HTML:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="UTF-8" />
        <title>Title Changer</title>
        <link rel="stylesheet" href="./styles.css" />
        
    </head>


    <body>
        <script src="./app.js"></script>
        Click the button below to make the title go cRaZyYyYyY!
        <button onclick="makeitCrazy()">Make it cRaZyYyYyY</button>
    </body>
</html>

CSS:

body{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
}

JavaScript:

async function makeitCrazy(){
    while(true){
        document.title = 'One';
        await (1);
        document.title = 'Two';
    
    }
    
}

...zur Frage

Daten senden mit fetch?

Hallo,

ich will mit der Fetch API Daten senden und abrufen. Aber wen ich dies tue, kommt ein Fehler:

POST http://127.0.0.1:5500/api net::ERR_ABORTED 405 (Method Not Allowed)

Ich weiß gar nicht, wie ich diesen Fehler beheben soll. Ich habe dazu auch nichts hilfreiches bis jetzt gefunden.

Mein Ziel ist es, Daten mit Javascript an einen Server (für den Anfang an localhost) zu senden und diese dann von einem weiteren localhost-Server abrufen.

Das ist meine Index.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>
</head>
<body>
    <section id="control-center">
        <button id="get-btn">Get Data</button>
        <button id="post-btn" onclick="test()">Post Data</button>
        <script>
            function test(){
                const data = {"name": "somename"}
                const options = {
                    method: "POST",
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data)
                }
                fetch('/api', options)
            }
        </script>
    </section>
</body>
</html>

Und das ist meine app.js:

const express = require('express')
const app = express()
app.listen(3000, () => console.log('3000'))
app.use(express.static('public'))

app.post('/api', (req, res) => {
    console.log(req)
})

Wenn jemand eine bessere Methode hat, Daten an einen Server zu senden, dann würde ich diese auch mal gerne probieren.

...zur Frage

JS - Warum funktioniert der Button nicht Richtig?

Ich wollte ein simples Spiel mit JS programmieren und wollte einen Refresh des Bildschirms einfügen. An sich funktioniert das auch, jedoch reagiert der Button nicht immer. Je schneller der Refresh erfolgt, desto schlechter Funktioniert der Button. Kann mir da vielleicht jemand helfen?

<!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 href="miner.css" rel="stylesheet">
    <script src="miner.js"></script>
</head>
<body>
    <div class="monitor" id="monitor">
        <h1>Mine Tycoon</h1>
        <div>Mines: <font id="minesCounter">0</font></div><br>
        <div id="buyMineButton">
            <p class="button" onclick="buyMine()">Buy mine Cost: <font id="minesPrice">1</font></p>
        </div>
    </div>
</body>
</html>

body{
    background-color: #393939;
    color: #ffffff;
}


h1{
    text-align: center;
}


.button{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid red;
    outline-offset: 4px;
    text-align: center;
}
.buttonGreen{
    height: auto;
    width: 180px;
    border-radius: 15px;
    outline: 2px solid green;
    outline-offset: 4px;
    text-align: center;
}

var money = 100;


var mines = 0;
var minesPrice = 1;
var miners = 0;


var coal = 0;
var copper = 0;
var iron = 0;
var cobalt = 0;
var gold = 0;
var platinum = 0;
var diamond = 0;


var reload = 10;


function buyMine(){
    mines++;
    money -= minesPrice;
    minesPrice = minesPrice*2;
}


function loop(){
    
        setInterval(function(){
            refreshScreen();
        },1000/reload)
    
}


function refreshScreen(){
    minesCounter.innerHTML = mines;
    if(money < minesPrice){
        document.getElementById("buyMineButton").innerHTML = "<p class='button'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }else{
        document.getElementById("buyMineButton").innerHTML = "<p class='buttonGreen' onclick='buyMine()'>Buy mine Cost: <font id='minesPrice'></font></p>"
    }
    document.getElementById("minesPrice").innerHTML = minesPrice;
}


loop();

...zur Frage

Html und JavaScript Code?

Hallo zusammen,

ich möchte für eine Webseite ein Widget erstellen, das die nächsten Veranstaltungen anzeigen soll. Diese werden in dem Code dann hinzugefügt. Auf dem Widget welches auf der Webseite angezeigt wird dürfen aber immer nur zwei Veranstaltungen gleichzeitig dargestellt werden. Das Datum der Veranstaltungen soll immer mit dem aktuellen Datum verglichen werden. Ist das Datum der ganz oben also an erster Stelle stehenden Veranstaltung seit einem Tag überschritten soll diese gesamte Veranstaltung ausgeblendet werden. Die darunter stehende also an zweiter Stelle befindliche Veranstaltung rückt dann an erste Stelle und an Zweite Stelle rückt dann eine bisher noch nicht angezeigt Veranstaltung. Immer so das halt nur zwei Veranstaltungen gleichzeitig angezeigt werden. Das Datum vergleichen und ein/ausblenden und neu ordnen der Veranstaltungen funktioniert bei meinem Code noch nicht so ganz. Kann mir dabei bitte jemand helfen. Wenn das möglich ist am besten den Code so anpassen damit diese Funktionen so funktionieren.

Mit freundlichen Grüßen

Tim

Hier ist mein aktueller Code davon:

<!DOCTYPE html>

<html>

<head>

<style>

/* Stil für das Widget */

.event-widget {

border: 1px solid #ccc;

padding: 6px;

max-width: 215px; /* Breiteres Widget */

background-color: #f7f7f7;

}

/* Stil für die Hellschwarze Hauptüberschrift */

.event-widget h3 {

color: #454545; /* Hellschwarz */

font-size: 18px; /* Kleinere Schriftgröße für die Hauptüberschrift */

text-align: center; /* Zentriert den Text */

margin: 0; /* Entfernt den oberen und unteren Abstand der Überschrift */

}

/* Stil für die einzelnen Veranstaltungen */

.event-widget ul li {

margin-bottom: 10px; /* Fügt einen Abstand zwischen den Veranstaltungen hinzu */

padding-bottom: 5px; /* Fügt zusätzlichen Abstand zwischen dem Trennungsstrich und dem Text hinzu */

}

/* Fügt einen Trennungsstrich zwischen den Veranstaltungen hinzu */

.event-item + .event-item {

border-top: 1px solid #ccc;

margin-top: 10px;

padding-top: 5px;

}

/* Stil für die übrigen Texte */

.event-title {

color: #8B0000; /* Weinrot */

font-size: 15px; /* Kleinere Schriftgröße für den übrigen Text */

}

/* Stil für die Uhrzeit */

.event-time {

font-weight: bold;

font-size: 12px; /* Kleinere Schriftgröße */

}

</style>

</head>

<body>

<h3>Nächste Veranstaltungen</h3>

<strong class="event-title">Seniorentreff mit Kaffee und Kuchen:</strong>

<br>

Datum: 2023-11-09

<br>

Zeit: 14:30 - 16:00 Uhr

<br>

Ort: Feuerwehrhaus

</li>

<strong class="event-title">Volkstrauertag:</strong>

<br>

Datum: 2023-11-19

<br>

Zeit: 15:00 - 16:00 Uhr

<br>

Ort: Am Ehrenmal Ahrenshöft

</li>

<strong class="event-title">Seniorentreff mit Kaffee und Kuchen:</strong>

<br>

Datum: 2023-12-14

<br>

Zeit: 14:30 - 16:00 Uhr

<br>

Ort: Feuerwehrhaus

</li>

</ul>

</div>

function updateEvents() {

const eventList = document.getElementById("event-list");

const events = eventList.getElementsByClassName("event-item");

const currentDate = new Date();

const displayedEvents = 2;

for (let i = 0; i < events.length; i++) {

const eventDateString = events[i].querySelector("br:nth-child(2)").textContent.replace("Datum: ", "");

const eventDate = new Date(eventDateString);

// Überprüfe, ob das Datum um einen Tag überschritten ist

if (eventDate < currentDate) {

events[i].style.display = "none"; // Verstecke vergangene Veranstaltungen

} else {

events[i].style.display = "block"; // Zeige zukünftige Veranstaltungen

}

// Überprüfe, ob die maximale Anzahl von angezeigten Veranstaltungen erreicht ist

if (i >= displayedEvents) {

events[i].style.display = "none";

}

// Aktualisiere die Veranstaltungen beim Laden der Seite

document.addEventListener("DOMContentLoaded", updateEvents);

</script>

</body>

</html>

...zur Frage

HTML/Javscript Euro umrechnen?

Hallo!
Ich bin momentan am verzweifeln.

Ich probiere nun schon seit 1 Stunde einen Euro Umrechner mit Javascript zu progamieren.

Zuerst hat es auch ganz gut geklappt aber als ich mehrere gleichzeitig umrechnen wollte muss ich wohl einen Fehler gemacht haben.

Kennt sich irgend jemand aus und weiß was ich falsch gemacht habe?

Ich bedanke mich schon mal im Voraus :)

Hier der Code für den Rechner der Euro in mehrere Währungen Umrechnen soll:

<html>
<head><center>
<title>Umrechnung Euro - ? </title>
<script language="JavaScript">
function Umrechnung(){



    var EUROBetrag, DMBetrag, DOLLARBetrag, KRONENBetrag;

     EUROBetrag = document.Umrechnung.EURO.value;
     DMBetrag = document.Umrechnung.DM.value;
     DOLLARBetrag = document.Umrechnung.DOLLAR.value;
     KRONENBetrag = document.Umrechnung.KRONEN.value;



    EUROBetrag = DMBetrag / 1.95583;
    EUROBetrag = DOLLARBetrag / 1,13370;
    EUROBetrag = KRONENBetrag / 7,44;

  document.Umrechnung.DM.value=DMBetrag;
  document.Umrechnung.DOLLAR.value=DOLLARBetrag;
  document.Umrechnung.KRONEN.value=KRONENBetrag;

}// Ende
</script>
</center>
</head>

<body><center>
  <br>
  Wir wollen Euro Beträge umrechnen.
<br>
<br>
<form   name="Umrechnung">

EURO   <input type="text"  size="20"  name="Euro">
<br>
<p>
<input  type="button" value="Rechne um" onclick="Umrechnung()">
<p>
DM  <input type="text"  size="20"  name="DM">
DOLLAR  <input type="text"  size="20"  name="DOLLAR">
KRONEN <input type="text"  size="20"  name="KRONEN">

<br>

</form>
</center>
</body>
</html>

Und hier der Code für den Rechner der DM in Euro umrechnen soll und funkioniert:

<html>
<head><center>
<title>Umrechnung Euro - DM </title>
<script language="JavaScript">
function EuroUmrechnung(){



    var DMBetrag, EUROBetrag;

     DMBetrag = document.Umrechnung.DM.value;



    EUROBetrag = DMBetrag / 1.95583;

  document.Umrechnung.EURO.value=EUROBetrag;


}// Ende der Funktion
</script>
</center>
</head>

<body><center>
  <br>
  Wir wollen DM- Beträge in EURO umrechnen.
<br>
<br>
<form   name="Umrechnung">

DM   <input type="text"  size="10"  name="DM">

<br>
<p>
<input  type="button" value="Rechne um" onclick="EuroUmrechnung()">

<p>
EURO   <input type="text"  size="20"  name="EURO">

</form>
</center>
</body>
</html>

...zur Frage

Einkaufsliste JavaScript mehrere Einträge?

Hallo, ich bin noch Anfänger im Programmieren und hätte eine Frage: wie kann ich mehrere Einträge in die UL packen? Bis jetzt geht nur ein Eintrag. Und wenn ich einen neuen hinzufügen will dann wird der alte gelöscht.

Tut mir leid für die dummen variablen Namen xD

<!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>
    
</head>
<body>
    <input type="text" name="kaufen" id="test">
    <button id="btn">Hinzufügen</button>
    <ul id="list"></ul>
<script>
const hinzufügenbtn = document.getElementById("btn");
 hinzufügenbtn.addEventListener("click", function(){
   const add =  document.getElementsByName("kaufen")[0].value;
    const  tt = document.getElementById("list").innerHTML = add;
 })
</script>
</body>
</html>

...zur Frage

Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

...zur Frage

Könnt ihr mir bei folgendem JavaScript Problem helfen?

programmieren ist mein jüngstes und schwierigstes hobby, ich würd mich freuen wenn ich dieses Problem lösen könnte. Ich möchte, dass jeder Name, der im Eingabefeld eingegeben wird unten erscheint.

danke im voraus.

https://jsfiddle.net/6wcf9j5e/

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form class="guestList" action="index.html" method="post">
      <label>Your Name: </label>
      <input type="text" name="" value="..." id="nameInput;" />
      <input type="submit" name="" value="submit" onclick="pushArray();"/>
    </form>
    <div id="addName"></div>
    <script type="text/javascript" src="dailyrepead.js">
    </script>
  </body>
</html>

JS:

var guestList = [];
var count = document.getElementById("nameInput");
function pushArray() {
  guestList.push(count);
  document.getElementById("addName").innerHTML += guestList[count] +"<br>";
}

...zur Frage

jQuery Eingabe unten einfügen?

Ich soll einen Code schreiben, der die Eingabe nach dem drücken des Buttons unten auflistet (wie im Bild gezeigt). Kann mir jemand sagen was ich falsch gemacht habe?

Hier mein Code:

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Praktikum Webanwendungen 1</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>
    <style>
        h1{
            font-size: 50px;
        }


        div{
            float: left;
            margin: 10px;
        }


        .aufgabe{
            font-weight: bold;
            font-size: larger;
        }
       
        .liste{
            border: solid black;
        }
    </style>
    <body>
        <h1>Todo Liste</h1>
        <div class="aufgabe">Aufgabe:</div>
        <div class="eingabe"> <input type="text"> </div>
        <div class="erstellen"> <input type="submit" value="Erstellen"> </div>
        <br><br>
        <p class="liste"></p>
    </body>
    <script>
        $(document).ready(function(){
            $(".erstellen").click(function(){
                $("input").appendTo(".liste");
            });
        });
    </script>
  </body>
</html>

...zur Frage

Html und Javascritp Gif ein und ausblenden lassen?

Ich möchte mit Html und Javascript ein Gif per button einfügen lassen. Ich habe schon einiges ausprobiert aber es funktioniert nicht, ich würde mich gerne über Hilfe freuen. (Die Aufgabe war es einen Kopfrechentrainer zu programmieren, als Zusatz ein Bild einfügen,...)

<html>
	<head>
		<title> Kopfrechentrainer Ultimate </title>
	</head>
	<body>
<script language=javascript>


{	var a;
	var b;
	var c;
	var d;
	var f=0;
	var r=0;
	var x;
}	
	function random()
	
{
	a=Math.floor(Math.random()*90)+10;
	document.rechnen.eingabe1.value=a;
	
	b=Math.floor(Math.random()*9)+1;
	document.rechnen.eingabe2.value=b;	
}


	function kontrolle()
{
	c=document.rechnen.vergleich.value;
	if(a*b==c){r++;document.rechnen.richtig.value=""+r}
	if(a*b!=c){f++;document.rechnen.falsch.value=""+f}


	if(r+f==50)
{
	if(r==0){alert('soos')}
	else if(0<r<=10){alert('saas')}
	else if(10<r<=20){alert('sees')}
	else if(20<r<=30){alert('siis')}
	else if(30<r<=40){alert('suus')}
	else if(40<r<=50){alert('fiif')}
}


}
	function zurück()
{
	document.rechnen.richtig.value=""
	document.rechnen.falsch.value=""
}


	function shutdown()
{
	window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
}


	function bka()
{
   	var audio = new Audio('sirene.mp3');
   	audio.play();


	document.getElementById("bkaf").style.display="none";
}


</script>








	
		<font color ="red"> <h2 align = center>  Kopfrechentrainer Ultimate </h2> </font>
		<br>
		<p align = center> <b>  
		Du kannst hier Multiplikationsaufgaben üben. <br>
		Beim Klicken auf den Button werden dir dir nacheinander 50 Aufgaben gestellt.
		</p> </b>
		<br>
		<br>
		<h1 align = center> Bereit? </h1>
		<br>
	<form name="rechnen">
		<input type=button value="Start" onclick=random()>
		<br> <br>
		<INPUT type=text name=eingabe1 value=""> *
		<INPUT type=text name=eingabe2 value=""> =
		<INPUT type=text name=vergleich value="">
		
			<input type=button value="Kontrolle" onclick=kontrolle()>
			<input type=button value="Zurücksetzen" onclick=zurück()>
				
		<br> <br> 
	<p align = center> <b>
		Richtig gelöst Falsch gelöst
	</b> 
		<br> <br>
		<INPUT type=text name=richtig value=""> 
		<INPUT type=text name=falsch value="">
	<br> <br>
		<input type=button value="shutdown" onclick=shutdown()>
	<br> <br>
		<input type=button value="BKA Modus" onclick=bka()>
		
		<audio autoplay>
 		 <source src="sirene.mp3" type="audio/mpeg">
		</audio>
		<br>
	<div id="bkaf">
	<img id="blaulicht" src="blaulicht.gif">	
	</div>


	</form>










	</body>
</html>

...zur Frage

Ajax holt Daten, JQUERY erkennt ID nicht?

Hallo

Ich hoffe, dass Ihr mir auf die Sprünge helfen könnt.

Mittels Button wird per JQUERY Ajax aufgerufen. Von der Datenbank werden Bilder ausgegeben.

Nun habe ich vorher schon einige Funktion gebastelt, die mir erlauben das Bild zu bearbeiten, z.B. mittels keyUP die Positionen vom Bild zu verändern, Größe und Co.

Da es mehrere Bilder sind, wird in der PHP Datei eine For-schleife erstellt, wo die Inputs und Buttons mit classen (und Id->testzweck) versehen werden (echo-ausgabe).

Nun lassen sich weder die Buttons noch mit Inputs steuern, weder mit this bzw Klassen noch mit der Id.

Hat vielleicht jemand eine Idee woran es liegen könnte?

      $('#load_image').click( function (event) {
        event.preventDefault();
        $.ajax({
          type: 'POST',
          url: 'ajax/home.php',
          data: $(this).serialize(),
          success: function (title_image) {
            $('#title_image').html(title_image);
          }

        });
      });



<button id="load_image" type="submit" name="load_image" class="btn btn-primary start"> <span><i class="glyphicon glyphicon-picture"></i>Bilder Laden</span> </button>
        <div id="title_image" class="margin">
          <!-- DIVS vom PHP AJAX -->
        </div>

Ajax PHP datei

if (!$title->execute()) {
  echo "Fehler";
} else {
  $name = array();
  while ($data = $title->fetch()) {
    $name[] = $data['name'];
  }
$count = count($name);
  for ($i=0; $i < $count; $i++) {
    echo $name[$i];

/* DIVS */
    echo '    <input type="number" id="image_horizontal_edit1" value="" placeholder="Horizontal">';
    echo '    <input type="number" id="image_vertical_edit1" value="" placeholder="Vertical"><br><br>';
    echo '    <input type="number" id="image_zoom_edit1" value="" placeholder="Zoom"><br><br>';

...zur Frage

Symfony authentication funktioniert nicht?

Guten Tag,

für mein Symfony-Projekt habe ich beschlossen, das von Symfony miglieferter Security Bundle für die User-Authentifikation zu verwenden.

Ich habe mich nach folgenden Dokuemntationen durchgearbeitet:
https://symfony.com/doc/current/security.html
https://symfony.com/doc/current/security/form_login_setup.html
https://symfony.com/doc/current/testing.html#doctrine-fixtures

Hier meine Dateien:

SecurityController: https://hastebin.com/tiruyoteco.php

LoginAuth. https://hastebin.com/abewapanod.php

Dummy User: https://hastebin.com/epemuqihoz.php

Ich habe nun einen SecurityController, einen LoginFormAuthenticator, eine login.html.twig und eine security.yaml.

All diese Sachen sind auto_generiert und wurden von mir nicht verändert. Ferner habe ich einen dummy User angelegt, welcher den Benutzernamen "Test" und das Passwort "Test" hat.

Möchte ich mich jetzt testweise einloggen, lädt die Seite einfach neu, ohne dass ich einen Error oder einen Success bekomme.

Hier der Code der login.html.twig [2]

{% extends 'base.html.twig' %}

{% block title %}Log in!{% endblock %}
  {% block home %}active{% endblock %}
{% block stylesheets %}
    <link href="{{ asset("css/login.css") }}" rel="stylesheet">
{% endblock %}

{% block body %}

    <div class="container">
        <form class="text-light" method="post">
            {% if error %}
                <div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
            {% endif %}

            {% if app.user %}
                <div class="mb-3">
                    You are logged in as {{ app.user.username }}, <a href="{{ path('app_logout') }}">Logout</a>
                </div>
            {% endif %}
            <h2 class="text-center mb-5">Login</h2>
            <div class="mb-3">
                <input type="text" class="form-control text-light form-control-lg " placeholder="Username" id="exampleInputEmail1" value="{{ last_username }}" name="username" aria-describedby="emailHelp" required>
            </div>
            <div class="mb-3">
                <input type="password" name="password" placeholder="Password" class="form-control text-light form-control-lg " id="exampleInputPassword1" required>
            </div>
            <div class="d-flex justify-content-between">
                <button type="submit" class="btn btn-outline-success">Einloggen</button>
                <a href="./register" class="btn btn-outline-primary">Registrieren</a>
            </div>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
        </form>
    </div>
{% endblock %}

meine Frage ist nun, an welchen Stellen ich nach dem fehler suchen soll oder ob ihr schon eine erkennt.

Vielen Dank.

mfg. Anton

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen