Innerhtml wird nur beim Debuggen aktualisiert

dwedNJKD123 · 10. Juli 2022

Hallo zusammen,

ich habe gerade mal wieder nen neuen Anlauf genommen etwas in html/JS zu programmieren und blick nicht ganz weshalb er den Timer im Bild nur beim debuggen runterzählt.

Gibt's da ähnlich wie bei vba einen Befehl wie doevents oder was müsste ich hier ändern das er mir das auch anzeigt?

Grüße und vielen Dank!

Markus

HTML

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE-edge" />
    <meta name="VIEWPORT" content="WIDHT-DEVICE-WIDTH, initial-scale=1.0" />
    <title>DOCUMENT</title>
    <link rel="manifest" href="manifest.json" />
    <style type="text/css">
        .background-dark {
            background-color: #262626;
        }
        
        .center {
            display: flex;
            justify-content: center;
        }
        
        .margin-top {
            margin-top: 100px;
        }
        
        .timer {
            font-size: 60px;
            color: white;
            font-family: "Roboto", sans-serif;
        }
    </style>
</head>

<body class="background-dark">
    <div>
        <img src="img/menu.png" width="60" />
    </div>

    <div class="center margin-top">
        <img src="img/ei.png" width="60" />
    </div>

    <div class="center margin-top timer" id="timer">05 : 00</div>

    <div class="center margin-top timer">
        <img onclick="starttimer()" src="img/button.png" />
    </div>

    <script>
        function sleep(num) {
            let now = new Date();
            let stop = now.getTime() + num;
            while (true) {
                now = new Date();
                if (now.getTime() > stop) return;
            }
        }

        function starttimer() {
            let starttime = new Date().getTime();
            let fiveminutes = 1000 * 5;
            let endtime = starttime + fiveminutes;
            let timeleft = endtime - new Date().getTime();
            //console.log(timeleft);
            do {
                timeleft = endtime - new Date().getTime();
                let minutes = timeleft / (1000 * 60);
                minutes = Math.floor(minutes);

                let sek = (timeleft / 1000) % 60;
                sek = Math.round(sek);
                sek = ("0" + sek).slice(-2);
                let texto = "0" + minutes + " : " + sek; //sorgt dafür das bei den letzten 9 Sekundnen auch eine 0 davor steht
                document.getElementById("timer").innerHTML = texto;
                //delay(1000);
                //setTimeout(() => {}, 1000);
                sleep(1000);
                console.log("0" + minutes + " : " + sek);
            } while (timeleft > 0);
            document.getElementById("timer").innerHTML = "00 : 00";
            let alarm = new Audio("Alarm.m4a");
            alarm.play();
        }
    </script>

    <button onclick="myfunction()">Click me</button>

    <script>
        function myfunction() {
            document.getElementById("test").innerHTML = "Hallo Welt";
        }
    </script>
    <p class="center margin-top timer" id="test"></p>
</body>

</html>

Alles anzeigen

LukasHH · 11. Juli 2022

Ich habe das mal mit interval umgebaut. Ich denke, das wäre ein besserer Ansatz:

https://jsfiddle.net/LukasHH/tewkx72s/

dwedNJKD123 · 11. Juli 2022

Hi Lukas,

danke dir. Ich hatte das zuvor auch mit Intervall gemacht aber bin mit dem clearinterval nicht rausgekommen.

Kucke mir jetzt mal an deinem Beispiel an was mein Fehler war.

Vielen herzlichen Dank dir!

dwedNJKD123 · 11. Juli 2022

Blick's nur nicht warum das so nicht geht.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="VIEWPORT" content="WIDHT-DEVICE-WIDTH, initial-scale=1.0">
    <title>DOCUMENT</title>
    <link rel="manifest" href="manifest.json">
    <style type="text/css">
        .background-dark {
            background-color: #262626;
        }
        
        .center {
            display: flex;
            justify-content: center;
        }
        
        .margin-top {
            margin-top: 100px;
        }
        
        .timer {
            font-size: 60px;
            color: white;
            font-family: 'Roboto', sans-serif;
        }
    </style>
</head>

