Jump to content
lvsis

Igualdade de id no Javascript

Recommended Posts

Tenho  uma função que faz o calculo do valor total de acordo com a quantidade:

 

function total(){
    qtd=document.getElementById('qtd').value;
    valor_u=document.getElementById('valor_u').value;
    
    document.getElementById('valor_t').value='R$' + valor_u * qtd;    
}

 

Só que o problema é que os inputs tem o mesmo id. Tem como diferenciá-los de outra maneira?

Share this post


Link to post
Share on other sites

Eu não sei como você recebe os dados nos input, então supus que você quer calcular dois valores de acordo com o quê o usuário digitar no campo e realizar algum cálculo bem louco.

 

Esse é o link para a minha solução na prática:

https://jsfiddle.net/iszwnc/htcky6sd/

Share this post


Link to post
Share on other sites

Ivsis,

 

Não entendi seu problema, pois segundo o seu código vejo que cada input tem um id diferente, que são: qtd, valor_u e valor_t.

 

Sobre id, ela deve ser única em toda a página. Uma página não deve conter dois ou mais elementos com id iguais.

 

O mais correto seria você usar id's diferentes. Contudo se por algum motivo isso seja necessário você pode trocar o getElementById por getElementsByClassName. Assim todos os elementos que tiverem uma determinada classe do CSS serão usados. Como exemplo:

<script>
function total(){
    qtd=document.getElementById('qtd').value;
    valor_u=document.getElementsByClassName('classe_valor_unitario').value;

    document.getElementsByClassName('classe_valor_total').value='R$' + valor_u * qtd;    
}
</script>

<input type="text" id="igual" class="classe_valor_unitario">
<input type="text" id="igual" class="classe_valor_total">

Lembrando, novamente, que não se deve usar duas id's iguais no mesmo documento.

 

 

 

Share this post


Link to post
Share on other sites

Então, como o colega acima disse, não se deve ter 2 'id's no mesmo documento/página.

 

Uma maneira seria varrer todos os elementos da pagina pela tag (input) por exemplo, e comparar,   EX:

 

Esse elemento tem o 'id=meuNumeroDuplicado' ? 

 

 

Um código de exemplo

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
<div>
	<input type="text" name="qtd" id="qtd" />
	<input type="text" name="qtd" id="qtd" />
	
	<button id="calcular">Fazer o calc</button>
</div>


<script type="text/javascript">
document.getElementById('calcular').addEventListener('click', function() {

	var idDuplicados = document.getElementsByTagName("input");
	var total = 0;
	
	for(var i = 0; i < idDuplicados.length;i++){
		
		if(idDuplicados[i].id != null){
			//Pega todos as tags 'input' cujo o ID é = 'qtd'
			if(idDuplicados[i].id == 'qtd'){				
				total += parseFloat(idDuplicados[i].value);
			}
		}
	}
	alert(total);
});
</script>
</body>
</html>

Demo:

https://fiddle.jshell.net/qqmz9rzt/1/

 

 

Você poderia facilmente alterar isso para um data-attribute ou para classe.

ficando de uma maneira mais correta.


Ps: parseFlot convete String -> Números Flutuantes.

ps2: Cuidado com soma, não usar virgula e sim ponto para decimais 

 

 

Share this post


Link to post
Share on other sites

Os IDs iguais acontecem porque tenho um botão que insere o seguinte código sempreque clicado:

<th> Qtd: </th> <td> <input type="text" id="qtd" name="qtd[]" size="5" onblur="total()" /> </td>
    <th> Produto: </th>
    <td>
        <select name="produto[]">
            <option value=""> Selecione um produto </option>';
                                                
            do{
                echo'<option value="'.$busca['cod_produto'].'"> '.$busca['produto'].' </option>';
            }while($busca=mysqli_fetch_assoc($sql));
    
        echo'
        </select>
    </td>
    <th> Valor unt: </th> <td> <input type="text" id="valor_u" size="10" /> </td>
    <th> Valor total: </th> <td> <input type="text" id="valor_t" name="total[]" size="10" /> </td>
    <tr />

 

Ai a função que citei acima só funciona no primeiro campo

Share this post


Link to post
Share on other sites

Cara, ID é único, não pode se repetir.

Faz o seguinte, cria uma variável no javascript para controlar quantos elementos você já adicionou, e sempre vai somando 1 quando adicionar o elemento, no momento que você for incluir o elemento, concatena esta variável, assim os IDs não se repetirão

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.