No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Nuevo Curso Pr谩ctico de JavaScript

Nuevo Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Eventos en JavaScript: interactuando con usuarios

12/26
Recursos

Aportes 43

Preguntas 8

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Para pasar los strings capturados en el input podemos usar las funciones Number() o parseInt(), quedaria:
Number(input1.value) o parseInt(input1.value)

Me encanta este curso, por fin entiendo muchas cosas, deber铆a haberlo visto antes de muchos otros en la escuela de desarrollo web鈥 Gracias

Hola profe, para pasar los strings a n煤meros utilic茅 el atributo 鈥+鈥 antes del string para cambiar su valor.

const h1 = document.querySelector("h1");
const input1 = document.querySelector("#calculo1");
const input2 = document.querySelector("#calculo2");
const btn = document.querySelector("#btnCalcular");

function btnOnClick() {
  console.log(+input1.value + +input2.value);
}
 

Agregu茅 a resta, multiplicaci贸n y divisi贸n. Les comparto el c贸digo:

Resultado:

MEEEE ENCANTAAAAAAAA!!!

Realic茅 una calculadora de propinas con HTML, CSS y JavaScript. Lo disfrut茅 mucho y aprend铆 bastante

La idea la saque de la p谩gina https://www.frontendmentor.io/
Hay muchos retos para poner en pr谩ctica los conocimientos adquiridos.

Realice un peque帽o cambio en mi HTML para que tuviera correctamente estructura seg煤n cursos anteriores visto en la ruta de Escuela desarrollo web (Solamente le agregue el tipo de dato que recibe mi input)

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    
    <title>Document</title>
</head>
<body>

    <h1>Manupulacion del DOM basica</h1>

    <input id="calculo1" placeholder="Escribe algo aqui" type="number">
    <input id="calculo2" placeholder="Escribe algo aqui" type="number">
    <button id="btnCalcular" onclick="btnOnclick()">Calcular</button>

    <p id="result"></p>

    <script src="./main.js"></script>

</body>
</html>

JS

const input1 = document.getElementById('calculo1')
const input2 = document.getElementById('calculo2')
const btnCalcular = document.getElementById('btnCalcular')
const resultado =  document.getElementById('result')


function btnOnclick(){
    const sumaInput = parseInt(input1.value) + parseInt(input2.value);
    resultado.innerText = "Resultado "+sumaInput
}

Aqui mi investigacion de como convertir String a Number:

let result;
let value1 = input1.value;
let value2 = input2.value;

//Number(valor)
//Convierte a Number. "12" -> 12 
result = Number(value1) + Number(value2);

//parseInt()
//Convierte a Number entero, se indica la base en el sistema //numeral
// En este caso 10 es sistema Decimal
// "19.99" -> 19 
result = parseInt(value1, 10) + parseInt(value2, 10);

//parseFloat()
//Convierte a Number dejando la parte decimal. "10.2" -> 10.2
result = parseFloat(value1) + parseFloat(value2);

//(+valor)
//Convierte a Number y deja la parte decimal. "12.99" -> 12.99 
result = (+value1) + (+value2);

//(valor * 1)
//Convierte a Number y deja la parte decimal. "19.99" -> 19.99  
result = (value1 * 1) + (value2 * 1);

//(valor / 1)
//Convierte a Number y deja la parte decimal. "10.5" -> 10.5 
result = (value1 / 1) + (value2 / 1);

//(valor - 0)
//Convierte a Number y deja la parte decimal. "19.99" -> 19.99 
result = (value1 - 0) + (value2 - 0);

//(~~valor)
//Convierte a Number y quita la parte decimal. "19.99" -> 19 
//Convierte a 0 si se pasa un String. "Bien" -> 0
//Usar para enteros de no mas de 32 bit
result = (~~value1) + (~~value2);

//Math.floor()
//Convierte a Number y Redondea hacia abajo. "9.8" -> 9
result = Math.floor(value1) + Math.floor(value2);

//Math.ceil()
//Convierte a Number y Redondea hacia el entero mas grande. "7.18" -> 8
result = Math.ceil(value1) + Math.ceil(value2);

//Math.round()
//Convierte a Number y Redondea hacia el entero mas grande proximo. "6.3" -> 6
result = Math.round(value1) + Math.round(value2);

Con esta clase record茅 esta joyita xD

Jugando con esta clase he decidido probar creando una calculadora de operaciones aritm茅ticas b谩sicas:

Para esto defin铆 este c贸digo HTML, fue interesante investigar como funcionan los option button para que funcionen como un grupo y permitan solo seleccionar una de las opciones disponibles:

Finalmente agregu茅 la funci贸n que calcula y manipula el DOM con lo que vimos en la clase pasada:

en mi caso use

const sumInput = parseInt(input1.value) + parseInt(input2.value);

pasa de string a numeros鈥 en el caso de que le ingrese strings solo me responde NaN

Usando la propiedad de parseInt logre cambiar mis strings a numeros y me quedo as铆

function btnClick() {
  console.log(parseInt(input1.value) + parseInt(input2.value));
}

Algo asi para agregarlo a pantalla

