How to copy class values to another class in Javascript?

Asked

Viewed 140 times

1

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Protipo Software de Evento</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
<p id="demo" style="font-family:courier"></p>
<form style="background-color: gray;" action="" method="post" id="formulario">
<input  type="button" id="novoProd" value="Novo serviço" />
<input type="submit" value="Enviar" onclick="myReport()"/>
Valor total do evento é de R$
<p style="display:inline; color:yellow"id="result"></p>
<p class="demo"></p>
<div id="item" class="item">

<!-- Serviços -->
<label>Selecione o(s) serviço(s) para o seu evento:</label>
<select name="produtoId[]">
<option value="Buffet1">Buffet 1</option>
<option value="Decoração1">Decoração 1</option>
<option value="Transporte1">Transporte 1</option>
</select>

<!-- TOTAL de custos -->
<input type="number" class="qtd" onchange="myTotal()">

<!-- TOTAL de cada LINHA -->
<!-- <table style="display:inline"><th>R$</th></table> -->
<p style="display:inline" class='til'></p>
</div>

</form>
<!-- Calcula o TOTAL -->
<script>
function myTotal() {
var total = 0;
var total2 = 0;
var x = document.getElementsByClassName("qtd");
var i;
for (i = 0; i < x.length; i++) {
total = total + parseInt(x[i].value);
total2 = parseInt(x[i].value);
}
document.getElementById("result").innerHTML = total;
document.getElementsByClassName("til")[0].innerHTML = total2;
}
</script>

<script type="text/javascript">
$(document).ready(function() {
$("#novoProd").click(function() {
var novoItem = $("#item").clone().removeAttr('id');
novoItem.children('input').val(''); //limpa o campo quantidade
$("#formulario").append(novoItem);
});
});
</script>
</body>
</html>



The script tries:

Bring the value of class "Qtd" to "tiled" by CLASS (Here it works)

How to follow the "Qtd" Class Array with the "til" CLASS"?

javascript html5

  • document.getElementsByClassName("til").innerHTML That won’t work because the getElementsByClassName returns a HTMLCollection which is kind of a Array

  • 1

    The code is all wrong, cloning elements with id. You cannot duplicate id’s

  • Ready @Sam, no longer copying ID’s

  • Why do you use id and do a trick to remove the attribute in the script? rs...

  • We only use id when an element is unique, and look at it like that. Even though the element is unique what I see around is using class.

  • @Sam, use ID only to calculate the total that is visualized at the top, it is unique and does not repeat. Lines repeat, so I have to receive the array value of the input class "Qtd" and return to the side for the "til" class of the <p tag>

  • But it does not need id if you have a class in the same element. If you want to get the first element with the class just do $(".item"), or $(".item:eq(0)"... For me to put id and then remove in the clone... don’t you need that, young man

  • Also doing a mix of pure JS with jQuery rs.. Since you paid 80KB to use jQuery, do everything in jQuery even. :)

  • Missing also indent the code, get confused to understand. Good luck there!

  • @Sam, I found; <input type="number" class="qtd" id="on" onchange="myTotal()"> I removed it because I was using it in other test functions. Current version is <input type="number" class="qtd" onchange="myTotal()">

  • 1

    Do not change the title of the question by asking (solved)... if it has been solved you must mark an answer with , as you have already done. Everyone will know it’s been solved.

Show 6 more comments

1 answer

2


The function getElementsByClassName as the name says returns Elements or is a kind of Array calling for HTMLCollection.

In your code you are trantando as a HTMLElement (trying to access .innerHTML) when it is actually an array of HTMLElements

Possible solution: document.getElementsByClassName("til")[0].innerHTML

Another thing I noticed is that you 'write' the value in HTML while still calculating, that is, within the for

function myTotal() {
    var total = 0;
    var total2 = 0;
    var x = document.getElementsByClassName("qtd");
    var i;

    for (i = 0; i < x.length; i++) {
        total = total + parseInt(x[i].value);
        total2 = parseInt(x[i].value);
    }
    document.getElementById("result").innerHTML = total;
    document.getElementsByClassName("til")[0].innerHTML = total2;
}

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.