Search code examples
javascripthtmlfunctiononclickgetelementbyid

Button function calling another function

im just a beginner and i want to find the answer to this problem.

This is my html code.

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <input type = "text" name = "step" id = "step">
        <button onclick="myFunction()">Submit</button>
        <p id = "demo"></p>
    </body>
</html>

This is my javascript code.

var step = document.getElementById("step").innerHTML;
parseInt(step);

function matchHouses(step) {
    var num = 0;
    var one = 1;
    while (num != step){
        one += 5;
        num++;
    }
    return one;
}
function myFunction(){
    document.getElementById("demo").innerHTML = matchHouses(step);
}

What I did is to call the function matchHouses(step) by the click of the button. But the output is always 1. I also put parseInt to the step id as it is string but it is still doesnt work. I was expecting an output of 1+5 if the input is 1, 1+5+5 if the input is two and so on. How do I make it work?

Solution

  • The two key things are that a) parseInt won't do the evaluation "in place". It either needs to be assigned to a variable, or the evaluation done as you're passing it into the matchHouse function, and b) you should be getting the value of the input element, not the innerHTML.

    Here are some additional notes:

    1. Cache all the elements first.

    2. Add an event listener in your JavaScript rather than using inline JS in the HTML.

    3. No need to have an additional variable for counting - just decrement step until it reaches zero.

    4. Number may be a more suitable alternative to parseInt which requires a radix to work properly. It doesn't always default to base 10 if you leave it out.

    5. Assign the result of calling the function to demo's textContent (not innerHTML as it is just a simple string, and not a string of HTML markup.

    // Cache elements
const step = document.querySelector('#step');
const demo = document.querySelector('#demo');
const button = document.querySelector('button');

// Add a listener to the button
button.addEventListener('click', handleClick);

function matchHouses(step) {
  let out = 1;
  while (step > 0) {
    out += 5;
    --step;
  }
  return out;
}

function handleClick() {

  // Get the value of the input string and
  // coerce it to a number
  const n = Number(step.value);
  demo.textContent = matchHouses(n);
}
    <body>
  <input type="text" name="step" id="step">
  <button type="button">Submit</button>
  <p id="demo"></p>
</body>