Javascript 如何将输入的信息输入到预先编写的报价集中？

我有一个我认为很简单的问题，但我无法解决。我有一个文本框，人们可以在其中输入姓名，效果很好。但是，我需要输入到这个文本框中的文本在以后的表单中显示为一组预先编写的文本字符串。例如：

<label for="name">Name:</label> <input type="text" id="name" placeholder="Name Here" autofocus>
<hr>

我在网上跑来跑去尝试不同的东西，像这样；我现在明白了，虽然我把代码弄糊涂了。我自己也在努力学习代码，这显然很难

document.getElementById('name').addEventListener('click', function(){
quote: (item.quote).replace('NAME', $('name').val())
      });

---

我需要输入的名称出现在“报价”区域的“名称”部分。有人能帮忙吗？谢谢

这些是你需要的吗

$(document).ready(function(){
    var quoteSource=[

    {
        quote: "NAME got distracted by a butterfly. Once they re-focused on their task, they found:",
    },
  {
        quote:"NAME found absolutely nothing on their adventure.",
    }

];

document.getElementById('name').addEventListener('change',e=>{
  quoteSource.forEach(quotei=>quotei.quote = quotei.quote.replace('NAME',e.target.value));
});

});

var Name='John'；
var quoteSource=[{
引语：“NAME被一只蝴蝶分散了注意力。一旦他们专注于自己的任务，他们发现：”，
},
{
格言：“NAME在他们的冒险中完全没有发现任何东西。”，
}
]
document.getElementById（'name'）.addEventListener（'input'，function（）{
Name=this.value；
});
document.getElementById（'quote'）。addEventListener（'click'，function（）{
var rand=Math.floor（Math.random（）*quoteSource.length）；
console.clear（）；
console.log（quoteSource[rand].quote.replace（/NAME/g，NAME））；
});
名称：



添加报价
var quoteSource=[
{
引语：“NAME被一只蝴蝶分散了注意力。一旦他们专注于自己的任务，他们发现：”，
},
{
格言：“NAME在他们的冒险中完全没有发现任何东西。”，
}
];
$（文档）.ready（函数（）{
$（'#name'）。在（'keyup'，function（）上{
var quoteSourceNew=[]；
对于（quoteSource的var项目）{
quoteSourceNew.push({
quote:（item.quote）.replace（/NAME/，$（'#NAME'）.val（））
});
}
console.log（quoteSourceNew）；
});
});

名称：
您需要显示更多已尝试的代码。有很多很多不同的方法来做你想做的事情（当我写这篇文章时，我看到有人建议了其中的一种方法），所以你必须明确地朝着一个特定的方向走，然后才能选择一种。这在很大程度上取决于它的工作时间——引号是否一直显示，并且在键入名称时应该立即更改？你是否有人让用户表示他们已经输入完自己的名字，然后在后面显示引号？向我们展示你的尝试。Stackoverflow不是免费的代码编写服务。我们的目标是让你发布你解决自己问题的尝试，当你的代码无法正常工作时，其他人会提供帮助。很抱歉，这是我第一次发布，我不知道该怎么做！我将添加我以前尝试过的内容。我也考虑过同样的事情，但它只会工作一次）继续向数组中添加每个关键事件，而不删除以前的条目。每次映射新数组可能有意义
$(document).ready(function(){
    var quoteSource=[

    {
        quote: "NAME got distracted by a butterfly. Once they re-focused on their task, they found:",
    },
  {
        quote:"NAME found absolutely nothing on their adventure.",
    }

];

document.getElementById('name').addEventListener('change',e=>{
  quoteSource.forEach(quotei=>quotei.quote = quotei.quote.replace('NAME',e.target.value));
});

});