HTML estou criando uma tabela genética e estou com uma erro

Matheus Evandro Rech · 10 de maio de 2018

ola pessoal estou criando uma tabela que em biologia usamos para calcular os genes dos filhos!!

eu estou com um quebra cabeça, sou novo em programação em html, sei alguma coisa mais não consigo resolver um problema, algum tempo atras eu criei uma calculadora para testar um novo conteúdo que aprendi deu certo depois de muita dor de cabeça.

este foi o código da calculadora:

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

input#calculo {
    list-style-type: none;
    width: 50px;
    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;
}

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

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

<br>
<center>

<font size = "17" face = "keep calm"><abbr title="Adição">+</abbr> = Adição<br></font size = "17" face = "keep calm">
<font size = "17" face = "keep calm"><abbr title="Subtração">-</abbr> = Subtração<br></font size = "17" face = "keep calm">
<font size = "17" face = "keep calm"><abbr title="Multiplicação">*</abbr> = Multiplicação<br></font size = "17" face = "keep calm">
<font size = "17" face = "keep calm"><abbr title="Divisão">/</abbr> = Divisão<br></font size = "17" face = "keep calm">

</center>




<center>
<form name="calculator" >
<input type="button" id="calculo" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" id="calculo" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" id="calculo" value="3" onClick="document.calculator.ans.value+='3'">
<br>
<input type="button" id="calculo" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" id="calculo" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" id="calculo" value="6" onClick="document.calculator.ans.value+='6'">
<br>
<input type="button" id="calculo" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" id="calculo" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" id="calculo" value="9" onClick="document.calculator.ans.value+='9'">
<br>
<input type="button" id="calculo" value="0" onClick="document.calculator.ans.value+='0'">


<br>
<input type="button" id="calculo" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" id="calculo" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" id="calculo" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" id="calculo" value="/" onClick="document.calculator.ans.value+='/'">

<br>
<input type="button" id="calculo" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>

<input type="textfield" id="texto" name="ans" value=""><br>

<input type="Reset" id="reset" value="Limpar">


</center>
</form>
</body>
</html>

eu confesso que algumas partes peguei na internet porque não sabia como funcionava já que só uso para fiz meus de estudo.

já nessa tabela estou enfrentando um pequeno problema, eu quero pegar um um input type textfield que o usuário vai inserir a letra desejada em quatro inputs

sei que parece confuso olhando o css do projeto fica mais fácil:

esse é o projeto:

<!DOCTYPE html>
<html>
<head>
<title>Calculo Genetico</title>
<style>

input#calculo {
    list-style-type: none;
    width: 50px;
    border: 5px solid black;
    padding: 5px;
    margin: 5px;
    background-color:yellow;
    color: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;
    font-family: keep calm;
}

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

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


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


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

<br>

<center>
<table>
    <tr>
      <td><input type="textfield" id="nao" name="ans" value=""></td>    
     
     <td><input type="textfield" id="letra" value="" onClick="document.calculator.ans.value+=''"></td>
      
      <td><input type="textfield" id="letra" value="" onClick="document.calculator.ans.value+='a'"></td>
    </tr>
    <tr>
      <td><input type="textfield" id="letra" value="" onClick="document.calculator.ans.value+=''"></td>
      
      <td><input type="textfield" id="texto" name="ans" value=""></td>
      <td><input type="textfield" id="texto" name="ans" value=""></td>
    </tr>
    <tr>
      <td><input type="textfield" id="letra" value="" onClick="document.calculator.ans.value+=''"></td>
      <td><input type="textfield" id="texto" name="ans" value=""></td>
      <td><input type="textfield" id="texto" name="ans" value=""></td>
    </tr>
</table>
<input type="button" id="calculo" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"><br>
<input type="Reset" id="reset" value="Limpar">

</center>
</body>
</html>

na calculadora os números não podem ser alterados nos seus quadrados porque estão com value referente ao seu numero

