HTML calculo não esta indo

Matheus Evandro Rech · 11 de junho de 2018

Ola galera do Clube do Hardware, eu tenho uma tabela que estava 100% funcionando mais hoje de manha quando abri o arquivo o calculo não esta mais indo alguém pode ajudar ?

Segue o código:

Spoiler


<!DOCTYPE html>
<html>
<head>
<title>Calculadora Genetica</title>
<style>

input#calculo {
    list-style-type: none;
    width: 99px;
    border: 5px solid black;
    padding: 5px;
    margin: 5px;
    background-color:yellow;
    color:black;
    border: 10px outset black;
    font-family: keep calm;
}

input#reset {
    list-style-type: none;
    width: 100px;
    border: 5px solid black;
    padding: 5px;
    margin: 5px;
    background-color:yellow;
    color:black;
    border: 10px outset black;
    font-family: keep calm;
}

input#Q1 {
    list-style-type: none;
    width: 30px;
    border: 5px solid black;
    padding: 5px;
    margin: 5px;
    color:black;
    font-family: keep calm;
}

input#Q01 {
    list-style-type: none;
    width: 20px;
    border: 5px solid black;
    padding: 5px;
    margin: 5px;
    color:black;
    font-family: keep calm;
}

#textonormal {
    align:right;
    color:black;
    font-family: keep calm;
    background-color: yellow;
}

table#lateral {
    width: 100%;
    color:black;
    align:right;
    border: 10px solid green;
    font-family: keep calm;
    margin: 5px;
    padding: 2px;
    target: _top;
    background-color: #33cc33;
}


</style>
</head>
<body bgcolor= "#ffffff">

<form name="calcular2">
                                                                      <!--1 lei de mendel-->
<center>
<p id="textonormal">1ª Lei de mendel</p><br>
<table>
    <tr>
        <td></td>
        <td id="Q01"><input type="text" id="Q01" maxlength="1" name="ans" class="Q01" /></td>
        <td id="Q02"><input type="text" id="Q01" maxlength="1" name="ans1" class="Q02" /></td>
    </tr>
    <tr>
        <td id="Q03"><input type="text" id="Q01" maxlength="1" name="ans2" class="Q03" /></td>
        <td id="Q04" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q05" style="border:2px solid orange;font-family:keep calm;"></td>
    </tr>
    <tr>
        <td id="Q06"><input type="text" id="Q01" maxlength="1" name="ans3" class="Q06" /></td>
        <td id="Q07" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q08" style="border:2px solid orange;font-family:keep calm;"></td>
    </tr>
</table><br>
<input type="button" id="calculo" value="Calcular" onclick="calcular2();"/>
</form><br>
<input type="Reset" id="reset" value="Limpar"><br>
<p id="textonormal">Dominante</p>
<p id="textonormal">Aa</p>
<p id="textonormal">Homozigoto Recessivo</p>
<p id="textonormal">aa</p>
<p id="textonormal">Homozigoto Dominante</p>
<p id="textonormal">AA</p>
<p id="textonormal">Recessivo</p>
<p id="textonormal">a</p>
<p id="textonormal">Dominante</p>
<p id="textonormal">A</p>
<p id="textonormal">OBS: O Dominante vai sempre na frente ex: Aa</p>
<br>
</center>
<center>
                                                                      <!--2 lei de mendel-->
<p id="textonormal">2ª Lei De Mendel</p>
<br>
<form name="calcular">
<br>
<table>
    <tr>
        <td></td>
        <td id="Q1"><input type="text" id="Q1" maxlength="2" class="Q1" /></td>
        <td id="Q2"><input type="text" id="Q1" maxlength="2" class="Q2" /></td>
        <td id="Q3"><input type="text" id="Q1" maxlength="2" class="Q3" /></td>
        <td id="Q4"><input type="text" id="Q1" maxlength="2" class="Q4" /></td>
    </tr>
    <tr>
        <td id="Q5"><input type="text" id="Q1" maxlength="2" class="Q5" /></td>
        <td id="Q6" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q7" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q8" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q9" style="border:2px solid orange;font-family:keep calm;"></td>
    </tr>
    <tr>
        <td id="Q10"><input type="text" id="Q1" maxlength="2" class="Q10" /></td>
        <td id="Q11" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q12" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q13" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q14" style="border:2px solid orange;font-family:keep calm;"></td>
    </tr>
    <tr>
        <td id="Q15"><input type="text" id="Q1" maxlength="2" class="Q15" /></td>
        <td id="Q16" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q17" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q18" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q19" style="border:2px solid orange;font-family:keep calm;"></td>
    </tr>
    <tr>
        <td id="Q20"><input type="text" id="Q1" maxlength="2" class="Q20" /></td>
        <td id="Q21" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q22" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q23" style="border:2px solid orange;font-family:keep calm;"></td>
        <td id="Q24" style="border:2px solid orange;font-family:keep calm;"></td>
    </tr>
</table>

<br>

<br>
<input type="button" id="calculo" value="Calcular" onclick="calcular()"/>
<br>
<input type="Reset" id="reset" value="Limpar">
</form>
</center>

<p id="textonormal" align="right">Criado por Matheus Evandro Rech</p>


