用輸入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標記中。

希望我進一步推動你。