<input type="button" id="calculo" value="1" onClick="document.calculator.ans.value+='1'">

já na tabela o usuário vai digitar esse valor ao input no quadrado e clicando no = o valor sera calculado

sei que é difícil de entender mais se você ver uma tabela genética você vai entender.

se alguém conseguir me ajudar agradeço.

groutmoustache · 10 de maio de 2018

Ainda estou confuso sobre seu objetivo real.

Fala pra gente, em poucas linhas e sem enrolação, oquê você quer fazer?

Matheus Evandro Rech · 11 de maio de 2018

uma tabela 3x3 que o usuário da pagina digite em 4 quadrados da tabela dados de um calculo e quando ele clique no botão de = de o resultado

ex

n Q1 Q2

Q3 Q4 Q5

Q6 Q7 Q8

o n é nulo e os Q1,Q2,Q3... são os quadrados da tabela, o usuário ira digitar a letra nos quadrados Q1 Q2 Q3 e Q6 e nos outros quadrados o resultado sera apresentado.

o calculo seria assim:

A a

a Aa aa

a Aa aa

o resultado está em negrito, o calculo seria Q3 + Q1 = Q4, Q3 + Q2 = Q5, Q6 + Q1 = Q7, Q6 + Q2 = Q8.

nos quadrados os cálculos serão com letras e não com números, as letras maiúsculas sempre na frente.

se ninguém entendeu não sei como explicar seria mais fácil se você soubesse o que é a tabela.

Matheus Evandro Rech · 11 de maio de 2018

olha eu dei uma editada o style esta enorme,

mais agora ja esta pronto so nao consigo fazer com que as letras se somem dei uma lida e nao achei nada referente

o codigo ficou assim se você abrir vai entender:

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

input#calculo {
    list-style-type: none;
    width: 50px;
    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;
}

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

#texto1 {
    list-style-type: none;
    width: 40px;
    border: 5px solid orange;
    padding: 5px;
    margin: 5px;
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

#texto2 {
    list-style-type: none;
    width: 40px;
    border: 5px solid blue;
    padding: 5px;
    margin: 5px;
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

#texto3 {
    list-style-type: none;
    width: 40px;
    border: 5px solid red;
    padding: 5px;
    margin: 5px;
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

#texto4 {
    list-style-type: none;
    width: 40px;
    border: 5px solid green;
    padding: 5px;
    margin: 5px;
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

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

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

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

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

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

#textoinicial {
    background-color:yellow;
    color:black;
    font-family: keep calm;
}


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



<br>

<center>

<p id="textoinicial">Clique Na letra para adicionala ao seu quadrado!!</p>
<br>
<form name="calculator">
<input type="button" id="texto1" value="A" onClick="document.calculator.ans1.value+='A'">
<input type="button" id="texto1" value="a" onClick="document.calculator.ans1.value+='a'">


<input type="button" id="texto2" value="A" onClick="document.calculator.ans2.value+='A'">
<input type="button" id="texto2" value="a" onClick="document.calculator.ans2.value+='a'">

<br>
<table>
    <tr>
      <td><input type="textfield" id="nao" value=""></td>
      <td><input type="textfield" id="texto5" name="ans1" value=""></td>
      <td><input type="textfield" id="texto6" name="ans2" value=""></td>
    </tr>
    <tr>
      <td><input type="textfield" id="texto7" name="ans3" value=""></td>
      <td><input type="textfield" id="texto" name="ans4" value=""></td>
      <td><input type="textfield" id="texto" name="ans5" value=""></td>
    </tr>
    <tr>
      <td><input type="textfield" id="texto8" name="ans6" value=""></td>
      <td><input type="textfield" id="texto" name="ans7" value=""></td>
      <td><input type="textfield" id="texto" name="ans8" value=""></td>
    </tr>
</table>
<br>

<input type="button" id="texto3" value="A" onClick="document.calculator.ans3.value+='A'">
<input type="button" id="texto3" value="a" onClick="document.calculator.ans3.value+='a'">

