Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá.
Estou com a seguinte dúvida:
Tento fazer com que o usuário digite 3 valores de um triângulo em um input cada.
Logo em seguida, o código deve mostrar se os valores satisfazem os requisitos para que o triângulo exista e, além disso, qual o tipo do triângulo.
Não sei se o ideal seria aqui ou em HTML5.
Com ele todo em JS eu consigo fazer, mas quero aprender mais.
<meta charset="UTF-8">
<html>
<head>
<script type="text/javascript">
//esta função mostra uma frase no navegador e pula uma linha.
var mostra = function(frase){
document.write(frase + "<br>");
};
//esta função verifica se a condição de existência do triângula é suprida.
function condicao_existencia(){
var n1 = parseInt(document.getElementById('base'));
var n2 = parseInt(document.getElementById('ladob'));
var n3 = parseInt(document.getElementById('ladoc'));
if (n1 < n2 + n3 && n2 < n3 + n1 && n3 < n1 + n2){
document.getElementById('existencia').value = "Esses números satisfazem a condição de existência de um triângulo";
}
else{
document.getElementById('existencia').value = "Esses números não satisfazem a condição de existência de um triângulo";
};
tipo_triangulo();
};
//esta função checa que tipo de triângulo é
function tipo_triangulo(){
if (n1 === n2 && n2 === n3) {
document.getElementById('tipo').value = "Esses valores podem formar um triângulo EQUILÁTERO";
};
if (n1 != n2 && n2 != n3 && n3 != n1){
document.getElementById('tipo').value = "Esses valores podem formar um triângulo ESCALENO";
};
if (n1 != n2 && n2 === n3) {
document.getElementById('tipo').value = "Esses valores podem formar um triângulo ISÓSCELES";
};
};
//variáveis
var n1 = parseInt(document.getElementById('base'));
var n2 = parseInt(document.getElementById('ladob'));
var n3 = parseInt(document.getElementById('ladoc'));
</script>
</head>
<body>
<center>
<font size="8" color="purple">PROGRAMA PARA CÁLCULO DE TRIÂNGULO</font><br><br>
<form>
Informe o valor da base (a) do triângulo: <input type="text" id="base"><br>
Informe o valor do lado b do triângulo: <input type="text" id="ladob"><br>
Informe o valor do lado c do triângulo: <input type="text" ide="ladoc"><br>
<input type="button" id="calcular" value="Verificar Triângulo" onclick="condicao_existencia();"><br>
Validade do triângulo: <input type="text" id="existencia"> <br>
Tipo de triângulo: <input type="text" id="tipo">
</script>
</form>
</body>
</html>>
5 minutos atrás, Matheus Tavares disse:
Olá @Kleb.Gomes.
Desculpe, mas não entendi sua dúvida. Você quer colocar o resultado nos inputs?
Se for isso, você faz assim:
document.getElementById("id_do_input").value = "TEXTO";
Quero, mas não consigo fazer as function funcionarem.
Elas não dão o resultado correto dos ifs.
Pega o código e dá uma olhada no navegador pra você ver.Tem muuuuita coisa errada, mas vamos lá:
1 - Evite colocar código JS diretamente na sua marcação html, para evitar erros de interpretação por parte da sua IDE ou navegador.
Para isso, jogue todo o seu JS (o código dentro da tag <script>) dentro de um arquivo **triangulo.js** (por ex) e insira isso dentro do seu <head>:
<script type="text/javascript" src="triangulo.js"></script>
2 - Insira um [DOCTYPE](http://gabsferreira.com/pra-que-serve-a-tag-doctype-em-arquivos-html/) na sua primeira linha do HTML:<!DOCTYPE html>
3 - Isso não iria "bugar" seu site, mas você não deveria estar usando algumas tags: <center> e <font>.
[https://pt.stackoverflow.com/questions/32276/descontinuação-da-tag-center](https://pt.stackoverflow.com/questions/32276/descontinua%C3%A7%C3%A3o-da-tag-center)
A explicação desse link serve para a font também.
4 - A tag de fechamento de script (</script>) no final do arquivo está causando alguns bugs na renderização.
5 - Há um erro de digitação no ID do input C. Está "ide". Isso invalidaria o cálculo (se ele estivesse funcionando...)
**Indo para o JS agora....**
1 - Você está repetindo a captura dos números n1/n2/n3. Pode tirar as últimas linhas.
Para um código comum ES5, que é o seu caso, uma solução aceitável seria:
Registrar as variáveis no topo, utilizá-las posteriormente (use "var minha_variavel;" apenas no topo).
2 - [getElementById](https://developer.mozilla.org/pt-BR/docs/Web/API/Document/getElementById), como você pode ver na documentação, não retorna o valor do elemento, mas uma referência a um objeto Element. Esse objeto expõe informações, dentre elas o valor que você quer.
Isso tudo para dizer que parseInt() em volta do getElementById é grosseiramente errado. Então as linhas de atribuição deveriam seguir esse padrão:
n1 = parseInt( document.getElementById( 'base' ).value );
Preciso parar por aqui... Não tenho como analisar o restante do seu JS e a lógica aplicada nesse momento, mas a partir desse ponto fica mais fácil para você estudar e encontrar a solução... Segue o código modificado:
HTML<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="triangulo.js"></script>
</head>
<body>
<font size="8" color="purple">PROGRAMA PARA CÁLCULO DE TRIÂNGULO</font>
<br><br>
<form method="post" action="">
Informe o valor da base (a) do triângulo: <input type="text" id="base"><br>
Informe o valor do lado b do triângulo: <input type="text" id="ladob"><br>
Informe o valor do lado c do triângulo: <input type="text" id="ladoc"><br>
<input type="button" id="calcular" value="Verificar Triângulo" onclick="condicao_existencia();"><br>
Validade do triângulo: <input type="text" id="existencia"> <br>
Tipo de triângulo: <input type="text" id="tipo">
</form>
</body>
</html>
JS (ainda com problemas):
var n1;
var n2;
var n3;
var mostra = function ( frase ) {
document.write( frase + '<br>' );
};
function condicao_existencia() {
n1 = parseInt( document.getElementById( 'base' ).value );
n2 = parseInt( document.getElementById( 'ladob' ).value );
n3 = parseInt( document.getElementById( 'ladoc' ).value );
if ( n1 < n2 + n3 && n2 < n3 + n1 && n3 < n1 + n2 ) {
document.getElementById( 'existencia' ).value = 'Esses números satisfazem a condição de existência de um triângulo';
} else {
document.getElementById( 'existencia' ).value = 'Esses números não satisfazem a condição de existência de um triângulo';
}
tipo_triangulo();
}
function tipo_triangulo() {
if ( n1 === n2 && n2 === n3 ) {
document.getElementById( 'tipo' ).value = 'Esses valores podem formar um triângulo EQUILÁTERO';
}
if ( n1 != n2 && n2 != n3 && n3 != n1 ) {
document.getElementById( 'tipo' ).value = 'Esses valores podem formar um triângulo ESCALENO';
}
if ( n1 != n2 && n2 === n3 ) {
document.getElementById( 'tipo' ).value = 'Esses valores podem formar um triângulo ISÓSCELES';
}
}Muito obrigado elas explicações. Estou aprendendo ainda hehe.
Em cima do que falou, tentarei consertar o código e fazer funcionar!
Abraço
Olá @Kleb.Gomes.
Desculpe, mas não entendi sua dúvida. Você quer colocar o resultado nos inputs?
Se for isso, você faz assim:
document.getElementById("id_do_input").value = "TEXTO";