Numeros de calculadora nao aparecem na tela em JS

1. Numeros de calculadora nao aparecem na tela em JS

cacabrazil
(usa Outra)

Enviado em 26/07/2020 - 17:53h

entao, sou iniciante, quem quiser me responder essa: Eu estava fazendo uma calculadora em js e html e css, mas quando cheguei no script, tentei colocar uma funcionalidade que me permitisse clicar nos numeros e que escreve na tela isso, so que eu percebi que esse codigo abaixo nao funciona, o numero clicado aparece e desaparece. Queria digitar e o numero aparecer no visor e ficar la quieto kkkkkkkk . Fuçando nesse mesmo codigo abaixo percebi que se eu tirasse esse <form> os botoes funcionam normalmente. PQ FUNCIONA NORMALMENTE OS BOTOES QUANDO EU TIRO ESSE <form>????????
segue a baixo o codigo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculadora</title>

</head>
<body>
<section>
<!DOCTYPE html>
<html lang='pt-BR'>
<head>
<title>CALCULADORA</title>
<meta charset='UTF-8'>

<style>
body{
background: linear-gradient(to right, rgb(238, 253, 27), rgb(0, 255, 128), rgb(0, 217, 255),rgb(204, 0, 255));
}
section{
margin-left: 270px;
}
#visor{
width: 175px;
height: 50px;
font-size: 25pt;
font: Arial;
margin: 2px;
}
#num{

width: 40px;
height: 40px;
color: black;
margin: 1px;
opacity: 0.7;
background: rgba(105, 105, 105, 0.329);
color: white;
font-size: 15pt;
}
#div, #vez, #menos, #mais{
width: 40px;
height: 40px;
color: black;
margin: 1px;
background: rgba(105, 105, 105, 0.329);
opacity: 0.7;
color: white;
font-size: 15pt;
cursor: pointer;
}

#igual{

width: 40px;
height: 40px;
color: black;
margin: 1px;
opacity: 0.7;
background:rgb(165, 5, 5);
color:white;
font-size: 15pt;
cursor: pointer;
margin: 1px;
opacity: 0.7;
}
#clean{
width: 40px;
height: 40px;
color: black;
margin: 1px;
opacity: 0.7;
background:rgb(165, 5, 5);
color:white;
font-size: 15pt;
cursor: pointer;
margin: 1px;
opacity: 0.7;
}
*{
border: none;
}
footer{
margin-top: 30%;
margin-left: 48%;
}

</style>

</head>
<body>

<section>

<form id="formu">
<input type='number' name='visor' id='visor' value='';>
</br>

<input type="submit" value='7' id="num" onclick="preencher(7)">
<input type="submit" value='8' id="num" onclick="preencher(8)">
<input type="submit" value='9' id="num" onclick="preencher(9)">
<input type="submit" value='/' id="div" onclick="Op(/)">
</br>

<input type="submit" value='4' id="num" onclick="preencher(4)">
<input type="submit" value='5' id="num" onclick="preencher(5)">
<input type="submit" value='6' id="num" onclick="preencher(6)">
<input type="submit" value='*' id="vez" onclick="Op(*)">
<br>

<input type="submit" value='1' id="num" onclick="preencher(1)">
<input type="submit" value='2' id="num" onclick="preencher(2)">
<input type="submit" value='3' id="num" onclick="preencher(3)">
<input type="submit" value='-' id="menos" onclick="Op(-)">
<br>

<input type="submit" value='0' id="num" onclick="preencher(0)">
<input type="submit" value='+' id="mais" onclick="Op(+)">
<input type="submit" value='=' id="igual" onclick="Op(=)">
<input type="submit" value="C" id="clean" onclick="limpar()">

</form>

</section>

<script>
function preencher( valor ){

document.getElementById('visor').value+=valor
}

//function limpar(){
// document.getElementById('visor').value='0';
//}

</script>

</body>

</html>
</section>
<footer>
<p>©CARLOS</p>
</footer>
</body>
</html>

1 0

Quote

2. Re: Numeros de calculadora nao aparecem na tela em JS

msoliver
(usa Debian)

Enviado em 26/07/2020 - 20:19h

cacabrazil escreveu:

entao, sou iniciante, quem quiser me responder essa: Eu estava fazendo uma calculadora em js e html e css, mas quando cheguei no script, tentei colocar o que eu clicar no visor, ate vai, mas fica desaparecendo o valor. Como faço para parar com isso?queria digitar e o numero aparecer no visor e ficar la quieto kkkkkkkk segue a baixo o codigo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculadora</title>

</head>
<body>
<section>
<!DOCTYPE html>
<html lang='pt-BR'>
<head>
<title>CALCULADORA</title>
<meta charset='UTF-8'>

<style>
body{
background: linear-gradient(to right, rgb(238, 253, 27), rgb(0, 255, 128), rgb(0, 217, 255),rgb(204, 0, 255));
}
section{
margin-left: 270px;
}
#visor{
width: 175px;
height: 50px;
font-size: 25pt;
font: Arial;
margin: 2px;
}
#num{

width: 40px;
height: 40px;
color: black;
margin: 1px;
opacity: 0.7;
background: rgba(105, 105, 105, 0.329);
color: white;
font-size: 15pt;
}
#div, #vez, #menos, #mais{
width: 40px;
height: 40px;
color: black;
margin: 1px;
background: rgba(105, 105, 105, 0.329);
opacity: 0.7;
color: white;
font-size: 15pt;
cursor: pointer;
}

#igual{

width: 40px;
height: 40px;
color: black;
margin: 1px;
opacity: 0.7;
background:rgb(165, 5, 5);
color:white;
font-size: 15pt;
cursor: pointer;
margin: 1px;
opacity: 0.7;
}
#clean{
width: 40px;
height: 40px;
color: black;
margin: 1px;
opacity: 0.7;
background:rgb(165, 5, 5);
color:white;
font-size: 15pt;
cursor: pointer;
margin: 1px;
opacity: 0.7;
}
*{
border: none;
}
footer{
margin-top: 30%;
margin-left: 48%;
}

</style>

</head>
<body>

<section>

<form name="formCalc">
<input type='number' name='visor' id='visor' value=" ">
</br>

<button name='7' value='7' id="num" onclick="botao( value )">7</butto>
<button name='8' value='8' id="num" onclick="botao( value )">8</button>
<button name='9' value='9' id="num" onclick="botao( value )">9</button>
<button name='/' value='/' id="div">/</button>
</br>

<button name='4' value='4' id="num" onclick="botao( value )">4</button>
<button name='5' value='5' id="num" onclick="botao( value )">5</button>
<button name='6' value='6' id="num" onclick="botao( value )">6</button>
<button name='*' value='*' id="vez">*</button>
<br>

<button name='1' value='1' id="num" onclick="botao( value )">1</button>
<button name='2' value='2' id="num" onclick="botao( value )">2</button>
<button name='3' value='3' id="num" onclick="botao( value )">3</button>
<button name='-' value='-' id="menos">-</button>
<br>

<button name='0' value='0' id="num" onclick="botao( value )">0</button>
<button name='+' value='+' id="mais">+</button>
<button name='=' value='=' id="igual">=</button>
<button name="clean" value="C" id="clean" onclick="limpar()">C</button>

</form>
</section>

<script>

function botao( num ){

//var salvo=document.formCalc.visor.value;
document.getElementById('visor').value="8"
}
function limpar(){
document.getElementById('clean').value='0';
}

</script>

</body>

Boa noite, cacabrazil.
Segue....

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta content="text/html" charset="UTF-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculadora</title>

<style>
body{
background: linear-gradient(to right, rgb(238, 253, 27), rgb(0, 255, 128), rgb(0, 217, 255),rgb(204, 0, 255));
}
section{
margin-left: 270px;
}
#visor{
width: 175px;
height: 50px;
font-size: 25pt;
font: Arial;
margin: 2px;  
}
#num{

width: 40px;
height: 40px;
color: black;
margin: 1px;
opacity: 0.7;
background: rgba(105, 105, 105, 0.329);
color: white;
font-size: 15pt;
}
#div, #vez, #menos, #mais{
width: 40px;
height: 40px;
color: black;
margin: 1px;
background: rgba(105, 105, 105, 0.329);
opacity: 0.7;
color: white;
font-size: 15pt;
cursor: pointer;
}

#igual{

width: 40px;
height: 40px;
color: black;
margin: 1px;
opacity: 0.7;
background:rgb(165, 5, 5);
color:white;
font-size: 15pt;
cursor: pointer;
margin: 1px;
opacity: 0.7;
}
#clean{
width: 40px;
height: 40px;
color: black;
margin: 1px;
opacity: 0.7;
background:rgb(165, 5, 5);
color:white;
font-size: 15pt;
cursor: pointer;
margin: 1px;
opacity: 0.7;
}
*{
border: none;    
}
footer{
margin-top: 30%;
margin-left: 48%;
}


</style>

</head>
<body>

<section>

<!--form name="formCalc"-->
<input type='text' name='visor' id='visor' value="">
</br>

<button name='7' value='7' id="num" onclick="botao(value)">7</button>
<button name='8' value='8' id="num" onclick="botao(value)">8</button>
<button name='9' value='9' id="num" onclick="botao(value)">9</button>
<button name='div' value='/' id="div" onclick="botao(value)">/</button>
</br>
<button name='4' value='4' id="num" onclick="botao(value)">4</button>
<button name='5' value='5' id="num" onclick="botao(value)">5</button>
<button name='6' value='6' id="num" onclick="botao(value)">6</button>
<button name='*' value='*' id="vez" onclick="botao(value)">*</button>
<br>
<button name='1' value='1' id="num" onclick="botao(value)">1</button>
<button name='2' value='2' id="num" onclick="botao(value)">2</button>
<button name='3' value='3' id="num" onclick="botao(value)">3</button>
<button name='-' value='-' id="menos" onclick="botao(value)">-</button>
<br>
<button name='0' value='0' id="num" onclick="botao(value)">0</button>
<button name='+' value='+' id="mais" onclick="botao(value)">+</button>
<button name='=' value='=' id="igual" onclick="botao(value)">=</button>
<button name="clean" value="C" id="clean" onclick="limpar()">C</button>
<!--/form-->
</section>	

<script>

function botao(num){
console.log("Number Match "+num.match(/^[0-9]+$/));
document.getElementById('visor').value+=num;

}

function limpar(){
document.getElementById('visor').value='';
}

</script>

</body>

Dica: Quando o "pressionado" é referente a uma operação "+-/*",
"Armazene" o que "está no visor",
Quando "receber o igual",
faça o calculo.....

______________________________________________________________________
Importante: echo -e "\n$(lynx --dump goo.gl/a9KeFc|sed -nr '/^[ ]+Se/,/dou.$/p')\n"
Att.: Marcelo Oliver
______________________________________________________________________

1 0

Quote