ya se que puede parecer muy basico y perdon las molestias pero estaba programando en javascript
este es el codigo :
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>suma basica</title>
<link href='sumasimple.css' rel="stylesheet" type="text/css">
<body bgcolor="rgb(255,6,1)">
<h3 class="h3">Buenas ingrese 2 numeros para realizar una simple suma. </h3>
<script type="text/javascript">
function sumar(){
var valor1;
var valor2;
var suma= valor1 + valor2;
alert('el resultado de la suma da: '+suma);
document.getElementById('r').true;
}
</script>
</head>
</body>
<p class="p">Valor numerico 1:</p>
<input type="text" id="valor1" name='valorn1'><br>
<p class="p">Valor numerico 2:</p>
<input type='text' id='valor2' name='valorn2'>
<button onclick='sumar()' >resultado</button>
</html>
al darle click al boton me salta el alert y me dice: el resultado de la suma da: NaN. en que parte del codigo me equivoque o que me falto, gracias
var valor1;
var valor2;
var suma= valor1 + valor2;
declaras la variable valor1, declaras la variable valor2 y las sumas... pero las variables no tienen ningun valor asignado... NaN significa Not a Number (no es un numero) estas intentando sumar vacio con vacio, debes capturar el valor de los input primero
Siempre que publiques código en el foro utiliza las etiquetas Geshi del lenguaje de programación correspondiente para que se vean los colores.
Consideraciones:
- Es recomendable identar el código y comentarlo. No solo para facilitar su lectura a otros programadores, también para mejorar el SEO y su posicionamiento.
- El atributo type no es necesario para css o js ni aporta nada.
- Es recomendable quitar absolutamente todo el código css y js a archivos externos.
- var suma= valor1 + valor2; Estás asignando a una variable el resultado de sumar dos variables declaradas que aún no tienen un valor definido.
- Te sobra una etiqueta de apertura body al inicio.
- Es recomendable utilizar dobles comillas para html y javascript y comillas simples para css.
- Es recomendable hacer funciones puras (reusables y no dependientes) en vez de funciones que solo sirvan para sumar unas variables determinadas de tu programa.
- Todas las variables de tu función son innecesarias.
- Te recomiendo identar (dar 2 espacios en el cuerpo de cada expresión en javascript) y lo mismo para html y css.
- Te recomiendo añadir un form si vas a añadir inputs. Tanto por semántica como por css, trabajar programáticamente, etc.
- Tienes texto que quieres que vea el usuario en el head del html. El head es para información y código que no va a tener representación visual directa. Asique ese <h3></h3> y su innerHTML hay que posicionarlo dentro de las etiquetas body. El buenas parece más de pedir una caña en un bar que de un programa xD.
- Un <button onclick="sumar()" >resultado</button> Te recomiendo substotuirlo por <button type="button">Resultado</button> para que no te de comportamientos indeseados.
- Todos los onclick deberían ir en un documento externo y ser remplazados por un addEventListener("click", function(){ Codigo a ejecutar } );
- No veo nada con id="r" asique no sé que ibas a hacer aquí: document.getElementById('r').true;
- No se que tienes en el css, pero no hace falta que le pongas class a cada elemento para aplicarle estilos a todos. A menos que sea exactamente lo que quieres hacer.
En css se usa: p para etiqueta, .p para clase, #p para id.
- No hace falta que uses nombres raros para no repetir. No creas conflictos usando las mismas palabras en un id, class, name, etc.
- Te recomiendo añadir en tus scripts el string "use strict"; ya que entre otras cosas en algunos navegadores si cometes ciertos errores(no todos), te sale un alert diciéndotelo.
- Las funciones pueden retornar un resultado. Si retornas el resultado de la suma, te permite utilizar la llamada a la función en un confirm, asignar el resultado a una variable, como parámetro para otra función, o en lo que tu quieras, en vez de solo ser útil en un alert (a menos que solo quieras que se use en un alert y nada más.).
- El operador + hace varias cosas. Para asegurarte que sume y no que concatene/una/junte los números, tienes que asegurarte que lo que se le pasa como parámetros son números. Puedes usar un par de parseInt() dentro de la función sumar aplicados a cada parámetro para transformar el texto a numeros antes de la suma. También es conveniente usar input type="number" que es lo más lógico si solo aceptas números para sumar. Y estaría bien también añadir un required en caso de hacer una petición http/submit de un form o un value="0" en caso de js puro para tener un valor por defecto por si no se completa el campo por error.
- También puedes añadir el atributo placeholder para dar una pista de que valor poner.
- Te añadí un viewport para que se adapte automáticamente la página a la pantalla. A parte puedes usar el viewport como medida para el css. vw (view width) y vh (view heigth).
- Te añadi un poco de css de ejemplo y un button reset porque queda bien con el tipo de programa xD.
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, heigth=device-heigth, target-densitydpi=device-dpi">
<title>Suma básica</title>
<link href="sumasimple.css" rel="stylesheet">
</head>
<body>
<h3>Ingrese 2 números para realizar una simple suma.</h3>
<form>
<p>Valor numérico 1:</p>
<input type="number" name="valor1" value="0" placeholder="primer sumando" required>
<p>Valor numérico 2:</p>
<input type="number" name="valor2" value="0" placeholder="segundo sumando" required>
<button type="button">Resultado</button>
<button type="reset">Borrar</button>
</form>
<script src="suma.js"></script>
</body>
</html>body {
background-color: #f10;
}
h3, p {
text-align: center;
}
form {
border: 2vw solid #fff;
}
input[type=number] {
width: 88vw;
display: inline-block;
border: 1vh solid #aaa;
box-sizing: border-box;
display: block;
margin-left: auto;
margin-right: auto;
}
button[type=button]
{
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
width: 35vw;
border: 1vh solid #aaa;
box-sizing: border-box;
display: block;
margin-left: auto;
margin-right: auto;
background-color: #333;
color: white;
}
button[type=button]:hover {
background-color: #fff;
color: #777;
}
button[type=reset] {
-webkit-transition-duration: 0.5s; /* Safari */
transition-duration: 0.5s;
border: 1vh solid #aaa;
box-sizing: border-box;
background-color: #333;
color: white;
}"use strict";
function Sumar(valor1, valor2) {
return parseInt(valor1) + parseInt(valor2);
}
document.getElementsByTagName("button")[0].addEventListener("click", function(){ alert("El resultado de la suma es: " + Sumar( document.getElementsByName("valor1")[0].value , document.getElementsByName("valor2")[0].value));});- La función Sumar convierte ambos parámetros a números y retorna la suma a su llamada.
- En el resto del código:
- Se obtiene el botón del código html:
boton = document.getElementsByTagName("button")[0];
- La función getElementsByTagName te retorna todos los botones de tu código HTML. En este caso queremos el primer botón que aparece en el HTML. Que en este caso también es el único botón. Entonces es necesario usar el operador array con índice 0, que es el primer elemento del contenedor.
- A boton se le agrega un listener de eventos, y una función que se ejecute cuando suceda ese evento.
boton.addEventListener( "click", Sumar(valor1, valor2); );
Esto es equivalente al onclick="Sumar(valor1, valor2)"
- Para que no se ejecute directamente la función en la declaración, y para poder agregar más expresiones, la llamada de a función Sumar la metemos dentro de un función anónima. function(){}
boton.addEventListener( "click", function(){ Sumar(valor1, valor2); } );
- Añadimos un alert para mostrar la respuesta de sumar.
boton.addEventListener("click", function(){ alert(" Resultado = " + Sumar(valor1, valor2);) } );
- Por último obtenemos los valores de los input number.
valor1 = document.getElementsByName("valor1")[0].value;
valor2 = document.getElementsByName("valor2")[0].value;
En vez de guardar todo en variables, lo que hice fue juntar todo directamente en una sola línea.