<body class="background-dark">
    <div>
        <img src="img/menu.png" width="60">
    </div>

    <div class="center margin-top">
        <img src="img/ei.png" width="60">
    </div>

    <div class="center margin-top timer" id="timer">05 : 00</div>

    <div class="center margin-top timer">
        <img onclick="starttimer()" src="img/button.png">
    </div>

    <script>
        function starttimer() {
            let starttime = new Date().getTime();
            let fiveminutes = 1000 * 5;
            let endtime = starttime + fiveminutes;

            let interval = setInterval(function() {
                let timeleft = endtime - new Date().getTime();

                if (timeleft > 0) {
                    let minutes = timeleft / (1000 * 60);
                    minutes = Math.floor(minutes);

                    let sek = (timeleft / 1000) % 60;
                    sek = Math.round(sek);
                    sek = ('0' + sek).slice(-2);
                    let texto = '0' + minutes + ' : ' + sek; //sorgt dafür das bei den letzten 9 Sekundnen auch eine 0 davor steht
                    document.getElementById("timer").innerHTML = texto;
                } else {
                    document.getElementById("timer").innerHTML = '00 : 00';
                    let alarm = new Audio('Alarm.m4a');
                    alarm.play();
                    //var IntervalId = setInterval(fname, 10000);
                    clearInterval(Interval);
                }
            }, 1000);

        }
    </script>

    <button onclick="myfunction()">Click me</button>

    <script>
        function myfunction() {
            document.getElementById("test").innerHTML = 'Hallo Welt'
        }
    </script>
    <p class="center margin-top timer" id="test"></p>

</body>

</html>

Alles anzeigen

dwedNJKD123 · 11. Juli 2022

Ah brauchte noch den Boolean. Blöd das es ohne den nicht geht. Finde er sollte doch mit dem clear rauskommen.

HTML

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE-edge" />
    <meta name="VIEWPORT" content="WIDHT-DEVICE-WIDTH, initial-scale=1.0" />
    <title>DOCUMENT</title>
    <link rel="manifest" href="manifest.json" />
    <style type="text/css">
        .background-dark {
            background-color: #262626;
        }
        
        .center {
            display: flex;
            justify-content: center;
        }
        
        .margin-top {
            margin-top: 100px;
        }
        
        .timer {
            font-size: 60px;
            color: white;
            font-family: "Roboto", sans-serif;
        }
    </style>
</head>

<body class="background-dark">
    <div>
        <img src="img/menu.png" width="60" />
    </div>

    <div class="center margin-top">
        <img src="img/ei.png" width="60" />
    </div>

    <div class="center margin-top timer" id="timer">05 : 00</div>

    <div class="center margin-top timer">
        <img onclick="starttimer()" src="img/button.png" />
    </div>

    <script>
        let timerstarted = false;

        function starttimer() {
            if (!timerstarted) {
                let starttime = new Date().getTime();
                let fiveminutes = 1000 * 5;
                let endtime = starttime + fiveminutes;

                let interval = setInterval(function() {
                    let timeleft = endtime - new Date().getTime();

                    if (timeleft > 0) {
                        let minutes = timeleft / (1000 * 60);
                        minutes = Math.floor(minutes);

                        let sek = (timeleft / 1000) % 60;
                        sek = Math.round(sek);
                        sek = ("0" + sek).slice(-2);
                        let texto = "0" + minutes + " : " + sek; //sorgt dafür das bei den letzten 9 Sekundnen auch eine 0 davor steht
                        document.getElementById("timer").innerHTML = texto;
                    } else {
                        document.getElementById("timer").innerHTML = "00 : 00";
                        let alarm = new Audio("Alarm.m4a");
                        alarm.play();
                        clearInterval(interval);
                    }
                }, 1000);
                timerstarted = true;
            }
        }
    </script>

    <button onclick="myfunction()">Click me</button>

    <script>
        function myfunction() {
            document.getElementById("test").innerHTML = "Hallo Welt";
        }
    </script>
    <p class="center margin-top timer" id="test"></p>
</body>

</html>

Alles anzeigen

dwedNJKD123 · 11. Juli 2022

Vielen lieben Dank!!!

Elwood · 11. Juli 2022

Zitat von dwedNJKD123

Vielen lieben Dank!!!

Geht auch hiermit: