Javascript - я не могу суммировать входы в клонированных div

Question

Я новичок уровня 0, и я клонирую некоторые div-ы (здесь скрипт работает очень хорошо), к которым я добавил некоторые входные данные с различными значениями, и я ищу возможность суммировать значения ( только из клонированных входов ), но сценарий он не читает. Суммируйте ВСЕ html-данные.

// Script for clone the div´s

$(document).ready(function() {
  $("#comp-p1").click(function() {
    $("#cont-p1").clone().appendTo(".derecha");
  });
  // =============
  $("#comp-p2").click(function() {
    $("#cont-p2").clone().appendTo(".derecha");
  });
  // =============
  $("#comp-p3").click(function() {
    $("#cont-p3").clone().appendTo(".derecha");
  });
});

// =============================================================

// New Script for sum inputs

const suma = function() {
  var x = document.getElementsByClassName("add-prod");
  let sum = 0;
  for (var i = 0; i < x.length; i++) {
    console.log(x[i].value)
    sum += parseFloat(x[i].value);
  }
  console.log(sum);
  return sum;
}
//console.log(suma());
document.getElementById("total").value = suma();

// =============================================================

// Old Script for sum inputs

/*$(document).ready(function() {
  function sumInputs(e) {
    e.preventDefault();
    var valores = $('.derecha').children('input');
    var suma = 0;
    $.each(valores, function() {
      valor = $(this).val();
      suma += Number(valor);
    });

    valores = document.getElementById('total');
    $(valores).val(suma);
  }

  $('#sumup').on('click', sumInputs);
});*/

body {
  margin: 0 auto;
  color: #323232;
  width: 100%;
  height: 100%;
  line-height: 1.5;
  font-family: 'Roboto', serif
}

#container {
  width: 500px;
  margin: 0 auto
}

#container p {
  display: inline-block;
  margin-top: 20px
}

span {
  font-weight: bold;
  text-decoration: underline
}

#productos {
  display: none
}

.img-prod {
  display: inline-block;
  float: left;
  background: #000;
  margin-right: 10px
}

.img-prod img {
  width: 100%;
  height: auto;
  max-width: 70px;
  display: block;
  border: 0
}

#comp-p1,
#comp-p2,
#comp-p3 {
  width: 120px;
  height: 30px;
  margin-top: 15px;
  background: green;
  padding: 10px 0 5px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  cursor: pointer
}

.derecha {
  border: solid 1px #999;
  max-height: 400px;
  width: 350px;
  margin: 0 auto;
  text-align: center;
  padding: 10px 0;
  overflow-y: auto;
  float: right
}

#producto-1,
#producto-2,
#producto-3 {
  display: inline-block;
  width: 220px;
  padding: 10px;
  float: left;
  text-align: left;
  font-size: .9em;
  margin-right: 5px
}

#producto-1 {
  background: green;
  color: #fff
}

#producto-2 {
  background: #add8e6;
  color: #000
}

#producto-3 {
  background: #666;
  color: #fff
}

.cont-p {
  display: inline-block;
  margin: 7px auto;
  line-height: 1
}

.bbp {
  display: inline-block;
  float: right;
  width: 24px;
  height: 24px;
  text-align: center;
  background: red;
  color: #fff;
  margin-left: 5px;
  line-height: 1.5;
  cursor: pointer
}

.cont-num {
  float: left;
  width: 24px;
  height: 24px;
  margin: 20px 5px 0 18px;
  padding: 4px 3px 3px;
  background: red;
  text-align: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #fff
}

#mostrar {
  display: none
}

#mostrar {
  width: 100px;
  margin: 70px 0 0;
  padding: 10px;
  text-align: center;
  background: grey;
  color: #fff;
  cursor: pointer
}


/* ==== Style of Sume ==== */

.derecha input {
  width: 40px;
  display: block;
  margin: 0 auto 10px 0;
  padding: 2px 0;
  background: #f2f2f2;
  border: none;
  border: 1px solid #000;
  text-align: center
}