<input type="button" id="texto4" value="A" onClick="document.calculator.ans6.value+='A'">
<input type="button" id="texto4" value="a" onClick="document.calculator.ans6.value+='a'">

<br>

<input type="button" id="calculo" value="+" onClick="document.calculator.ans1.value+='+'">

<br>
<input type="button" id="calculo" value="=" onClick="document.calculator.ans1.value=eval(document.calculator.ans1.value)">
<br>
<input type="Reset" id="reset" value="Limpar">
</center>
<script>
  var A+A = AA;
  var A+a = Aa;
  var a+A = Aa;
  var a+a = aa;
document.getElementById("demo").innerHTML = AA;
document.getElementById("demo1").innerHTML = A+a;
document.getElementById("demo2").innerHTML = a+A;
document.getElementById("demo3").innerHTML = a+a;
</script>
</form>
</body>
</html>

DiF · 11 de maio de 2018

@Matheus Evandro Rech Basicamente você fez os cálculos errados, o onclick nos campos estão errados.

Você só precisa definir um ID para os elementos da tabela do Q1 ao Q8, nos valores Q1, Q2, Q3 e Q6 você define uma CLASS.

Então no javascript você recupera o valor do campo input text com:

document.getElementsByClassName("Q1")[0].value;

Isso vale para os outros que serão os campos onde o usuário vai digitar.

Então sua tabela ficaria:

<table>
    <tr>
        <td></td>
        <td id="Q1"><input type="text" class="Q1" /></td>
        <td id="Q2"><input type="text" class="Q2" /></td>
    </tr>
    <tr>
        <td id="Q3"><input type="text" class="Q3" /></td>
        <td id="Q4"></td>
        <td id="Q5"></td>
    </tr>
    <tr>
        <td id="Q6"><input type="text" class="Q6" /></td>
        <td id="Q7"></td>
        <td id="Q8"></td>
    </tr>
</table>

<input type="button" value="Calcular" onclick="calcular()" />

Repare que como são 8 células, cada um tem sua ID. A class, será o responsável para recuperar o valores dos campos input.

Repare que no botão calcular chama uma função chamada calcular()

Esta função é assim:

function calcular(){

    //pega os valores dos campos input baseado pela class. 
	var Q1 = document.getElementsByClassName("Q1")[0].value;
	var Q2 = document.getElementsByClassName("Q2")[0].value;
	var Q3 = document.getElementsByClassName("Q3")[0].value; 
	var Q6 = document.getElementsByClassName("Q6")[0].value; 

	//soma as letras
	var Q4 = Q1+Q3;
	var Q5 = Q3+Q2;
	var Q7 = Q1+Q6;
	var Q8 = Q6+Q2;

    //Insere os resultados nas células Q4, Q5, Q7 e Q8
	document.getElementById("Q4").innerHTML = Q4;
	document.getElementById("Q5").innerHTML = Q5;
	document.getElementById("Q7").innerHTML = Q7;
	document.getElementById("Q8").innerHTML = Q8;

}

Veja funcionando aqui: https://jsfiddle.net/618kroce/2/

No exemplo, deixei a tabela de referência e a tabela para somar

Matheus Evandro Rech · 12 de maio de 2018

Muito obrigado você me ajudou muito eu criei tambem um botao para adicionar a letra grande ou pequena no Q1 Q2 Q3 Q6

adicionado 27 minutos depois

Resultado final:

<!DOCTYPE html>
<html>
<head>
<title>Calculadora</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;
}

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

#texto1 {
    list-style-type: none;
    width: 40px;
    border: 5px solid orange;
    padding: 5px;
    margin: 5px;
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

#texto2 {
    list-style-type: none;
    width: 40px;
    border: 5px solid blue;
    padding: 5px;
    margin: 5px;
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

#texto3 {
    list-style-type: none;
    width: 40px;
    border: 5px solid red;
    padding: 5px;
    margin: 5px;
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

