Javascript - 在多个位置插入代码段

Javascript - Insert code segments at multiple locations

本文关键字：插入 代码 位置 Javascript      更新时间：2023-09-26

我喜欢做的是：如果填写了 3 个可选字段中的任何一个，则会将一段代码（行）插入到源代码（表）中，然后输出整个代码。

我现在的问题是：如果输入了多个字段，则仅插入最后一个输入。 我需要将它们全部插入。 我怀疑"code ="语句需要更改/重新定位，但不确定如何处理。 我是javascript的初学者，所以请尽可能保持你的答案基本。 谢谢！！

.html：

<input id="input1" onChange="update()">
<input id="input2" onChange="update()">
<input id="input3" onChange="update()">

JavaScript：

var source = '<table><!--PlaceHolder1--><!--PlaceHolder2--><!--PlaceHolder3--></table>';
var insert = '<tr><td>InsertText</td></tr>';
function update(){
if(document.getElementById("input1").value != ""){
  var x = document.getElementById("input1").value;
  var y = insert.replace("InsertText", x );         
  code = source.replace("<!--PlaceHolder1-->", y );
  }
if(document.getElementById("input2").value != ""){
  var x = document.getElementById("input2").value;
  var y = insert.replace("InsertText", x );         
  code = source.replace("<!--PlaceHolder2-->", y );
  }
if(document.getElementById("input3").value != ""){
  var x = document.getElementById("input3").value;
  var y = insert.replace("InsertText", x );         
  code = source.replace("<!--PlaceHolder3-->", y );
  }
}
document.write(code);

看起来您正在丢失第一个替换的结果，该结果位于变量"code"中，因为您在后续替换中用"源"的内容覆盖了它。

取而代之的是：

code = source.replace("<!--PlaceHolder2-->", y );

试试这个：

code = code.replace("<!--PlaceHolder2-->", y );

我想你会得到你所期望的。

部分问题在于您正在尝试使用字符串替换来执行此操作。你应该使用正确的 DOM 操作。这也将允许您大量清理代码：

window.onload = function() {
  function update(e) {
    var target = e.target,
        num = target.getAttribute("data-num"),
        td = document.querySelectorAll("#theTable td")[num - 1];
   
    td.textContent = target.value;
    td.parentNode.style.display = "table-row";
  }
  for (var i = 1; i <= 3; i += 1) {
    document.getElementById("input" + i).onchange = update;
  }
}
  #theTable tr {
display: none;
  }
<input id="input1" data-num="1">
<input id="input2" data-num="2">
<input id="input3" data-num="3">
<table id="theTable">
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

相关文章：