时间戳

首页 > 解决方案 > Javascript模板文字缺少变量值

javascript - Javascript模板文字缺少变量值

问题描述

我有一个简单的模板格式化程序，用户填写某些信息，我的程序输出一个定制的字母。

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% 的时间内有效。字符串文字输出正常，但变量 - 名称、年龄和食物并不总是出现？这是为什么？

标签： javascripthtmlweb

解决方案

该脚本在加载后获取 ,value和属性。nameagefood

<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，只需将其设为函数，以便每次都会调用它，然后它将获取新值。

例子：

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

推荐阅读