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

Question

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

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

    $(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('click', function(){
quote: (item.quote).replace('NAME', $('name').val())
      });

我需要输入的名称出现在 'quote' 区域的 'NAME' 部分。谁能帮忙？谢谢！！

Answer 1

这些是你需要的吗？

$(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));
});

});

Answer 2

var Name = 'John';
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('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) );
});

<label for="name">Name:</label> <input type="text" id="name" placeholder="Name Here" autofocus>
<br><br>
<button id="quote">Add Quote</button>

Answer 3

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).ready(function(){
  $('#name').on('keyup', function() {
    var quoteSourceNew = [];
    for(var item of quoteSource) {
      quoteSourceNew.push({
        quote: (item.quote).replace(/NAME/, $('#name').val())
      });
    }
    console.log(quoteSourceNew);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="name">Name:</label> <input type="text" id="name" placeholder="Name Here" autofocus>

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

How to get entered information into pre-written set of quotes?

html

javascript

textbox