How to store data from JS input form into a text?

Question

I need to store an input data from several fields into JS variables and then paste them in a text. Here is my code which doesn't seem to be working for some reason.

These are input fields:

    <ul id="listings">
            <li><input type="text" id="adjectives1" value="Adjective"></li>
            <li><input type="text" id="adjectives2" value="Adjective"></li>
            <li><input type="text" id="adjectives3" value="Adjective"></li>
    </ul>

And here is that text:

<div id="textualdiv"> As the <span id="adjective1">fatal</span> mating dance of a pair of black holes with a total mass of more than a billion suns. Mostly in the form of <span id="adjective2">violent</span> in space-time known as  <span id="adjective3">gravitational</span> waves.</div>

</div>

Here is JS script:

<script>
var adjective1 = document.getElementById("adjectives1").value;
var adjective2 = document.getElementById("adjectives2").value;
var adjective3 = document.getElementById("adjectives3").value;
</script>

<script>
document.getElementById('adjective1').innerHTML = adjective1;
document.getElementById('adjective2').innerHTML = adjective2;
document.getElementById('adjective3').innerHTML = adjective3;
</script>

It only pastes default "Adjective" values in the text which are already present in the input fields. But if I type something else it doesn't change the text, but keeps showing Adjective word.

You would need to listen for specific events such as "change" or "keypress" and update the HTML then. Your current code only updates the HTML once when it runs — Phil
– Phil, Commented Sep 21, 2015 at 2:57

Arun P Johny · Accepted Answer · 2015-09-21 02:58:02Z

3

You need to use a change event handler, which will update the target element content on change of the input value.

function update(el){
  var value = el.value;
  document.getElementById(el.id.replace('adjectives', 'adjective')).innerHTML = value;
}

<ul id="listings">
  <li><input type="text" id="adjectives1" value="Adjective" onchange="update(this)"></li>
  <li><input type="text" id="adjectives2" value="Adjective" onchange="update(this)"></li>
  <li><input type="text" id="adjectives3" value="Adjective" onchange="update(this)"></li>
</ul>


<div id="textualdiv"> As the <span id="adjective1">fatal</span> mating dance of a pair of black holes with a total mass of more than a billion suns. Mostly in the form of <span id="adjective2">violent</span> <span id="noun3">ripples</span> in space-time known as  <span id="adjective3">gravitational</span> waves.</div>

answered Sep 21, 2015 at 2:58

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

Nebular Dust Over a year ago

It does seem to work, even though I don't understand what this "el" function is and how it works. I understood that I have to update my data once I fill in new text, but how this function works and what it does and how it works with "adjective" and "adjectives" without numbers on the end of them, I don't understand. But than you for help!

Arun P Johny Over a year ago

@NebularDust when the value of the input is changed it will call the onchange handler, which is calling the update function and is passing the changed input reference as its parameter... so el inside the update function is referring to the changed input element

Arun P Johny Over a year ago

@NebularDust To find the span to updated, first we are taking the id of the changed input element using el.id, so it will refer to a value like adjectives1, now using the replace function we are replacing adjectives with adjective so we will get adjective1

Pablo Canseco · Accepted Answer · 2015-09-21 02:59:44Z

0

you can hook an onchange event to the inputs so that when you change anything in the input, you change the innerHTML on the span tags.

<input type="text" id="adjectives1" value="Adjective" onchange="document.getElementById('adjective1').innerHTML = this.value;">

answered Sep 21, 2015 at 2:59

Pablo Canseco

5621 gold badge10 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to store data from JS input form into a text?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related