can't access value through input using button

Question

I'm doing some exercises and come across where I can't pass the value from the input box to a function inside a script, I don't really know what I have done wrong, I tried different things but didn't really work out. How can I make it work? I want to able to enter a number then press a button so that it prints pyramid according to given number, here is my code :

window.onload = function() {
  let aantalLijnen = parseInt(document.getElementById('number').value);
  document.getElementById("button").onclick = stars();
  function stars() {
    for (var i = 1; i <= aantalLijnen; i++) {
      var row = '';
      for (var j = 1; j <= i; j++) {
        row += '*';
      }
      console.log(row);
    }
  }
};

<p>Give a number betweeen 2 and 10
  <input type="number" id='number'>
  <button id="button">Click</button></p>

window.onload = function() { is unnecessary. defer your script or simply place it right before the closing </body> tag. — Roko C. Buljan
– Roko C. Buljan, Commented Mar 10, 2020 at 13:37

freefaller · Accepted Answer · 2020-03-10 13:26:44Z

1

You're calling stars() and assigning the result to the onclick handler.

You need to pass the function itself...

document.getElementById("button").onclick = stars;

Or just create an anonymous function directly...

document.getElementById("button").onclick = function() {
   ...
}

As pointed out by @j08691, you are setting the value of aantalLijnen on the page load.

Instead you want to get the value at the time the function runs, so you need to move it into the function itself...

window.onload = function() {
  document.getElementById("button").onclick = function () {
    let aantalLijnen = parseInt(document.getElementById('number').value);
    for (var i = 1; i <= aantalLijnen; i++) {
      var row = '';
      for (var j = 1; j <= i; j++) {
        row += '*';
      }
      console.log(row);
    }
  }
};

<p>Give a number betweeen 2 and 10
  <input type="number" id='number'>
  <button id="button">Click</button></p>

edited Mar 10, 2020 at 13:26

answered Mar 10, 2020 at 13:25

freefaller

20.1k7 gold badges62 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

j08691 Over a year ago

Should also move the let inside the function otherwise it's just getting the value once when the doc loads

Ahmed Kesha · Accepted Answer · 2020-03-10 13:30:21Z

0

you have to get the value from input every time you click on the button

 window.onload = function () {
            const numberElem = document.getElementById('number');
            document.getElementById("button").addEventListener('click', stars);
            function stars() {
                let aantalLijnen = parseInt(numberElem.value);
                for (var i = 1; i <= aantalLijnen; i++) {
                    var row = '';
                    for (var j = 1; j <= i; j++) {
                        row += '*';
                    }
                    console.log(row);
                }
            }
        };

edited Mar 10, 2020 at 13:30

answered Mar 10, 2020 at 13:28

Ahmed Kesha

8105 silver badges11 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2020-03-10 13:47:36Z

0

Besides what already said by others

Don't use onclick handlers. Stick to cumulative listeners with addEventListener
You could use String.prototype.repeat();
Defer your script or place it right before the closing </body> tag
Learn the difference between let and const

function stars() {
  const num = parseInt(document.getElementById('number').value, 10);
  if (num < 2 || num > 10) return console.log("Use from 2 to 10 inclusive");
  const row = '*'.repeat(num);
  console.log(row)
}

document.getElementById("button").addEventListener('click', stars);

Give a number betweeen 2 and 10
<input type="number" id='number'>
<button id="button">Click</button>

answered Mar 10, 2020 at 13:47

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

can't access value through input using button

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related