#cont-resultado {
  text-align: center;
  width: 110px;
  margin-top: 70px;
  background: grey;
  padding: 5px 10px 10px;
  color: #fff
}

#cont-resultado input {
  display: inline-block;
  margin: 10px auto;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 8px 0
}

#cont-resultado p {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background: grey;
  padding: 8px 10px;
  cursor: pointer
}

#total {
  display: block;
  width: 80px;
  text-align: center
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="productos">
    <!-- =============== -->
    <div id="cont-p1" class="cont-p">
      <div id="producto-1">
        <div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"> </div>cont-p1 cloned!<br><br>Input Value = 1</div>

      <input class="add-prod" type="num" value="1">

      <div class="bbp" onclick="restar();restardos();this.parentNode.parentNode.removeChild(this.parentNode);">X</div>
    </div>
    <!-- =============== -->
    <div id="cont-p2" class="cont-p">
      <div id="producto-2">
        <div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
        cont-p2 cloned!<br><br>Input Value = 1</div>

      <input class="add-prod" type="num" value="1">

      <div class="bbp" onclick="restar();restardos();this.parentNode.parentNode.removeChild(this.parentNode);">X</div>
    </div>
    <!-- =============== -->

    <div id="cont-p3" class="cont-p">
      <div id="producto-3">
        <div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
        cont-p3 cloned!<br><br>Input Value = 198</div>

      <input class="add-prod" type="num" value="198">

      <div class="bbp" onclick="restar();restardos();this.parentNode.parentNode.removeChild(this.parentNode);">X</div>
    </div>
    <!-- =============== -->
  </div>
  <!-- // productos -->

  <div class="derecha"></div>

  <div id="comp-p1" onClick="clickME();clickME2();">Clone 1</div>
  <div id="comp-p2" onClick="clickME();clickME2();">Clone 2</div>
  <div id="comp-p3" onClick="clickME();clickME2();">Clone 3</div>

  <div class="cont-num" id="clicks">0</div>
  <div class="cont-num" id="clicksdos">0</div>

  <div id="cont-resultado">
    <span>RESULT:</span><br>
    <input name="total" id="total">
    <br>Is the sum of the cloned divs
    <!--<p id='sumup'>Ver total</p>-->
  </div>

  <p><span>NOTE:</span><br>Here we are looking for only the cloned inputs can be sumed (and see the result in the box color gray).<br><br>The problem is that the current script does not apply a sume of the cloned inputs only... it adds ALL the inputs presents
    in the html...<br><br>So (1), how do you sum only the cloned inputs, ignoring those that are outside...?<br><br>And (2) also, how to subtract from the total result all the cloned divs that are deleted...?</p>

</div>
<!-- // container -->

<script>
  // Script that adds and subtracts the clicks

  var clicks = 0;

  function clickME() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks
  }
  var clicksdos = 0;

  function clickME2() {
    clicksdos += 1;
    document.getElementById("clicksdos").innerHTML = clicksdos;

    if (clicksdos === 1) {
      document.getElementById("cont-resultado").style.display = "block";
    }
  }
  if (clicksdos === 0) {
    document.getElementById("cont-resultado").style.display = "none";
  }

  function restar() {
    if (clicks > 0) clicks -= 1;
    document.getElementById("clicks").innerHTML = clicks;
  }

  function restardos() {
    if (clicksdos > 0) clicksdos -= 1;
    document.getElementById("clicksdos").innerHTML = clicksdos;
    if (clicksdos === 0) {
      document.getElementById("cont-resultado").style.display = "none";
    }
  }
</script>

Answer 1

Хорошо, вам нужна пара изменений.

Сначала вам нужно запустить селектор запросов и получить только элементы внутри места назначения.

const suma = function () {
  // NOTE: The query selector is very specific
  let x = Array.from(document.querySelectorAll(".derecha div .add-prod"));
  console.log(x);
  let sum = 0;
  for (var i = 0; i < x.length; i++) {
    console.log(x[i].value)
    sum += parseFloat(x[i].value);
  }
  console.log(sum);
  return sum;
}

