Replace part of html text with input val JS

Question

I've been trying to replace part of the header with the input from the text field. When a user enters zip code the text would read "GREAT NEWS! WE HAVE A LOCATION IN 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;
}

What's the exact issue you're having? Are you getting any error messages? How do you call your function? Where's the element with the ID zipNumber? Please be sure to include a minimal reproducible example so that we can reproduce the issue. — j08691
– j08691, Commented Aug 24, 2018 at 20:29
Hi Jeff is this your complete code snippet? what is the hide-me node? and it seems like you are missing something before .replace. — Andrew L
– Andrew L, Commented Aug 24, 2018 at 20:29
i was trying to hide the part of the string once the user enters the zip code and replace "your area" with the zip code. — Jeff Tuesday
– Jeff Tuesday, Commented Aug 24, 2018 at 20:34
You can wrap the YOUR AREA text in the span so it can be easily targeted and replace. E.g. <span id="zipPrint">YOUR AREA</span> — j08691
– j08691, Commented Aug 24, 2018 at 20:35

alex · Accepted Answer · 2018-08-24 20:31:06Z

2

The text += line looks wrong to me. I think you need this instead.

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

That way, "YOUR AREA" gets replaced by the location number, and that result gets assigned to the variable text.

answered Aug 24, 2018 at 20:31

alex

1,1534 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeff Tuesday Over a year ago

so if i use var text = "GREAT NEWS! WE HAVE A LOCATION IN YOUR AREA."; how do i display this var in my html h4 tag if the input isn't filled out?

Andrew L · Accepted Answer · 2018-08-24 20:40:40Z

1

You can use the span you set yourself up for. No need to use replace. Here I added an event listener on the input (which you can change if needed) that will replace the span in the text when you click out of the input.

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"/>

answered Aug 24, 2018 at 20:40

Andrew L

5,5161 gold badge29 silver badges40 bronze badges

Comments

ThS · Accepted Answer · 2018-08-24 21:10:37Z

In order to make manipulating the DOM simpler for us, here's how the h4 tag will look like:

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

Now the span tag that will display the zip code contains the text "YOUR AREA." that will be replaced by the zip code.

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"/>

Explanations:

A blur event listener is attached to the input tag with id="zipNumber" that handles the process of writing the zip code in the h4 tag.

The anonymous function that handles the event checks if the input has a valid number in it: if so, the value of the input is placed in the span tag, else, if the value of the input is empty or doesn't represent a valid number, the string "YOUR AREA." is placed in the span tag.

Hope I pushed you further.

Collectives™ on Stack Overflow

Replace part of html text with input val JS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related