Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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?

Compartilhar este post


Link para o post
Compartilhar em outros 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/

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros 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

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.