Javascript template literal missing variable values

I have a simple template formatting program, where a user fills in certain information and my program outputs a customized letter.

<form>

                <input type = "text" id = "name" placeholder = "name">
                <input type = 'text' id = 'food' placeholder = 'food'>
                <input type = 'text' id = 'age' placeholder = 'age'>

                <button id = 'submit' type = 'button' >Submit</button>
                <button id = 'resetting' type = 'reset'>Reset</button>
</form>            

<p id = "letter"></p>

<script>

                const name = document.getElementById('name')
                const food = document.getElementById('food')
                const age = document.getElementById('age')

                const submitBtton = document.getElementById('submit')
                const letter = document.getElementById('letter')

                function output(){

                    letter.textContent = 
                    `Happy Birthday ${name.value}! You're turning ${age.value}
                     This is a big accomplishment, we must celebrate. Are you free next week for 
                     some ${food.value}?`` 

                }
               submitBtton.addEventListener('click',output)

</script>

The above works just fine, however if everything else stays the same but I assign letter.textContent to another variable containing the template literal, the program only works about 30% of the time? The string literal outputs fine but the variables - name, age, and food don't always show up? Why is that:

<script>

                const paragraph =

                    `Happy Birthday ${name.value}! You're turning ${age.value}
                     This is a big accomplishment, we must celebrate. Are you free next week for 
                     some ${food.value}?`` 

                function output(){                   
                    letter.textContent = paragraph

                }

                submitBtton.addEventListener('click',output)
</script>