#texto4 {
    list-style-type: none;
    width: 40px;
    border: 5px solid green;
    padding: 5px;
    margin: 5px;
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

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

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

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

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

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

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


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

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


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

#textoinicial {
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

#demo {
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

#demo1 {
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

#demo2 {
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

#demo3 {
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

#textonormal {
    color:black;
    font-family: keep calm;
}

#demo4 {
    background-color:yellow;
    color:black;
    font-family: keep calm;
}

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



<br>

<center>

<p id="textoinicial">Clique Na letra para adicionala ao seu quadrado!!</p>
<br>
<form name="calculator">
<input type="button" id="texto1" id="texto" value="A" onClick="document.calculator.ans.value+='A'">
<input type="button" id="texto1" value="a" onClick="document.calculator.ans.value+='a'">


<input type="button" id="texto2" value="A" onClick="document.calculator.ans1.value+='A'">
<input type="button" id="texto2" value="a" onClick="document.calculator.ans1.value+='a'">

<br>
<table>
    <tr>
        <td></td>
        <td id="Q1"><input type="text" id="Q1" name="ans" class="Q1" /></td>
        <td id="Q2"><input type="text" id="Q2" name="ans1" class="Q2" /></td>
    </tr>
    <tr>
        <td id="Q3"><input type="text" id="Q3" name="ans2" class="Q3" /></td>
        <td id="Q4"></td>
        <td id="Q5"></td>
    </tr>
    <tr>
        <td id="Q6"><input type="text" id="Q6" name="ans3" class="Q6" /></td>
        <td id="Q7"></td>
        <td id="Q8"></td>
    </tr>
</table>
<br>

<input type="button" id="texto3" value="A" onClick="document.calculator.ans2.value+='A'">
<input type="button" id="texto3" value="a" onClick="document.calculator.ans2.value+='a'">

<input type="button" id="texto4" value="A" onClick="document.calculator.ans3.value+='A'">
<input type="button" id="texto4" value="a" onClick="document.calculator.ans3.value+='a'">

<br>

<br>
<input type="button" id="calculo" value="Calcular" onclick="calcular()" />
<br>
<input type="Reset" id="reset" value="Limpar">
</form>
<br>
<p id="textonormal">Heterozigoto Dominante</p>
<p id="demo">Aa</p>
<p id="textonormal">Homozigoto Recessivo</p>
<p id="demo1">aa</p>
<p id="textonormal">Homozigoto Dominante</p>
<p id="demo2">AA</p>
<p id="textonormal">Recessivo</p>
<p id="demo3">a</p>
<p id="textonormal">Dominante</p>
<p id="demo4">A</p>
</center>
<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 Q6 = document.getElementsByClassName("Q6")[0].value; 

	//somas
	var Q4 = Q1+Q3;
	var Q5 = Q3+Q2;
	var Q7 = Q1+Q6;
	var Q8 = Q6+Q2;

	document.getElementById("Q4").innerHTML = Q4;
	document.getElementById("Q5").innerHTML = Q5;
	document.getElementById("Q7").innerHTML = Q7;
	document.getElementById("Q8").innerHTML = Q8;

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

DiF · 12 de maio de 2018

@Matheus Evandro Rech Que bom que você conseguiu entender o código. Tenho algumas observações a fazer.

No seu CSS, se você tem elementos iguais que usam a mesma regra, use o elemento ao invés do seletor.

Você pode reduzir um pouco seu CSS.

Por exemplo os inputs nos seletores #Q[número]. Como todos são inputs você pode trocar todos os #Q por input[type=text]

Assim você define apenas uma regra para todos os inputs do tipo text.

Os elementos seletores que repetem, mas que são diferentes no conteúdo, você pode usar CLASS, pois a class é a única que pode ter mais de um elemento.

Ademais, friso que pode ser simples o jeito que foi feito, mas não é nada elegante. Você pode deixar melhor e com menos linhas se fizer com jQuery.