Empty value for adding 2 variables

<html>
<head>
<title>Variables</title>
    </head>
    
<body>
    
    <input id="num1" type="text">
    <input id="num2" type="text">
    <button  id="add"> add us</button>
    <script>
        var x = document.getElementById("num1").value
        var y = document.getElementById("num2").value
        
        var total = x + y
        
 document.getElementById ("add").onclick = function ()
 {
alert (total)
 }
 
 
    </script>
    </body>
    
</html>

Hello @alirahbe4560425377, welcome to the forums! Do you have a specific question about this?