My html script wont work when im using setTimeout();-CodePudding

i am verry new to HTML and im trying to make a simple website. my code works fine but when i use the setTimeout(); funktion my code dosent relly work. The next function just wont start when im using this line: document.getElementById("demo").innerHTML = ("du har: " s " ved klabbar"); i think the veriabel dosent transfer to the next funktion. The problem is i dont know how to be able to use the veribl in the next functin. Iv trid googleing alot but i dont find any way to do whant i want to do. Theefor i turn to stack oveflow. here is all of my code:

    <!DOCTYPE html>
    <html>
    <body>
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    #loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    }

    /* Safari */
    @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
    </style>
    </head>
    <body>



    </body>
    </html>
    
    
    <h1>Exakt hur mycket ved har du hemma?</h1>

    <label for="quantity" id="lab">Skriv in mängd ved:</label>
    <input type="text" id="qua" name="quantity"> 
    <button onclick="myFunction()" id=bttn>räkna</button>
    <div id="loader"></div>
    <h1 id="txt">Räknar...</h1>

    <script>
    document.getElementById("loader").style.display = "none";
    document.getElementById("txt").style.display = "none";

    </script>

    <p id="demo"></p>


    <p id="demo"></p>

    <script>
    function myFunction() {
    var s= document.getElementById("qua").value;
    document.getElementById("lab").style.display = "none";
    document.getElementById("bttn").style.display = "none";
    document.getElementById("qua").style.display = "none";
    document.getElementById("loader").style.display = "block";
    document.getElementById("txt").style.display = "block";

    const myTimeout = setTimeout(myGreeting, 5000);
    }
    function myGreeting() {
    document.getElementById("demo").innerHTML = ("du har: " s " ved klabbar");

    document.getElementById("loader").style.display = "none";

    }
    </script>






    </body>
    </html>

does annyone know how to solv my problem please write. Thank you!

CodePudding user response：

you have to add "return s" at myFunction(). the syntax will be like this.

 function myFunction() {
        var s = document.getElementById("qua").value;
        document.getElementById("lab").style.display = "none";
        document.getElementById("bttn").style.display = "none";
        document.getElementById("qua").style.display = "none";
        document.getElementById("loader").style.display = "block";
        document.getElementById("txt").style.display = "block";
        const myTimeout = setTimeout(myGreeting, 5000);

        return s;
    }

and for myGreetings() function, you must call the myFunction() .

function myGreeting() {
            document.getElementById("demo").innerHTML = "du har: "   myFunction()  " ved klabbar"
            document.getElementById("loader").style.display = "none";
    }

i hope this will help you :)