JavaScript warten, bis sich Variable ändern?

Ich habe ein Formular mit einem Submit-Button.

<button onClick={() => submitHandler("fromSubmitButton")}>Submit</button>

Die submitHandler Funktion sendet über einen Websocket eine Nachricht an den Server, ohne eine direkte Antwort zu bekommen, wie es mit async/await funktionieren würde:

socket.emit('email-submit', value)

Nach einiger Zeit kommt vom Server bzw. Websocket eine Nachricht:

        socket.on('badEmailORphone', function(msg) {
            setBadEmailORphone(msg)
        });

In der Zeit zwischen dem Klick auf Submit und setBadEmailORphone gesetzt wird, möchte ich einen Ladescreen einblenden.

Rein logisch müsste ich den Ladescreen ab Klick auf den Submit-Button bis setBadEmailORphone setzen, aber wie kann ich in JavaScript x Sache machen, bis sich eine Variable ändert?

Meine erste Theorie war:

Submit onClick:

while(!setBadEmailOrphone) setLoading(true) //Mit etwas Delay zwischen Durchläufen

2 Antworten

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, Informatik

31.10.2022, 18:05

Die Variable selbst kannst bzw. solltest du nicht überwachen.

Mit einem while-Loop wie es Funcional vorschlägt ist das völliger Quatsch, da bleibt die komplette Oberfläche hängen. Wenndann per setInterval, aber das ist keine Good Practice - Busy Waiting und auch Lazy Polling sollte man vermeiden.

Du kannst deinen Code zum Beenden der Ladeanimation einfach in den Setter schreiben, der die Variable setzt, oder in deinen Socket-Listener, der den Setter aufruft.

Beim Email-Submit: Ladeanimation einblenden

socket.emit('email-submit', value);
loadingAnimation.classList.remove('hidden');

Bei Empfangen der Antwort: Ladeanimation ausblenden

socket.on('badEmailORphone', msg => {
  loadingAnimation.classList.add('hidden');
  setBadEmailORphone(msg)
});

Woher ich das weiß:Studium / Ausbildung – Bachelor in Informatik 👨🏻‍🎓

Functional

31.10.2022, 17:49

"setBadEmailOrphone" ist ja wohl eine Funktion, die eine andere Variable (wahrscheinlich "badEmailOrphone"?) setzt. Sprich, du kannst diese Variable prüfen und anhand dieser einen Ladebildschirm anzeigen:

while (!badEmailOrphone) {
  // etwas anzeigen
}

Ansonsten bräuchte man da schon etwas mehr Kontext, z.B. ob ein Framework verwendet wird (React?), oder pures JavaScript etc.

Woher ich das weiß:Berufserfahrung – Inhaber einer App-Agentur & 15+ Jahre Programmiererfahrung

Ähnliche Beiträge

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

...zum Beitrag

HTML input in JavaScript-Variable?

Wenn ich in HTML ein form ausfülle und abschicke wie bekomme ich dann das eingegeben im Input in eine JavaScript Variable. Habe provisorisch mal das hier gemacht und komme nicht weiter. Danke für eure Hilfe :)

<!DOCTYPE html>

<html>

<head>

<title>Input to Variable</title>

var input = "Wie bekomme ich den eingegebenen input hier hin?"

</script>

</head>

<body>

<button>Submit</button>

</body>

</html>

...zum Beitrag

Onclick und inputfield?

Hallo zusammen,

Ich würde gerne eine demo-version von einem Loginformular erstellen.

Problem : ich habe zwei Inputfelder einmal type="email" und type="password"

Darunter befindet sich ein Button type="button". Ich möchte, wenn im Inputfield type="email" ein @ zeichen eingegeben wird, beziehungsweise die eingabe korrekt war ein onclick event startet sobald man auf den Button Einloggen drückt.. Leider klappt das nicht ganz. Da er das onclick Event auch auslöst, wenn man nur jeweils ein Zeichen in Password und email input setzt. Da ich nur value.length als if Abfrage genommen habe. Wie schaffe ich das das Event erst startet wenn man erkennt, dass das Inputfeld ein @ Zeichen enthält.

