HTML页面如何将表单输入变量插入到FAQ schema字符串中？

问题原因 #

你在onInput事件的字符串内部直接写了输入框值的引用，浏览器会把q1.value这类内容当成普通文本输出，不会解析为对应输入框的实际值。

修正后可用的完整代码 #

<!DOCTYPE html>  
<html>  
<head>  
<title>Output Tag</title> 
</head>  
<body>  
 <p>FAQ Schema Creator</p>
 <form onInput='faq.value=`[sc_fs_multi_faq headline-1="h4" question-1="${q1.value}" answer-1="${a1.value}" headline-2="h4" question-2="${q2.value}" answer-2="${a2.value}" headline-3="h4" question-3="${q3.value}" answer-3="${a3.value}" headline-4="h4" question-4="${q4.value}" answer-4="${a4.value}" headline-5="h4" question-5="${q5.value}" answer-5="${a5.value}" count="5" html="true" css_class=""]`'>
      
  <label for="q1">Question 1:</label>
  <input type="text" id="q1" name="q1">
  <label for="a1">Answer 1:</label>
  <input type="text" id="a1" name="a1"><br>
<br>
  <label for="q2">Question 2:</label>
  <input type="text" id="q2" name="q2">
  <label for="a2">Answer 2:</label>
  <input type="text" id="a2" name="a2"><br>
<br>
<label for="q3">Question 3:</label>
  <input type="text" id="q3" name="q3"> 
  <label for="a3">Answer 3:</label> 
  <input type="text" id="a3" name="a3"><br>
  <br>
<label for="q4">Question 4:</label> 
  <input type="text" id="q4" name="q4"> 
  <label for="a4">Answer 4:</label> 
  <input type="text" id="a4" name="a4"><br>
  <br>
<label for="q5">Question 5:</label> 
  <input type="text" id="q5" name="q5">
  <label for="a5">Answer 5:</label> 
  <input type="text" id="a5" name="a5"><br><br>
 
Output is:<br><output name="faq"></output>
 
</form>
</body>  
</html> 

改动说明 #

• 用ES6模板字符串（反引号包裹字符串）替换原来的普通双引号字符串，直接通过${变量名}`的语法插入动态输入值，不需要额外处理大量的引号转义
• 修正了原代码中label的for属性和对应输入框id不匹配的问题
• 移除了原代码中schema串里多余的冗余引号

内容的提问来源于stack exchange，提问作者G-Man83