const input1 = document.querySelector("#numero1"); 
const input2 = document.querySelector("#numero2"); 
const btn = document.querySelector("#btncalcular"); 

function clickbutton(){
    console.log(Number(input1.value) + Number(input2.value))
}

Como ya mencionaron, las maneras m谩s comunes son con -parseInt()- y -Number()-.
La diferencia es que parseInt cambia un string hasta donde le es posible, por ejemplo:

conststring = '159xyz';

Nos va a convertir hasta que se encuentre con 鈥榵鈥. Tambi茅n admite un segundo argumento en el cual podemos especificar la base del n煤mero que buscamos. En dado caso que no coloquemos dicho argumento, la funci贸n tratar谩 de determinar el sistema num茅rico.
Por otro lado, Number() tratar谩 de convertir toda la cadena en numero. Tomando como ejemplo la variable anterior, nos devolver铆a 鈥楴aN鈥 debido a las letras que le siguen.

Una ultima opci贸n que encontr茅, aunque no se que tan bueno o malo sea usarlo, es agregar 鈥+鈥 antes del valor que queremos convertir:

+input1.value + +input2.value;

Mi c贸digo 馃槂
HTML:

JS:

Me gust贸!!

Esta clase estuvo muy buena, justo lo que necesito para entender como pasar valores entre funciones y entre los dos archivos html y js.

Para borrar r谩pido a mi me sirve el Shift + Supr

#

  • Hashtag
  • Almohadilla
  • Numeral
    En ingles parece que tiene mas de 20 nombres utilizados.

Les comparto lo que viv铆 realizando este ejercicio:

  1. Si no te funciona el .innerHTML ni el .innerText es porque la etiqueta <script> estaba de primero en el <body> de mi HTML, la soluci贸n fue mover script al final del body y funcion贸.
    <script src="./script.js"></script>
</body>
  1. Para convertir los n煤mero de string a number us茅 parseInt.
parseInt(num1.value)
  1. Para evitar concatenar texto con variables, utilic茅 la sintaxis de ES6
`Texto texto ${funciones o variables} texto texto`.
  1. Mi resultado
    HTML
<body>

    <h1 id="h1">Calculadora</h1>
    <p>Escribe los n煤meros que deseas sumar</p>
    <input id="input1" type="number">
    <input id="input2" type="number">

    <button id="calc" onclick = "btnCalcular(input1, input2)" 
    >Calcular</button>

    <p id="result"></p>


    <script src="./script.js"></script>

</body>

JAVASCRIPT

const item1 = document.querySelector('#input1');
const item2 = document.querySelector('#input2');
const btn = document.querySelector('#calc');
const result = document.querySelector('#result')


function btnCalcular (num1, num2) {
  let resultado = `El resultado es ${parseInt(num1.value) + parseInt(num2.value)}`;
  result.innerText = (resultado)
}

para convertir los inputs.value en numeros hay que ponerlos en un parseInt:

parseInt(input1.value) + parseInt(input2.value)

Como vimos en el curso previo basico de JS, tenemos que hacer una coercion explicita, una forma de pasar un string a number, seria:

function sumar(){
    console.log(Number(input1.value) + Number(input2.value));
}
admito que en ocasiones no me gustaba la forma de dictar de Juan, pero ahora con este curso he cambiado totalmente de opini贸n est谩 incre铆ble, a la espera de que actualicen el de react js

