Acabo de empezar a aprender Javascript. Estoy haciendo el curso en Viope World. Necesito obtener dos números diferentes, pero cada vez obtengo el mismo número para las variables num y exponente, mientras que la función calcPower es correcta. No entiendo cómo obtener diferentes entradas en la función fetchValue() sin tener HTML para esta tarea. He intentado usar el método Document.querySelector() y otras cosas que no deberían ser complicadas para tal ejercicio.
Estos son los requisitos:
Rellene las funciones que faltan fetchValue(id) y calcPower(base, exponente). La función fetchValue(id) busca un elemento de entrada de texto HTML y devuelve su valor. La función calcPower(base, exponente) tiene que calcular y devolver un número basado en los valores que se le pasan. Tenga en cuenta que toda la impresión ocurre dentro de la sección prefabricada del programa.
Esta es la parte del código que no puedo cambiar:
function calcFunc(){ var num = fetchValue("num"); var exponent = fetchValue("exponent"); console.log("The number " + num + "to the power of " + exponent + " is:"); console.log(calcPower(num, exponent)); }Mi código:
function fetchValue(id){ let val = document.querySelector("input").value; return val; } function calcPower(base, exponent){ var result = 1; for(var counter=0; counter<exponent;counter++){ result*=base; } return result; }querySelector devuelve una referencia al primer elemento del selector dado. Consulte https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector . No es la forma obvia de obtener sus valores dado que su función está configurada para manejar identificaciones de elementos.
En su lugar, se puede hacer referencia a los elementos individuales con una identificación única usando document.getElementById("elementID") y desea la propiedad .value del elemento. Consulte https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById .
Para ingresar valores, el html necesita algún tipo de entrada, puede usar entradas de texto o números (ambas devuelven cadenas , pero la entrada de números restringe las entradas a dígitos). El marcado para estos sería algo como:
Number: <input type="number" id="inputValue"></input><br> Exponent: <input type="number" id="inputExponent"></input>Nótese el uso de ids como atributos de los elementos.
Javascript es un lenguaje poco tipificado , lo que significa que no se necesita una definición estricta de los tipos de variables. Esto significa que JS puede hacer cálculos sensatos de 2*2 o "2"*"2" (ambos se calculan como 4). Sin embargo, es una buena práctica convertir formalmente dígitos de cadena en números cuando pretenda usarlos para cálculos (sobre todo porque JS interpreta "2"+"2" como "22" porque + es tanto un operador de suma aritmética como un operador de concatenación de cadenas entonces, si le da cadenas, JS asume que desea concatenarlas).
Por lo tanto, la función fetchValue podría incluir el uso de parseInt(string) para convertir los valores de cadena de entrada en números.
Estos principios se combinan en el siguiente fragmento de trabajo para ilustrar el enfoque:
function calcFunc(){ let num = fetchValue("inputValue"); let exponent = fetchValue("inputExponent"); console.log("The number " + num + " to the power of " + exponent + " is:"); console.log(calcPower(num, exponent)); } function fetchValue(id){ return parseInt(document.getElementById(id).value); } function calcPower(base, exponent){ let result = 1; for(let counter=0; counter<exponent;counter++){ result*=base; } return result; } input { width: 3em; } Number: <input type="number" id="inputValue"></input><br> Exponent: <input type="number" id="inputExponent"></input> <p> <button onclick="calcFunc()">process</button>