Calculadora com campos dinamicos

[rubensxxx4]

Bom dia, pessoal.

Seguinte estou tentando juntar dois scripts: um que adiciona inputs automaticamente e outro que calcula.

Por enquanto estou conseguindo apenas adicionar os inputs. Não estou conseguindo pegar os nomes dinâmicos na função de cálculo, nem apagar os campos com o botão "apagar".

O script está assim:

<script language="JavaScript" type="text/javascript">   
/*
Script desenvolvido por: klonder
Postagem exclusiva em: http://www.forum.imasters.com.br
Liberado para uso e modificação.
*/

//Não altere esses valores!
var iCount = 0;
var iCampos = 1;
var hidden1; 


//Definindo quantos campos poderão ser criados (máximo);
var iCamposTotal = 31; 



//Função que adiciona os campos;
function addInput() {   
if (iCampos <= iCamposTotal) {
    hidden1 = document.getElementById("hidden1");
    
    //Criando uma variável que armazenará as informações da linha que será criada.
    //Os campos estão sendo colocados no interior de uma div, pois a linha contém muitos elementos;
    //Basta excluir a div, para excluir todos os elementos da linha;
    
    var texto = "<div id='linha"+iCount+"'>Preço: <input type='text' id='preço"+iCount+"' name='preço"+iCount+"' value='0'><br>Quantos: <input type='text' id='quantos"+iCount+"' id='quantos"+iCount+"' value='0' onblur='soma()'><br>Desconto: <input type='text' id='desconto"+iCount+"' name='desconto"+iCount+"' value='0' onblur='soma()'><br><hr size='1'><b>Total:<input type='text' id='total"+iCount+"' name='total"+iCount+"' ></b><br>    <input type='button' value='Apagar campo' onClick='removeInput(\"linha"+iCount+"\")'></div>";      
    //var texto = "<div id='linha"+iCount+"'>Preço: <input type='text' id='preço' name='preço' value='0'><br>Quantos: <input type='text' id='quantos' id='quantos' value='0' onblur='soma()'><br>Desconto: <input type='text' id='desconto' name='desconto' value='0' onblur='soma()'><br><hr size='1'><b>Total:<input type='text' id='total' name='total' ></b><br>    <input type='button' value='Apagar campo' onClick='removeInput(\"linha"+iCount+"\")'></div>";      
  
    //Capturando a div principal, na qual os novos divs serão inseridos:
    var camposTexto = document.getElementById('camposTexto');   
    camposTexto.innerHTML = camposTexto.innerHTML+texto;
  
    //Escrevendo no hidden os ids que serão passados via POST;
    //No código ASP ou PHP, você poderá pegar esses valores com um split, por exemplo;
        if (hidden1.value == "") {
            document.getElementById("hidden1").value = iCount;
        }else{
            document.getElementById("hidden1").value += ","+iCount;
        }
iCount++;
iCampos++;
}   
}
   
//Função que remove os campos;
function removeInput(e) {
   var pai = document.getElementById('camposTexto');
   var filho = document.getElementById(e);
   hidden1 = document.getElementById("hidden1");
   var campoValor = document.getElementById("texto"+e.substring(5)).value;
   var lastNumber = hidden1.value.substring(hidden1.value.lastIndexOf(",")+1);

   if(confirm("O campo que contém o valor:\n» "+campoValor+"\nserá excluído permanentemente!\n\nDeseja prosseguir?")){
        var removido = pai.removeChild(filho);
        //Removendo o valor de hidden1:
        if (e.substring(5) == hidden1.value) {
            hidden1.value = hidden1.value.replace(e.substring(5),"");
        }else if(e.substring(5) == lastNumber) {
            hidden1.value = hidden1.value.replace(","+e.substring(5),"");
        }else{
            hidden1.value = hidden1.value.replace(e.substring(5)+",","");        
        }
    iCampos--;
    }
}
</script> 

&lt;script language="JavaScript">
function soma(){
    document.getElementById("total").value = '0';
    var preço = parseFloat(document.getElementById("preço"+iCount).value);
    var quantos = parseFloat(document.getElementById("quantos"+iCount).value);
    var desconto = parseFloat(document.getElementById("desconto"+iCount).value);
    document.getElementById("total"+iCount).value = preço * quantos - desconto;
}
</SCRIPT>

<form  name="my_form" id="my_form" action="" method="post">  
<input type="button" value="Criar campo texto" name="add_input" id="add_input" onClick="addInput();">  
<div id="camposTexto"></div>
<br><br>Ajuste o campo abaixo para "hidden" no código-fonte.
<br>O valor passado será utilizado na página ASP ou PHP, por exemplo, servindo de controle dos ids passados:
<br><input type="text" name="hidden1" id="hidden1" value="">
</form>

Como devo fazer? Alguém sabe???

[.Andreia.]

você tem que debugar teu codigo, um dos erros que aponta é esta linha:

var campoValor = document.getElementById("texto"+e.substring(5)).value;

testando, a primeira ocorrencia seria o objeto texto0, mas não existe este objeto

[rubensxxx4]

Olha, limpei um pouco o código. Mas a soma ainda não está funcionando nos campos dinâmicos, só no fixo. Vejam:

<html>
<head>
<title>Dynamic Form</title>
<script language="javascript">
function changeIt()
{
var i = 1;
my_div.innerHTML = my_div.innerHTML +"<br>Preço: <input type='text' name='preço'+ i value='0'><br>Quantos: <input type='text' name='quantos'+ i value='0' onblur='soma()'><br>Desconto: <input type='text' name='desconto'+ i value='0' onblur='soma()'><br><hr size='1'><b>Total:<input type='text' name='total'+ i></b>"

}
</script>

<script language="JavaScript">
function soma(){

document.getElementById("total").value = '0'
var preço = parseFloat(document.getElementById("preço").value);
var quantos = parseFloat(document.getElementById("quantos").value);
var desconto = parseFloat(document.getElementById("desconto").value);
document.getElementById("total").value = preço * quantos - desconto;
}
</SCRIPT>
</head>
<body>

<form name="form" action="post" method="">
Preço: <input type="text" id="preço" value="0"><br>
Quantos: <input type="text" id="quantos" value="0" onblur="soma()"><br>
Desconto: <input type="text" id="desconto" value="0" onblur="soma()"><br><hr size="1">
<b>Total:<input type="text" id="total"></b>
<input type="button" value="test" onClick="changeIt()">
<div id="my_div"></div>

</body>