Write a fetch function which looks for a HTML text input element and returns its value-CodePudding

I have just started learning Javascript. I am doing the course in Viope World. I faced with one problem in task. I need to get two different numbers but every time I get the same digit for number and exponent while function for power counts correct. I don't understand how to get different inputs in function fetchValue() while I don't have HTML for this task. I tried using method Document.querySelector() and other things which shouldn't be complicated for such exercise. This are requirements:

Fill in the missing functions fetchValue(id) and calcPower(base, exponent). The function fetchValue(id) looks for a HTML text input element and returns its value. The function calcPower(base, exponent) has to calculate and return a number based on the values passed to it. Note that all of the printing happens within the pre-made section of the program.

This part of code I can't change, it is given in the task:

  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));
  }

My code:

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

CodePudding user response：

querySelector returns a reference to the first element of the given selector. See https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector. It is not the obvious way to fetch your values given that your function is set up to handle element ids.

Instead, individual elements with unique id can be referenced using document.getElementById("elementID") and you want the .value property of the element. See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById.

To input values, the html needs some sort of input, you could use text or number inputs (both return strings, but the number input restricts entries to digits). The markup for these would be something like:

Number: <input type="number" id="inputValue"></input><br>
Exponent: <input type="number" id="inputExponent"></input>

Note the use of ids as attributes of the elements.

Javascript is a loosely typed language, meaning strict definition of variable types is not needed. This means that JS can make sensible calculations from 2*2 or "2"*"2" (both are calculated to be 4). However, it is good practice to formally convert string digits to numbers when you intend using them for calculations (not least because JS interprets "2" "2" as "22" because is both an arithmetic addition operator and a string concatenation operator so if you give it strings, JS assumes you want to concatenate them).

So, the fetchValue function could include the use of parseInt(string) to convert the input string values to numbers.

These principles are combined in the following working snippet to illustrate the approach:

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

&nbsp; Number: <input type="number" id="inputValue"></input><br>
Exponent: <input type="number" id="inputExponent"></input>
<p>
<button onclick="calcFunc()">process</button>