const h1 = document.querySelector(鈥榟1鈥)
const input1 = document.querySelector(鈥#num1鈥)
const input2 = document.querySelector(鈥#num2鈥)
const btnCalcular = document.querySelector(鈥榖tnCalcular鈥)
const p = document.querySelector(鈥#pResult鈥)

h1.innerText = 鈥楳anipulacion del DOM - Curso practico Platzi鈥;

const sumar = () =>{
const sum = Number(input1.value)+Number(input2.value);

p.innerText = "Resultado de la suma: "+ sum;

}

Para convertirlos en n煤mero, he usado parseInt

Mi c贸digo:

const h1 = document.querySelector("h1");
const input1 = document.querySelector("#calculo1");
const input2 = document.querySelector("#calculo2");
const btn = document.querySelector("#btnCalcular");
const pResult = document.querySelector("#result");

function btnOnClick() {
  const sumaInputs = Number(input1.value) + Number(input2.value);
  pResult.innerText = "Resultado: " + sumaInputs;
}

A los que siguen el curso les recomiendo mi funcion para convertir numeros:

function btnOnclick (){
    let sum = parseFloat(calculo1.value ) + parseFloat(calculo2.value); 
 
}

Porque usar el parseFloat , lo recomiendo debido a que el parseInt no todos los numeros siempre van a hacer enteros la mayoria siempres son numeros con decimales con lo cual si usas esta funcion puedes hacer una suma con decimales.

Mi humilde aporte

const h1 = document.querySelector("h1"); // los tags de html de colocan tal cual se llaman 
const input1 = document.querySelector("#calculo1");
const input2 = document.querySelector("#calculo2");
const btn = document.querySelector("#btnCalcular");

function btnOnClick()
{
    ca1 = parseInt(input1.value);
    ca2 = parseInt(input2.value);
    console.log(ca1 + ca2);
}

JavaScript

let input1 = document.querySelector('#valor1');
let input2 = document.querySelector('#valor2');
let btn = document.querySelector('#btnCalculo');

function btnOnClick(){
	let val1 = parseInt(input1.value);
	let val2 = parseInt(input2.value);
	
	let result = document.querySelector('#optResult');
	result.innerText = val1 + val2;
}

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <main>
    <section>
      <h1>Prueba</h1>
      <form action="">
        <input type="text" id="valor1">
        <input type="text" id="valor2">
        <button type="button" onclick="btnOnClick()">Calcular</button>
      </form>
      
      <!-- IMPRIME RESULTADO -->
      <span id="optResult"></span>
    </section>
  </main>
</body>
</html>

.
JavaScript:

let input1 = document.querySelector('#valor1');
let input2 = document.querySelector('#valor2');
let btn = document.querySelector('#btnCalculo');

function btnOnClick(){
	let number1 = input1.value;
	let number2 = input2.value;

	let val1 = parseInt(number1);
	let val2 = parseInt(number2);
	
	let result = document.querySelector('#optResult');
	result.innerText = val1 + val2;
}

Se puede utilizar parseInt() Number(). adem谩s descubr铆 que se pueden cambiar el tipo de fuente , el tama帽o de una imagen entre otros des de javaScript.

function sum () {
   result.textContent = 'Resultado ' + Number(sum1.value) + Number(sum2.value);
   result.style.fontFamily = 'monospace';
//as铆 se cambie el estilo de fuente
}
//asi el tama帽o de la imagen de la clase anterior 
	img.style.width = '500px';

Genial esta clase.

const h1 = document.querySelector('h1');
const valor1 = document.querySelector('#valor1');
const valor2 = document.querySelector('#valor2');
const Calcular = document.querySelector('#btnCalcular');
const resultado = document.querySelector('#resultado');

function btnOnClick(){
resultado.innerText = parseInt(valor1.value) + parseInt(valor2.value);
}

saber manejar el DOM es super importante

Cordial saludo,

Para poder sumar los n煤meros se hice uso de parseInt que me convierte el string en Integer ejemplo:
let val1 = parseInt(input1.value);
let val2 = parseInt(input2.value);
const suma = val1 + val2;

Muchas gracias.

Atentamente
Damian Arenales

Hola, comparto el c贸digo que genere para solucionar el problema, como podr谩n ver quise usar 2 funciones por separado.

const h1=document.querySelector('h1');
const input1=document.querySelector('#calculo1');
const input2=document.querySelector('#calculo2');
const btn=document.querySelector('#btnCalcular');
const pResult=document.querySelector('#result');



function sumarInputs(){

    var suma = parseInt(input1.value)+parseInt(input2.value);
    return suma;
}
function btnOneclick(){

    console.log("Estoy escuchando el click");
    pResult.innerText="El resultado es: "+sumarInputs();

    
}


hola 馃槂

function btnOnClick() {
    console.log(Number(input1.value) + Number(input2.value));
}

Yo encontr茅 la funci贸n parseInt(string, base) que ped铆a la cadena a transformar y la base num茅rica en que se encontraba, por eso puse base 10, me funcion贸 bien pero har铆a falta entrar a validaciones para que avise si no es un entero y no se rompa.

const h1 = document.querySelector('h1');
const input1 = document.querySelector('#calculo1');
const input2 = document.querySelector('#calculo2');
const btnCalculo = document.querySelector("#btnCalcular");
const result = document.getElementById('result');

function btnClick(){
    let in1 = parseInt(input1.value, 10);
    let in2 = parseInt(input2.value, 10);
    let res = in1 + in2;
    result.innerText = "Resultado: " + res;
}


Hola muy buenas tardes鈥 Primero que nada deseo compartirles parte del proceso de realizar las actividades de esta clase.

Html:

css-muy basic

JAVASCRIP

Sin embargo descubr铆 algunas cosas que me gustar铆a compartir con ustedes y bueno ahora toca saber por que pasan talvez eventos.

1.- cuando yo le puse un form sin atributos pasa que si ejecuta la funci贸n determinada en java y muestra el resultado pero este se borra autom谩ticamente, casi no se aprecia el resultado y se desaparece por arte de magia鈥 pens茅 que David Coperfil se hab铆a metido a mi computadora jajaja pero lo decidi dejar hay.

2.- Se me ocurrio poner dentro del formulario un document.write y funciono diciendo te gane David Coperfil pero este resultado se va a otra pagina.

3.- Entonces al reflexionar y compartir con ustedes pienso que la soluci贸n a mi problema es poner al form la conexi贸n a la misma pagina aunque algo me dice que no es una soluci贸n

Siento que el audio no est谩 sincronizado con el video

al final del video no esta sincronizado el sonido con la imagen , cuando habla el profe

Convertir el contenido de los inputs en numeros para poder realizar la suma:

function clickOnBtn() {
    const sumaInput = parseInt(input1.value) + parseInt(input2.value);
    pResult.innerHTML = "Resultado: " + sumaInput; 
}