В шаблоне Javascript буквально отсутствуют значения переменных

Question

У меня есть простая программа форматирования шаблонов, где пользователь вводит определенную информацию, а моя программа выводит персонализированное письмо.

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>

Вышеописанное работает просто отлично, однако, если все остальное остается прежним, но я присваиваю letter.textContent другой переменной, содержащей литерал шаблона:

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

программа работает только около 30% времени. Строковый литерал выводит нормально, но переменные - имя, возраст и еда не всегда отображаются? Почему это?

Answer 1

Этот скрипт получает value из name, age и food атрибутов после загрузки.

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

В Javascript строки передаются по значению :Так, например, когда вы вызываете name.value, вы просто копируете значение, и это была пустая строка "".

Так что, если вы хотите иметь и «обновленное paragraph значение» вне вашего output function, просто сделайте его функцией, чтобы он вызывался каждый раз, а затем получал новые значения.

Пример:

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