<script>
function calcular(){

	var Q1 = document.getElementsByClassName("Q1")[0].value;
	var Q2 = document.getElementsByClassName("Q2")[0].value;
	var Q3 = document.getElementsByClassName("Q3")[0].value; 
	var Q4 = document.getElementsByClassName("Q4")[0].value;
        var Q5 = document.getElementsByClassName("Q5")[0].value;
	var Q10 = document.getElementsByClassName("Q10")[0].value;
	var Q15 = document.getElementsByClassName("Q15")[0].value;
	var Q20 = document.getElementsByClassName("Q20")[0].value;

	//somas
	var Q6 = Q1+Q5;
	var Q7 = Q2+Q5;
	var Q8 = Q3+Q5;
	var Q9 = Q4+Q5;
	var Q11 = Q1+Q10;
	var Q12 = Q2+Q10;
	var Q13 = Q3+Q10;
	var Q14 = Q4+Q10;
	var Q16 = Q1+Q15;
	var Q17 = Q2+Q15;
	var Q18 = Q3+Q15;
	var Q19 = Q4+Q15;
	var Q21 = Q1+Q20;
	var Q22 = Q2+Q20;
	var Q23 = Q3+Q20;
	var Q24 = Q4+Q20;

	document.getElementById("Q6").innerHTML = Q6;
	document.getElementById("Q7").innerHTML = Q7;
	document.getElementById("Q8").innerHTML = Q8;
	document.getElementById("Q9").innerHTML = Q9;
	document.getElementById("Q11").innerHTML = Q11;
	document.getElementById("Q12").innerHTML = Q12;
	document.getElementById("Q13").innerHTML = Q13;
	document.getElementById("Q14").innerHTML = Q14;
	document.getElementById("Q16").innerHTML = Q16;
	document.getElementById("Q17").innerHTML = Q17;
	document.getElementById("Q18").innerHTML = Q18;
	document.getElementById("Q19").innerHTML = Q19;
	document.getElementById("Q21").innerHTML = Q21;
	document.getElementById("Q22").innerHTML = Q22;
	document.getElementById("Q23").innerHTML = Q23;
	document.getElementById("Q24").innerHTML = Q24;
}

function alteraMaiusculo(){
	var valor = document.getElementById("campo").texto;
	var novoTexto = valor.value.toUpperCase();
	valor.value = novoTexto;
	}

function calcular2(){

	var Q01 = document.getElementsByClassName("Q01")[0].value;
	var Q02 = document.getElementsByClassName("Q02")[0].value;
	var Q03 = document.getElementsByClassName("Q03")[0].value; 
	var Q06 = document.getElementsByClassName("Q06")[0].value; 

	//somas
	var Q04 = Q01+Q03;
	var Q05 = Q03+Q02;
	var Q07 = Q01+Q06;
	var Q08 = Q06+Q02;

	document.getElementById("Q04").innerHTML = Q04;
	document.getElementById("Q05").innerHTML = Q05;
	document.getElementById("Q07").innerHTML = Q07;
	document.getElementById("Q08").innerHTML = Q08;
}

</script>
</body>
</html>

xkillerssx · 11 de junho de 2018

Não tem necessidade de adicionar name com "calcula2" e "calcula" na tag <form>, isso acaba interferindo no javascript para o que você quer fazer.

Basta alerar os form's de <form name="calcular2"> e <form name="calcular"> para <form> que seu código volta a funcionar.

Matheus Evandro Rech · 11 de junho de 2018

5 horas atrás, xkillerssx disse:

Não tem necessidade de adicionar name com "calcula2" e "calcula" na tag <form>, isso acaba interferindo no javascript para o que você quer fazer.

Basta alerar os form's de <form name="calcular2"> e <form name="calcular"> para <form> que seu código volta a funcionar.

já estava assim antes de parar de funcionar e não interfere porque o javascript não tem nenhuma conexão com o <form> e mesmo alterando não adiantou em nada

xkillerssx · 11 de junho de 2018

7 minutos atrás, Matheus Evandro Rech disse:

já estava assim antes de parar de funcionar e não interfere porque o java não tem nenhuma conexão com o <form> e mesmo alterando não adiantou em nada

Estranho, aqui funcionou apenas removendo os name.

Acabei de testar novamente, segue print abaixo,

Caso não funcione mesmo, vamos aguardar alguem que entenda mais sobre o assunto !

DHB Serviços · 11 de junho de 2018

Boa tarde sr @xkillerssx,

você está definindo o getElementsByClassName em array.

3 horas atrás, Matheus Evandro Rech disse:

var Q01 = document.getElementsByClassName("Q01")[0].value;

É conveniente com que você limpe todos os id's e class's.

No que seria <td> defina como id=tx01

No que seria <input> defina como id=q01

3 horas atrás, Matheus Evandro Rech disse:

var Q04 = Q01+Q03;

As variáveis de soma defina como var r01 = q01 + q03

Ficará mais fácil de você identificar aonde está o erro.

E sim, remova os array. Somente os array.

Matheus Evandro Rech · 11 de junho de 2018

50 minutos atrás, diegofsti disse:

Boa tarde sr @xkillerssx,

você está definindo o getElementsByClassName em array.

É conveniente com que você limpe todos os id's e class's.

No que seria <td> defina como id=tx01

No que seria <input> defina como id=q01

As variáveis de soma defina como var r01 = q01 + q03

Ficará mais fácil de você identificar aonde está o erro.

E sim, remova os array. Somente os array.