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

Question

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

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

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

我知道如何使用 jQuery 在页面上显示单行文本，但我在处理多行文本和更改显示的字体系列时摸不着头脑。

关于如何做到这一点有什么想法吗？

我已经勾勒出我的代码 here :

<form id="TheForm">

Line 1: <input type="text" name="Line1"><br>
Line 2: <input type="text" name="Line2"><br>
Line 3: <input type="text" name="Line2"><br>
Line 4: <input type="text" name="Line2"><br>
<br>
<br>
<input type="radio" value="Arial" id="font"><span style="font-family:arial">Arial</span><br>
<input type="radio" value="Verdana" id="font"><span style="font-family:Verdana">Verdana</span><br>
<input type="radio" value="Times New Roman" id="font"><span style="font-family:Times New Roman">Times New Roman</span><br>
<br/>
    <input id="submit" value="Submit" type="button" />
</form>
<br>
<br>

<div style="width:300px;height:100px;border:1px solid #000;">
Line 1 Text Here<br>
Line 2 Text Here<br>
Line 3 Text Here<br>
Line 4 Text Here
</div>

Answer 1

请参阅下面的代码片段。基本上，脚本会监听表单上的更改。当发生变化时，预览 div 会更新为来自文本框的值和来自所选 radio 按钮的字体系列。我编辑了您的 HTML 以提供更好的功能，例如连接到 input 的 label 和专用的 radio 按钮(它们缺少 name 属性)。

这个例子可以进一步完善，但应该是一个不错的起点。我改编了this nice function by Quentin获取 radio 值。

var theForm = document.querySelector('#TheForm');
var lineInputs = document.querySelectorAll('.line');
var preview = document.querySelector('#preview');

theForm.addEventListener( 'change', updatePreview);
updatePreview();

function updatePreview() {
      preview.innerHTML = '';
      
      for (var i = 0, l = lineInputs.length; i < l; i++) {
        preview.innerHTML += lineInputs[i].value;
        
        i !== l - 1 ? preview.innerHTML += '<br />' : '';
      }
  
    function getFont(radio_group) {
      for (var i = 0, l = radio_group.length; i < l; i++) {
          var button = radio_group[i];
          if (button.checked) {
              return button;
          }
      }
      return undefined;
    }
    var checkedButton = getFont(theForm.elements.font);
    if (checkedButton) {
        preview.style.fontFamily = checkedButton.value;
    }
}

<form id="TheForm">

<label for="Line1">Line 1: </label><input class="line" type="text" id="Line1" name="Line1" value="Line 1 Text Here"><br>
<label for="Line2">Line 2: </label><input class="line" type="text" id="Line2" name="Line2" value="Line 2 Text Here"><br>
<label for="Line3">Line 3: </label><input class="line" type="text" id="Line3" name="Line3" value="Line 3 Text Here"><br>
<label for="Line4">Line 4: </label><input class="line" type="text" id="Line4" name="Line4" value="Line 4 Text Here"><br>
<br>
<br>
<input type="radio" value="Arial" id="font1" name="font"><label for="font1" style="font-family:arial">Arial</label><br>
<input type="radio" value="Verdana" id="font2" name="font"><label for="font2" style="font-family:Verdana">Verdana</label><br>
<input type="radio" value="Times New Roman" id="font3" name="font"><label for="font3" style="font-family:Times New Roman">Times New Roman</label><br>
<br/>
    <input id="submit" value="Submit" type="button" />
</form>
<br>
<br>

<div id="preview" style="width:300px;height:100px;border:1px solid #000;">
</div>