Ir ao conteúdo
  • Cadastre-se
Matheus Evandro Rech

HTML calculo não esta indo

Recommended Posts

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>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


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

Compartilhar este post


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

nXVsS8u.png

 

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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. 

Compartilhar este post


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

Eu fiz isso só que não foi dai dando uma olhada no código e achei uma function duplicada no meu código ja arrumei obrigado 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Legal, quase imaginei ter deixado de prestar atenção em algum código errado.

Então sr @xkillerssx,defina como resolvido, assim ajudará o próximo que poderá passar pela mesma situação.

Abrçs.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×