Javascript - Input text and output to multiple areas

Question

I'm trying to input text in a field, and have it output to multiple fields.

Currently, it only outputs to the first field.

Here's the input:

  <form class="form" onchange="myFunction()">
      <div class="mb-4">
        <p>The quick sly fox jumped over the <input id="object" class="inline borderless-input"></p>
      </div>
  </form>

JS controlling the output:

function myFunction()

  {
    //Object
    var x = document.getElementById("object");
    var div = document.getElementById("objectDisplay");
    div.innerHTML = x.value;    
  }

Here's a codepen I'm working with: Codepen

score 1 · Accepted Answer · 2017-11-28T23:43:58.253

ID's have to be unique. Use classes and a for loop to cycle through each one and change it.

This cannot be done with document.getElementById. See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById for some basic information about document.getElementById.

document.getElementsByClassName returns an array filled with existing elements with a certain class. In this case, objectDisplay. If you want to read more about that then take a look here: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName.

The new code should look like this:

function myFunction() {
  //Object
  var x = document.getElementById("object");
  var div = document.getElementsByClassName("objectDisplay");
  for (i = 0; i < div.length; i++) {
    div[i].innerHTML = x.value;
  }
}

.container {
  padding: 10px;
}

.text-strong {
  font-weight: bold;
}

.inline {
  display: inline;
}

.borderless-input {
  background-color: transparent;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  padding: .5rem .75rem;
  text-align: center;
}

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <form class="form" onchange="myFunction()">
        <div class="mb-4">
          <p>The quick sly fox jumped over the <input id="object" class="inline borderless-input"></p>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h3><strong>Output</strong></h3>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <p>The quick sly fox jumped over the <span class="objectDisplay inline"></span>.</p>
      <p>The quick sly fox jumped over the <span class="objectDisplay inline"></span>.</p>
      <p>The quick sly fox jumped over the <span class="objectDisplay inline"></span>.</p>
    </div>
  </div>
</div>


<!-- For Testing Only -->
<div class="container">
  <div class="row">
    <div class="col-lg-10 offset-lg-1 mx-auto">
      <!-- Test Here -->

    </div>
  </div>
</div>

score 1 · Answer 2 · answered Nov 28 '17 at 23:42

Identify your inputs with class instead of id

 <p>The quick sly fox jumped over the <span id="objectDisplay" class="objectDisplay inline"></span>.</p>

use this

var divs = document.getElementsByClassName("objectDisplay");
for(var i = 0; i < divs.length; i++){
 divs[i].innerHTML = x.value;     
}

instead of

var div = document.getElementById("objectDisplay");
div.innerHTML = x.value;

iSZ · Answer 3 · 2017-11-30T02:21:35.017

IDs are unique so you should have only one ID per page. Try changing objectDisplay to a class and then selecting them all and looping through each as below

function myFunction(el)

  {
    //Object
    var x = document.getElementById("object");
    var divs = document.querySelectorAll(".objectDisplay");
    var inputValue = el.value;
    for(var i=0; i < divs.length; i++){
      divs[i].innerHTML = inputValue;
    }    
  }

  <form class="form">
      <div class="mb-4">
        <p>The quick sly fox jumped over the <input id="object" class="inline borderless-input" onchange="myFunction(this)" value=""></p>
      </div>
  </form>
  <div class="objectDisplay"></div>
  <div class="objectDisplay"></div>

score 1 · Answer 4 · answered Nov 29 '17 at 00:00

I found a similar question see the link: jQuery id selector works only for the first element.

but briefly, you're using the same ID for more than one element, try using the class selector, example document.getElementsByClassName ('your-class') or document.querySelectorAll ('your-class'), remembering that in querySelectorAll for classes: '.your-class' and Id: '# my-id'.

function myFunction(){
//Object
  var x = document.getElementById("object");
  var div = document.querySelectorAll(".col-lg-12 span");

  for(var i = 0; i < div.length;i = i + 1){
    div[i].innerHTML = x.value;
  }
}

Javascript - Input text and output to multiple areas

4 Answers4