CODEWITHSUNDEEP
javascript
Salman
Salman

Reputation: 1024

Javascript - AppendChild an input to multiple divs with the same class

I'm trying to create an add function to add a new one new input to all the columns with class name domestic.

Now I've created an code in JavaScript, but it only adds it to the first because it's set to the first child. If I remove it I get the an error message (" appendChild is not a function ")

Is it possible to do this? I've searched on numerous post's and haven't found any answer.

HTML

 <!-- START ONJECTIVES CONTAINER -->
    <div class="container" id="weighings">
      <!-- DOMESTIC NAME -->
      <div class="colum" id="columtext">
        <p>Domestic</p>
      </div>
       <!-- COLUM 4 DESCRIPTION -->
      <div class="colum discription domestic" id="regio">
        <p>Description</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 5 LOW -->
      <div class="colum domestic" id="regio">
        <p>Low</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 6 MEDIUM -->
      <div class="colum domestic" id="regio">
        <p>Medium</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 7 HIGH -->
      <div class="colum domestic last" id="regio">
        <p>High</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 8 LOW -->
      <div class="colum domestic" id="regio">
        <p>Low</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 9 MEDIUM -->
      <div class="colum domestic" id="regio">
        <p>Medium</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 10 HIGH -->
      <div class="colum domestic" id="regio">
        <p>High</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
     </div>
      <!-- END CONTAINER -->

SCSS

           #box{
             margin-top:5px;
             width:10px;
             height:10px;
             background:black;
            }

        .colum{
            display: block;
            width: 200px;
          text-align:center;
        }

    #regio{
      width:50px;
      margin-right:10px;
      input{
        width:50px;
      }
    }

  .row{
    width:100%;
    height:30%;
  }

Javascript

    document.getElementById("newrow").onclick = function () {
    var ok = true;

     if (ok === true) {
       for(i=0;i<8;i++){
          var input = document.createElement('input');
          input.id = 'box';
          input.type = 'text';
          input.oninput = 'calculate()';

       document.getElementsByClassName('domestic')[0].appendChild(input);
       }
    }
};

Codepen: http://codepen.io/salman15/pen/pNELXM?editors=0110

Upvotes: 0

Views: 2454

Answers (2)

diabetesjones
diabetesjones

Reputation: 838

You're only putting it on the first row with this line of code:

 document.getElementsByClassName('domestic')[0].appendChild(input);

You can see that it is getting the [0] (the first element in the array of elements with a class of domestic), then never going to later one. We need to iterate over the array of elements with the class name domestic, so let's save it to a variable, and do just that.

I'd do it like this:

  document.getElementById("newrow").onclick = function () {

var elements = document.getElementsByClassName('domestic');
  // if there are no elements found with the class of domestic, do nothing.
if(elements.length == 0) return false;

  // otherwise, lets do it! We can make the input box ONCE and append it to multiple divs, because it is always the same box we are appending. Much faster. That is why it is out of the loop now.
  var input = document.createElement('input');
    input.id = 'box';
    input.type = 'text';
    input.oninput = 'calculate()';

  //we set the condition to the LENGTH OF OUR ARRAY which contains the elements of the class name document.
  for(i=0;i< elements.length; i++) {
    elements[i].appendChild(input);
  }
};

jQuery: 

$('#newrow').on('click', function() {
   var eles = $('.domestic');
   eles.each(function($k, $v) {
      $(this).append(input);
    });
});

Upvotes: 2

tymeJV
tymeJV

Reputation: 104775

Loop the collection, add the input:

var elems = document.getElementsByClassName('domestic');
for (var i = 0; i < elems.length; i++) {
    elems[i].appendChild(input);
}

Upvotes: 1

Related Questions