Затем вам нужно будет вызывать метод SUM каждый раз, когда вы добавляете элемент:

$(document).ready(function () {
   $("#comp-p1").click(function () {
     $("#cont-p1").clone().appendTo(".derecha");
     document.getElementById("total").value = suma();
   });
  // =============
  $("#comp-p2").click(function () {
    $("#cont-p2").clone().appendTo(".derecha");
    document.getElementById("total").value = suma();
  });
  // =============
  $("#comp-p3").click(function () {
    $("#cont-p3").clone().appendTo(".derecha");
    document.getElementById("total").value = suma();
  });
});

Вот оно работает:

Добавлен код для удаления также элементов.

// Script for clone the div´s

$(document).ready(function() {
  $("#comp-p1").click(function() {
    $("#cont-p1").clone().appendTo(".derecha");
    displaySuma();
  });
  // =============
  $("#comp-p2").click(function() {
    $("#cont-p2").clone().appendTo(".derecha");
    displaySuma();
  });
  // =============
  $("#comp-p3").click(function() {
    $("#cont-p3").clone().appendTo(".derecha");
    displaySuma();
  });
});

const getParent = (match, node) => (node.matches(match)) ? node : getParent(match, node.parentNode);

// Deal with remove
document.addEventListener('click', (event) => {
  let target = event.target;
  if (target.matches('.bbp')) {
    restar();
    restardos();
    getParent('.derecha', target).removeChild(target.parentNode);
    displaySuma();
  }
})

// New Script for sum inputs
const displaySuma = () => document.getElementById("total").value = suma();

const suma = function() {
  let x = Array.from(document.querySelectorAll(".derecha div .add-prod"));
  let sum = 0;
  for (var i = 0; i < x.length; i++) {
    sum += parseFloat(x[i].value);
  }
  console.log(sum);
  return sum;
}
//console.log(suma());
document.getElementById("total").value = suma();

body {
  margin: 0 auto;
  color: #323232;
  width: 100%;
  height: 100%;
  line-height: 1.5;
  font-family: 'Roboto', serif
}

#container {
  width: 500px;
  margin: 0 auto
}

#container p {
  display: inline-block;
  margin-top: 20px
}

span {
  font-weight: bold;
  text-decoration: underline
}

#productos {
  display: none
}

.img-prod {
  display: inline-block;
  float: left;
  background: #000;
  margin-right: 10px
}

.img-prod img {
  width: 100%;
  height: auto;
  max-width: 70px;
  display: block;
  border: 0
}

#comp-p1,
#comp-p2,
#comp-p3 {
  width: 120px;
  height: 30px;
  margin-top: 15px;
  background: green;
  padding: 10px 0 5px;
  text-align: center;
  vertical-align: middle;
  color: #fff;
  cursor: pointer
}

.derecha {
  border: solid 1px #999;
  max-height: 400px;
  width: 350px;
  margin: 0 auto;
  text-align: center;
  padding: 10px 0;
  overflow-y: auto;
  float: right
}

#producto-1,
#producto-2,
#producto-3 {
  display: inline-block;
  width: 220px;
  padding: 10px;
  float: left;
  text-align: left;
  font-size: .9em;
  margin-right: 5px
}

#producto-1 {
  background: green;
  color: #fff
}

#producto-2 {
  background: #add8e6;
  color: #000
}

#producto-3 {
  background: #666;
  color: #fff
}

.cont-p {
  display: inline-block;
  margin: 7px auto;
  line-height: 1
}

.bbp {
  display: inline-block;
  float: right;
  width: 24px;
  height: 24px;
  text-align: center;
  background: red;
  color: #fff;
  margin-left: 5px;
  line-height: 1.5;
  cursor: pointer
}

