We Keep Coding

Replace part of html text with input val JS

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;
}

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.

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

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.

Calling up html text box using javascript and converting it to an integer

So I just want to understand how I could do this, very simple example:
My html is
<div id = "pie"> eee </div>
<input type="text" name="item1" size="5">
and my javascript is
var q = parseFloat("10");
document.getElementById("pie").innerHTML = q ;
and basically what I want to do is call up whatever text is in the text box (named item1) and convert it to an integer, then display that number. I'm sure there's an easy way to do it but I cant figure it out

Try this:
+(document.getElementsByName('item1')[0].value);
That is the shortest way to do that now to display it, for an example in the element #pie
document.getElementById('pie').innerHTML = +(document.getElementsByName('item1')[0].value)
Putting + before something will convert it to a number. If the text box isn't a number you can detect that by:
var value = document.getElementsByName('item1')[0].value;
document.getElementById('pie').innerHTML = !isNaN(value)?+value:"Not a number";
Demo

Get the value of item 1
var item1_value = parseInt(getElementsByName('item1')[0].value);
Display the value of item1 in pie
document.getElementById('pie').innerHTML = item1_value;

Copy from textarea to anther textarea but the value of the second textarea should not change

I have two textareas. I am copying data from one to another but if I change data in the first textarea then data in the second textarea is also changed which is obvious.
My requirement is like this: Suppose I have written "country" and it has been pasted to the second textarea. Now if I replace "country" with "anyother" then in the second textarea "country" should not be replaced. If I write something in the first textarea which is new(not replacement) then only that data will be pasted.
Is it possible to do?
My code till now:
function showRelated(e) {
//$('src2').html($('src1').html());
$('#src2').val( $('#src1').val() );
}
<textarea name="source" id="src1" cols="150" rows="20" onkeyup="showRelated(event)"></textarea>
<textarea name="source2" id="src2" cols="150" rows="20"></textarea>
the second text area is hidden from user.whatever the user writes will be copied to second textarea and will be transliterate.The requirement is like this if the user replace some data then also it should not effect the data which he already entered.that is why i need to maintain a copy without using database.

ok it seems this is what you want:
HTML:
<textarea id="src1"></textarea>
<textarea id="src2"></textarea>
JS:
$("#src1").keyup(function() {
var src1_val = $(this).val();
var src2_val = $("#src2").val();
var new_string = src2_val + src1_val;
$("#src2").val(new_string);
});

$('#one').on('blur', function() {
$('#two').val($('#two').val() + '\n' + $('#one').val());
});

You need to do some thing like this
$("#one").blur(function() { // triggering event
var one = $(this).val(); // place values in variable to make them easier to work with
var two = $("#two").val();
var three = one + two;
$("#two").val(three); // set the new value when the event occurs
});

This question isn't the easiest to decipher, but perhaps you want to store translated text into a second textarea?
<textarea id="one"></textarea>
<textarea id="two"></textarea>
var translate = function(input) {
// TODO: actual translation
return 'translated "' + input + '"';
}
var $one = $("#one");
var $two = $("#two");
$one.on('blur', function() {
$two.val(translate($one.val()));
});

How would I go about creating Textbox.Text combination WYSIWYG

WYSIWYG = What you see is what you get.
Some Info:
Let's say I have 2 Text Boxes and one Label: Textbox1, Textbox2, Label.
For, let's say, a Custom ID I want to provide a text and a number. These two are combined to create the ID: Prefix + Integer.
Label.text = Textbox1.Text + Textbox2.Text"
But that is not what I'm interested in.
The Question:
How would I go about making a JavaScript to make "as you type" functionality to display on the result on label to show the user what their Custom ID would look like?

I hope this is what you were looking for.
HTML:
<label id="lab">My label:</label><br><br>
Prefix: <input type="text" id="txtarea1"><br>
Number: <input type="text" id="txtarea2">
JS:
document.getElementById("txtarea1").onkeyup = function() {
document.getElementById("lab").innerHTML = document.getElementById("txtarea1").value + document.getElementById("txtarea2").value;
}
document.getElementById("txtarea2").onkeyup = function() {
document.getElementById("lab").innerHTML = document.getElementById("txtarea1").value + document.getElementById("txtarea2").value;
}
Fiddle.

Getting text from input to replace label text in another form

reposting for simplicity. i want to have the text users enter into an input to replace the label text of another form's input. Additionally, the form is a plugin which doesn't let me attach an id to the specific label tag of the text i want to change. how can i do this, in vanilla javascript please.
the input users put text into:
<input class="charInput" id="name1" type="text" onKeyUp="change1(this)" >
the form label i want to change the text in (p.s: cant use the class(not unique to this label), cant add id):
<div id="frm_field_53_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label" for="field_inputactor1">
TEXT TO REPLACE
<span class="frm_required"></span>
</label></div>

Maybe it is not the best solution, but it is a solution that works in Firefox and Chrome (not tested under IE)
findLabelToChange = function() {
var div = document.getElementById("frm_field_53_container");
return div.querySelector("label");
};
customizeText = function(text) {
return text + ' <span class="frm_required"></span>';
};
change1 = function() {
var label = findLabelToChange();
var text = document.getElementById("name1").value;
label.innerHTML = customizeText(text);
};
you can see a example in this feedle
http://jsfiddle.net/HAK5X/1/

Here is a fiddle.
It is one line of code.
http://jsfiddle.net/te3jv/6/
function change1(myInput){
document.getElementById('frm_field_53_container').querySelector("label").innerHTML =myInput.value;
}
Alternatively add <span class="frm_required"></span> to the end of HTML reassignment to keep your empty (but required?) span.