Mensagem em input

Kleb.Gomes · Janeiro 23, 2018

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>

Matheus Tavares · Janeiro 23, 2018

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";

Kleb.Gomes · Janeiro 23, 2018

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.

Matheus Tavares · Janeiro 23, 2018

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 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

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, 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';
    }   
}

Kleb.Gomes · Janeiro 23, 2018

Muito obrigado elas explicações. Estou aprendendo ainda hehe.

Em cima do que falou, tentarei consertar o código e fazer funcionar!

Abraço

Entrar

Arquivado

Mensagem em input

Recommended Posts

Kleb.Gomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Tavares 167

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kleb.Gomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Tavares 167

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kleb.Gomes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JavaScript - Exibir logo dentro da Tabela html

Javascript - Calcular Valores Monetário em Tempo Real

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante