Javascript template literal missing variable values

Question

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

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

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

The above works just fine, however if everything else stays the same but I assign letter.textContent to another variable containing the template literal:

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

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?

You need to get the elements each time inside the `output` function. `document.getElementById('name')` and others will only run once the way you have it. — Mark, Dec 22 '19 at 00:06
What happens is that on page load the variables are being set and wont update when you click submit. You should write a function that updates the variable when any of the fields are updated. — rocky, Dec 22 '19 at 00:18

score 2 · Accepted Answer · answered Dec 22 '19 at 00:29

This script is getting value of name, age and food attributes once it's loaded.

<script>
  /**
   * This part will be executred once when the script is loaded
   *  At this phase your "name.value", "age.value", and "food.value" are empty
   * */
  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}?`

  // This function will be called everytime, and it will return the same result
  // because "paragraph" variable didn't change
  function output() {
    letter.textContent = paragraph

  }

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

In Javascript, strings pass by value: So, when you called name.value for example you just copied the value, and it was an empty string "".

So if you want to have and "updated paragraph value" outside your output function, just make it a function so it will be called every time and then it will get the new values.

Example:

<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 getParagraph() {
   return `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 = getParagraph()
  }
  submitBtton.addEventListener('click', output)
</script>

Javascript template literal missing variable values

1 Answers1