Change label from input javascript

Question

I want to change the label text once the user has changed the input field text.

This is what I have so far:

script function:

 function ModuleName() {
        var text = document.getElementById('txtModCode').innerHTML;
        document.getElementById('lblModCode').innerHTML = text;

    }

fields and label

<input type="text" name="txtModCode" id="txtModCode" class="form-control" placeholder="Enter Module Code Here" onchange="ModuleName()" />
<label id="lblModCode"></label>

Thank you in advance

So, what is wrong with what you have above?

Ryan Wilson
– Ryan Wilson

2018-05-07 19:21:03 +00:00
Commented May 7, 2018 at 19:21 — Ryan Wilson
– Ryan Wilson, Commented May 7, 2018 at 19:21
inputs have value, not innerHTML

epascarello
– epascarello

2018-05-07 19:24:55 +00:00
Commented May 7, 2018 at 19:24 — epascarello
– epascarello, Commented May 7, 2018 at 19:24

Asons · Accepted Answer · 2018-05-07 19:31:34Z

5

You should use .value in document.getElementById('txtModCode').value;, not .innerHTML

function ModuleName() {
  var text = document.getElementById('txtModCode').value;
  document.getElementById('lblModCode').innerHTML = text;
}

<input type="text" name="txtModCode" id="txtModCode" class="form-control" placeholder="Enter Module Code Here" onchange="ModuleName()" />
<label id="lblModCode"></label>

And by utilizing this in onchange="ModuleName(this)" you can pass a direct reference to the input and avoid the extra getElementById

function ModuleName(el) {
  document.getElementById('lblModCode').innerHTML = el.value;
}

<input type="text" name="txtModCode" id="txtModCode" class="form-control" placeholder="Enter Module Code Here" onchange="ModuleName(this)" />
<label id="lblModCode"></label>

edited May 7, 2018 at 19:31

answered May 7, 2018 at 19:24

Asons

87.7k12 gold badges119 silver badges175 bronze badges

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

Comments

Tyler Hudson · Accepted Answer · 2018-05-07 19:26:24Z

0

To have a textbox that triggers a function when the contained text is changed use this:

 <body>
      <span id="thing2">you have not changed the textbox</span>
      <input type="text" id="thing" onchange="myFunction()">
 </body>
 <script>
      function myFunction(){
           document.getElementById("thing2").innerText = "you have changed the textbox"
      }
 </script>

This changes the contents of the element

answered May 7, 2018 at 19:26

Tyler Hudson

309 bronze badges

1 Comment

Tyler Hudson Over a year ago

This changes the label whenever you change the textbox, this does not make the label copy the textbox.

Collectives™ on Stack Overflow

Change label from input javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related