Javascript 在页面上显示多个输入字段，并通过单选按钮更改字体

我试图让客户在WooCommerce中定制他们想要的订单。他们将有几个文本字段，可以将内容输入其中，然后可以选择要使用的字体

内容将显示在页面上的一个DIV中，以便客户在单击“添加到购物车”之前可以看到它的外观

文本字段和字体选择将成为订单的一部分

我知道如何使用jQuery在页面上显示一行文本，但我对多行文本感到困惑，并更改了显示的字体系列

有什么办法吗

我已经草拟了我的代码：

第1行： 第2行： 第3行： 第4行： Arial 威尔达纳 新罗马时代 第1行文本在这里 第2行文本在这里 第3行文本在这里 第4行文本在这里

---

请参阅下面的代码片段。基本上，脚本侦听表单上的更改。发生更改时，预览div将使用文本框中的值和选定单选按钮中的字体系列进行更新。我编辑了HTML以提供更好的功能，例如连接到输入的标签和它们缺少name属性的专用单选按钮

这个例子可以进一步完善，但应该是一个不错的起点。我做了调整以获得无线电值

var theForm=document.querySelector'theForm'； var lineInputs=document.querySelectorAll.line'； var preview=document.querySelector'preview'； Form.addEventListener'change'，updatePreview； 更新回顾； 函数更新预览{ preview.innerHTML=； 对于变量i=0，l=lineInputs.length；i我做了一些修改，制作了这把小提琴。希望这会对我有所帮助。我想我问问题的时候可能不太清楚。我想做的是，当您在不同的字段中键入并选择所需的字体时，黑框中的文本将改变，而不是字段的外观。如果可能，我希望显示框在输入内容时更新，而不必点击提交。欢迎使用！我使用内置的代码片段功能添加了您的代码，这使人们更容易帮助您。@ChrisJ.Popp我希望如此。我希望我能在这方面有所帮助，但我对WooCommerce不太熟悉。