.cont-num {
  float: left;
  width: 24px;
  height: 24px;
  margin: 20px 5px 0 18px;
  padding: 4px 3px 3px;
  background: red;
  text-align: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #fff
}

#mostrar {
  display: none
}

#mostrar {
  width: 100px;
  margin: 70px 0 0;
  padding: 10px;
  text-align: center;
  background: grey;
  color: #fff;
  cursor: pointer
}


/* ==== Style of Sume ==== */

.derecha input {
  width: 40px;
  display: block;
  margin: 0 auto 10px 0;
  padding: 2px 0;
  background: #f2f2f2;
  border: none;
  border: 1px solid #000;
  text-align: center
}

#cont-resultado {
  text-align: center;
  width: 110px;
  margin-top: 70px;
  background: grey;
  padding: 5px 10px 10px;
  color: #fff
}

#cont-resultado input {
  display: inline-block;
  margin: 10px auto;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 8px 0
}

#cont-resultado p {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background: grey;
  padding: 8px 10px;
  cursor: pointer
}

#total {
  display: block;
  width: 80px;
  text-align: center
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="productos">
    <!-- =============== -->
    <div id="cont-p1" class="cont-p">
      <div id="producto-1">
        <div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"> </div>cont-p1 cloned!<br><br>Input Value = 1</div>

      <input class="add-prod" type="num" value="1">

      <div class="bbp">X</div>
    </div>
    <!-- =============== -->
    <div id="cont-p2" class="cont-p">
      <div id="producto-2">
        <div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
        cont-p2 cloned!<br><br>Input Value = 1</div>

      <input class="add-prod" type="num" value="1">

      <div class="bbp">X</div>
    </div>
    <!-- =============== -->

    <div id="cont-p3" class="cont-p">
      <div id="producto-3">
        <div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
        cont-p3 cloned!<br><br>Input Value = 198</div>

      <input class="add-prod" type="num" value="198">

      <div class="bbp">X</div>
    </div>
    <!-- =============== -->
  </div>
  <!-- // productos -->

  <div class="derecha"></div>

  <div id="comp-p1" onClick="clickME();clickME2();">Clone 1</div>
  <div id="comp-p2" onClick="clickME();clickME2();">Clone 2</div>
  <div id="comp-p3" onClick="clickME();clickME2();">Clone 3</div>

  <div class="cont-num" id="clicks">0</div>
  <div class="cont-num" id="clicksdos">0</div>

  <div id="cont-resultado">
    <span>RESULT:</span><br>
    <input name="total" id="total">
    <br>Is the sum of the cloned divs
    <!--<p id='sumup'>Ver total</p>-->
  </div>

  <p><span>NOTE:</span><br>Here we are looking for only the cloned inputs can be sumed (and see the result in the box color gray).<br><br>The problem is that the current script does not apply a sume of the cloned inputs only... it adds ALL the inputs presents
    in the html...<br><br>So (1), how do you sum only the cloned inputs, ignoring those that are outside...?<br><br>And (2) also, how to subtract from the total result all the cloned divs that are deleted...?</p>

</div>
<!-- // container -->

<script>
  // Script that adds and subtracts the clicks

  var clicks = 0;

  function clickME() {
    clicks += 1;
    document.getElementById("clicks").innerHTML = clicks
  }
  var clicksdos = 0;

  function clickME2() {
    clicksdos += 1;
    document.getElementById("clicksdos").innerHTML = clicksdos;

    if (clicksdos === 1) {
      document.getElementById("cont-resultado").style.display = "block";
    }
  }
  if (clicksdos === 0) {
    document.getElementById("cont-resultado").style.display = "none";
  }

  function restar() {
    if (clicks > 0) clicks -= 1;
    document.getElementById("clicks").innerHTML = clicks;
  }

  function restardos() {
    if (clicksdos > 0) clicksdos -= 1;
    document.getElementById("clicksdos").innerHTML = clicksdos;
    if (clicksdos === 0) {
      document.getElementById("cont-resultado").style.display = "none";
    }
  }
</script>