用输入val JS替换部分html文本

Question

我一直在尝试用文本字段的输入替换部分标题。 当用户输入邮政编码时，文本将显示为“伟大的新闻！我们在12345中有位置”。

<h4>GREAT NEWS! WE HAVE A LOCATION IN YOUR AREA. <span id="zipPrint"></span></h4>


function myFunction() {
   var x = document.getElementById("zipNumber");
    var text = " ";
    var i;
    for (i = 0; i < x.length ;i++) {
        $('#hide-me').hide();
        text += .replace("YOUR AREA", x.elements[i].value);
    }
    document.getElementById("zipPrint").innerHTML = text;
}

Answer 1

text +=行看起来不对我。 我认为你需要这个。

var text = "GREAT NEWS! WE HAVE A LOCATION IN YOUR AREA.";
text = text.replace("YOUR AREA", x.elements[i].value);

这样， "YOUR AREA"将被位置编号替换，并且该结果将被分配给变量text 。

Answer 2

您可以使用自己设定的范围。 无需使用替换。 在这里，我在输入上添加了一个事件监听器（如果需要可以更改），当您单击输入时，它将替换文本中的跨度。

 document.getElementById("zipNumber").addEventListener("change",myFunction); function myFunction() { let zip = this.value; // do some zip validation if needed document.getElementById("zipPrint").innerHTML = zip; } 

 <h4>GREAT NEWS! WE HAVE A LOCATION IN <span id="zipPrint">YOUR AREA</span></h4> <input id="zipNumber"/> 

Answer 3

为了让我们更简单地操作DOM ，这里是h4标签的样子：

<h4>GREAT NEWS! WE HAVE A LOCATION IN <span id="zipPrint">YOUR AREA.</span></h4>

现在，将显示邮政编码的span标记包含文本“YOUR AREA”。 将被邮政编码取代。

 var zipNum = document.getElementById("zipNumber"), zipPr = document.getElementById("zipPrint"); zipNum.addEventListener('blur', function myFunction() { var zc = this.value.trim();  zipPr.textContent = (zc.length && !isNaN(zc)) ? zc:'YOUR AREA.'; }); 

 <h4>GREAT NEWS! WE HAVE A LOCATION IN <span id="zipPrint">YOUR AREA.</span></h4> <input id="zipNumber"/> 

说明：

blur事件侦听器附加到input标记，其id="zipNumber" ，用于处理在h4标记中编写邮政编码的过程。

处理事件的匿名函数检查input是否包含有效数字：如果是，则input的值放在span标记中，否则，如果input值为空或不表示有效数字，字符串"YOUR AREA." 放在span标记中。

希望我进一步推动你。