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

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

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

Warum kann ich meinen HTML- Code nicht mit meinem Python- Code verbinden?

Hallo,

ich wollte meinen Python- Code mit meinem HTML- Code verbinden, damit, wenn mein Wake- Word "Luna" erkannt wurde, ein div in der Datei index.html seine Farbe ändert. Hier ist der Code:

Python:

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'luna_secret1984773249523'
socketio = SocketIO(app)


@socketio.on('connect')
def handle_connect():
    emit('message', {'data': 'Connected'})


@socketio.on('start_listening')
def start_listening():
    if detect_wake_word():
        emit('color_change', {'color': 'red'})


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

HTML /CSS:

... #color_div {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: green;
}    
</style>
</head>
<body>
<div id="color_div"></div>

JavaScript:

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

        socket.on('connect', function() {
            socket.emit('start_listening');
        });

        socket.on('color_change', function(msg) {
            document.getElementById('color_div').style.backgroundColor = msg.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 Div nicht seine Farbe. Woran liegt das?

Freundliche Grüsse

...zum Beitrag

Beim click auf einen button einen sound machen, JavaScript?

Hallo, ich habe einen Button erstellt undzwar:

<button class="button"> Bam </button>

Jetzt will ich dass bei jedem klick auf dem Button ein Sound abgespielt wird.

Wie soll ich das in JavaScript schreiben?

...zum Beitrag

Rechnung mit Javascript?

Vorweg: Ich bin noch ziemlich unerfahren, was JS betrifft

Ich habe einen Button auf einer HTML Seite. Ich würde es gerne so machen, dass, wenn man auf den Button drückt, einer Variable immer um eins steigt (Halt, dass der Variable 1 dazu gerechnet wird)

Beispiel: Button einmal gedrückt, Variable = 000.001

Button nochmal gedrückt, Variable = 000.002

Button 23 mal gedrückt, Variable = 000.023 usw..

Diese Variable soll dann auch auf dem Bildschirm angezeigt werden. Kann mir wer helfen?

Das ist momentan mein Code:

Danke im Voraus

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Rechnung</title>
    </head>
    <body>
        <button onclick="addition()">Drücke hier</button>
        <div id="Ergebnis">000.000</div>
    </body>
    <script>
        let Ergebnis

        function addition (){
            Ergebnis += 1;
        }
    </script>
</html>

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

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

Was möchtest Du wissen?

Deine Frage stellen