My html script won't work when im using setTimeout();

I am very new to HTML and I'm trying to make a simple website. My code works fine but when I use the setTimeout(); function, my code doesn't really work.

This function just won't start when I'm using this line:

document.getElementById("demo").innerHTML = ("du har: "+s+" ved klabbar");

I think the variable doesn't transfer to the next function. The problem is I don't know how to be able to use the variable in the next function. I've tried Googleing a lot but I didn't find any way to do want I want to do. Therefore I turn to stack overflow.

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 anyone know how to solve my problem? If so, please write. Thank you!

Solution

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 :)