Type="submit" funktioniert nicht , da die Seite dann ja neu geladen wird und alle Änderungen vom onclick Event weg sind.

...zum Beitrag

Werte aus Datenbank anzeigen mit JS?

Hallo,

ich habe folgenden Code für mein Formular:

<form action="/message1" method="post">
  <div class="input">
    <input type="text" placeholder="Chat" id="input" name="input1">
  </div>
  <div class="send">
    <button type="submit" onclick="message();">Send</button>
  </div>
</form>

Nun noch das JS onclick-Event:

function message() {
  input = document.getElementById("input").value;
  count++;

  if (input == "") {
    alert("please type your message!");
  }
  else {
    if (count % 2 == 0) {
      let newDiv = document.createElement("div");
      newDiv.id = "divMessage";
      newDiv.style.display = "flex";
      newDiv.style.justifyContent = "flex-start";
      newDiv.style.margin = "45px";
      newDiv.style.backgroundColor = "#303032";
      newDiv.style.borderRadius = "10px";
      newDiv.style.padding = "10px";
      newDiv.style.marginTop = "80px";
      newDiv.style.color = "white";
      newDiv.style.marginBottom = "80px";
      newDiv.style.width = "120px";
      newDiv.innerHTML = input;

      let chatMessages = document.querySelector(".chat-messages");
      chatMessages.appendChild(newDiv);
    }

Und nun noch das Reinschreiben mit node.js in die MariaDB-Datenbank:

app.post('/message1', async (req, res) => {
  const input = req.body.input1;
  console.log(input);
  const conn = await pool.getConnection();
  await conn.query(`INSERT INTO test.handy (id, name) VALUES (2, '${input}')`);
  conn.release();
});

Nun möchte ich aber, das, was in die Datenbank geschrieben wurde, beim Aktualisieren der Seite immer noch im "newDiv" anzeigen. Wie geht das?

...zum Beitrag

JavaScript Await Async, Wo ist der Fehler?

function test1(zahl) {
    setTimeout(() => {
        return(zahl *2)
    }, 5000);
  }
async function test2() {
let x = await test1(2);
}
test2().then.alert(x)

Output: ReferenceError: x is not defined

Wollte das eigentlich so machen das die Funktion Test2 wartet bis die Funktion Test1 fertig ist, das sind jetzt zum Beispiel 5 Sekunden.

Und dann soll es x alerten.

Also möchte so tun als würde etwas länger dauern als geplant.

Könnten ja auch 10 Sekunden sein, die Hauptsache ist das wartet bis es die Antwort bekommen hat.

(Ich habe Async und Await nicht wirklich verstanden, und dachte mir das es so Funktioniert und ein gutes Beispiel ist)

...zum Beitrag

PHP Variable mit Button über javascript an Popup übergeben?

Hallo,
ich habe eine mit PHP dynamisch erstellte Tabelle zum anzeigen von Anträgen. In jeder Zeile meiner Tabelle gibt es einen Button zum öffnen eines Popups. An dieses Popup soll die ID des jeweiligen Antrags übergeben werden um alle Daten auszulesen.

Wie kann ich es schaffen, dass in einer dynamischen Tabelle (alle Button Namen gleich) jeder Button unterschieden wird, oder erkannt wird welchen Button ich gedrückt habe? Und wie kann ich die Variable aus PHP über javascript an das Popup übergeben?

Ich würde mich über jede Hilfe freuen, versuche es nun schon seit Tagen, komme aber zu keinem Ergebnis

...zum Beitrag

Daten aus MySQL auf Website darstellen?

Ich habe Daten in einer MySQL Datenbank, die ich gerne auf einer Website darstellen möchte, jeweils immer beim Klick auf einen Button (pro Button eine etwas andere Abfrage)

Eine entsprechende Abfrage dafür wird in JavaScript bereits erstellt.

Jetzt müssen die Daten nur noch abgerufen und eingefügt werden. - Nach allem, was ich gelesen habe, soll es sehr umständlich sein, MySQL in JavaScript zu verbinden.

Bisher habe ich probiert, die Abfrage per Cookie in PHP zu übertragen, dort die Daten abzufragen und zu echoen - das ganze mit einem getElementById().innervalue = ..., sodass immer die aktuelle Abfrage im DOM-Element ist, das passiert aber nur beim ersten Mal.

Das Abfragen der Daten in PHP und Zurückgeben an JS hat weder über einen Cookie, noch ein echo funktioniert.

...zum Beitrag

Discord JS Bot Button Geht nicht?

Meine index.js

const Discord = require('discord.js');
const { Intents } = Discord;
const client = new Discord.Client({
  intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MEMBERS, Intents.FLAGS.GUILD_MESSAGES]
});

const welcomeBot = require('./Commands/welcome-bot');
const Zaehlung = require('./Commands/Zaehlung');

const channelId = '1132493981956194381';
const targetChannelId = '1132493981771628610';
const verifiedRoleId = '1132493981306077190';

client.on('ready', async () => {
  console.log(`Logged in as ${client.user.tag}`);

  const targetChannel = await client.channels.fetch(targetChannelId);

  const button = new Discord.MessageButton()
    .setStyle('PRIMARY')
    .setLabel('Verifizieren')
    .setCustomId('verify');

  const row = new Discord.MessageActionRow().addComponents(button);

  await targetChannel.send({
    content: 'Klicke auf den Button, um dich zu verifizieren:',
    components: [row]
  });

  console.log('Code reached here.');
});

client.on('message', async (message) => {
  if (message.channel.id === channelId && !message.author.bot) {
    Zaehlung.processMessage(message, channelId);
  }
});

client.on('guildMemberAdd', async (member) => {
  welcomeBot(member);
});

client.once('ready', () => {
  console.log('Bot ist bereit.');
});

client.login('');

Meine AntiBot.js Was in ordner Commands ist

const Discord = require('discord.js');


module.exports = async (client) => {
    console.log('Bot ist bereit.');


    const targetChannelId = '1132493981771628610';
    const verifiedRoleId = '1132493981306077190';


    try {
        const targetChannel = await client.channels.fetch(targetChannelId);


        const button = new Discord.MessageButton()
            .setStyle('PRIMARY')
            .setLabel('Verifizieren')
            .setCustomId('verify');


        const row = new Discord.MessageActionRow().addComponents(button);


        await targetChannel.send({
            content: 'Klicke auf den Button, um dich zu verifizieren:',
            components: [row],
        });
    } catch (error) {
        console.error('Fehler beim Senden des Buttons:', error);
    }
};


client.on('interactionCreate', async (interaction) => {
    if (!interaction.isButton()) return;


    if (interaction.customId === 'verify' && interaction.user) {
        const verifiedRole = interaction.guild.roles.cache.get(verifiedRoleId);
        if (verifiedRole) {
            try {
                await interaction.member.roles.add(verifiedRole);
                await interaction.reply({
                    content: 'Du wurdest erfolgreich verifiziert!',
                    ephemeral: true,
                });
            } catch (error) {
                console.error('Fehler beim Verifizieren des Mitglieds:', error);
            }
        }
    }
});

Button Wird Bei Bot start erstellt aber wenn ich drauf klicke kommt diese fehler meldng Von Discord

Sehe mein Bild und in console gibt leider keine Fehler meldung Ich hoffe ihr könnt mir hilfen

...zum Beitrag

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

Warum funktioniert Flask und Websockets nicht?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, der Hintergrund der Datei output.html seine Farbe ändert und rot wird. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(__name__)
socketio = SocketIO(app)


@app.route('/')
def index():
    return render_template('index.html')


@socketio.on('connect')
def handle_connect():
    print("Client verbunden")


@socketio.on('disconnect')
def handle_disconnect():
    print("Client getrennt")


@socketio.on('change_background')
def change_background(color):
    print("Hintergrundfarbe ändern:", color)
    socketio.emit('background_changed', color)

HTML /CSS:

... body {
  background-color: black;
  margin: 0;
  padding: 0;
  text-align: center;
  overflow-x: hidden;
  overflow-y: hidden;
    -webkit-user-select: none; /* Für WebKit-Browser */
    -moz-user-select: none; /* Für Mozilla-basierte Browser */
    -ms-user-select: none; /* Für Microsoft Edge */
    user-select: none;
}  
</style>
</head>
<body>

JavaScript:

... // FLASK
    var socket = io();

    socket.on('connect', function() {
        console.log('Verbunden mit dem Server');
    });

    socket.on('disconnect', function() {
        console.log('Verbindung zum Server getrennt');
    });

    socket.on('background_changed', function(color) {
        console.log('Hintergrundfarbe geändert:', color);
        document.body.style.backgroundColor = color;
    });
</script>
</body>
</html>
    """
    with open("output.html", "w") as html_file:
        html_file.write(html_content)

    return "output.html"

Wenn ich den Code aber ausführe und "Luna" sage, ändert der Hintergrund nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

Discord Bot disconnect?

Ich will einen Discord-Bot mit Python programmieren, der connect Befehl funktioniert inzwischen, ich bin mir allerdings nicht sicher wie der disconnect Befehl lautet. Ich hab schon ein paar Sachen ausprobiert, die aber nicht funktioniert haben.

Vielen Dank

@bot.event
async def on_message(msg):
  if msg.content.lower() == "join":
    if (msg.author.voice):
      channel = msg.author.voice.channel
      await channel.connect()
    else:
      await msg.channel.send("Du befindest dich in keinem Sprachkanal!")
  if msg.content.lower() == "leave":

...zum Beitrag

CSS-onclick?

Hallo, ist es möglich, dass ich die Farbe von einem Button ändern kann, wenn ich draufklicke? Gibt es da so etwas wie "onclick", wie bei JavaScript?

...zum Beitrag

Wie kann man mit PHP/JavaScript eine neue Website erstellen?

Hey Freunde

wie kann man mit PHP/JavaScript eine neue Website direkt im Browser erstellen? Also man gibt zum Beispiel den Inhalt und Titel an, drückt auf "Submit" und es wird automatisch eine neue Website erstellt, genau mit den Eingaben! Halt so ähnlich wie in WordPress bei einem neuen Blog Eintrag!

Vielen Dank!

--Ergänzung--

Mein Gedanke wäre jetzt gewesen, ein Template zu erstellen. Dann eine weitere Seite mit einem Input Field, deren Input dann PHP Variablen zugewiesen werden. Beim Drücken Des Buttons wird dann die Template Datei kopiert, und der Input eingesetzt!

...zum Beitrag

discord.py Nur bestimmte Personen Befehl ausführen lassen?

Hallo,

habe mir gerade einen Discord Bot erstellt. Plötzlich mein erstes Problem mit diesem Code:

@client.event
@asyncio.coroutine
async def on_message(message):
    # we do not want the bot to reply to itself
    if message.author == client.user:
        return
if message.content.startswith('!Befehl'):
 if not message.author.id == "ID":
    await client.delete_message(message)
    msg = 'Hey, du darfst den Befehl nicht ausführen {0.author.mention}'.format(message)

    await client.send_message(message.channel, msg)

if message.author.id == "ID":
        if message.content.startswith('!Befehl'):
         reply = message.content
         await client.delete_message(message)
         reply = reply.replace('Befehl ', '')
         msg = '%s'.format(message) % reply
         await client.send_message(message.channel, msg)

Das Ergebnis ist, sobald jemand außer ich etwas schreibt, wird seine Nachricht sofort gelöscht. Dachte das könnte ich wie oben gezeigt abfangen mit

if message.content.startswith

Ich habe wohl irgendeinen Denkfehler, kann mir jemand helfen?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen