Can't get javascript to change variable via html input

1

I have been learning javascript for a few days and have been practising on a bouncing ball game. Anyway, I am trying to get html user input to change the speed of the ball, but it does not seem to work. I created a doStuff function to grab the html userinput value and tried to set this to the ball speed, but it does not change the initial speed that I gave it. Can someone show me what I did wrong in the code? Thanks

Blockquote

// declare variables
const FPS = 60;
var bs = 30;
var bx, by;
var xv, yv;
var canvas, context;
var bsp = 400;

// load canvas
canvas = document.getElementById("gameCanvas");
context = canvas.getContext("2d");

// set up interval (game loop)
setInterval(update, 1000 / FPS);

function doStuff() {
  var nameElement = document.getElementById("someInput");


  // ball speed
  bsp = nameElement.value;
}


// ball starting position
bx = canvas.width / 2;
by = canvas.height / 2;

// random ball starting speed (between 10 and 60 pps)
xv = Math.floor(Math.random() * 10 + bsp) / FPS;
yv = Math.floor(Math.random() * 10 + bsp) / FPS;

// random ball direction
if (Math.floor(Math.random() * 2) == 0) {
  xv = -xv;
}
if (Math.floor(Math.random() * 2) == 0) {
  yv = -yv;
}

// update function
function update() {
  // move the ball
  bx += xv;
  by += yv;

  // bounce the ball off each wall
  if (bx - bs / 2 < 0 && xv < 0) {
    xv = -xv;
  }
  if (bx + bs / 2 > canvas.width && xv > 0) {
    xv = -xv;
  }
  if (by - bs / 2 < 0 && yv < 0) {
    yv = -yv;
  }
  if (by + bs / 2 > canvas.height && yv > 0) {
    yv = -yv;
  }

  // draw background and ball
  context.fillStyle = "white";
  context.fillRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.fillStyle = "#CCCC00";
  context.arc(bx, by, bs, 0, Math.PI * 2, true);
  context.fillStyle = "#000000";
  context.closePath();
  context.fill();
}
> Blockquote
<!DOCTYPE html>

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>ball</title>

  <body>

    <head>
      <title>Ball Speed</title>
    </head>
    <h1>Ball Speed</h1>

    <body>

      <br>
      <input id="someInput" type="number">
      <input type="button" value="Sumbit" onClick="doStuff()">
    </body>

    <canvas id="gameCanvas" width="1900" height="750"></canvas>

</html>
2

all the stff outside of functions is executed only once, when the page is loaded for the first time

then you grab the user inputted bsp, but you never use that variable after that: it appears when you define it at the top, when you define random ball starting speed, and then it is changed in doStuff, but never used again

3

Sorry, I am a beginner with coding. So I have taken the html input value stored it in the variable bsp and then I want to use it to calculate the variables xv and yv. The values of these two variables then get used in the update function. So I am not sure why bsp needs to be recomputed in the update function. At the moment only the intial value of bsp works. I want a user to type into html input to change that initial value of bsp to change the speed of the ball. Again sorry, I am just starting to learn about coding. –

4

I found out how to do it.

5

bps needs to be used somewhere else, or you also need to change xv and yv inside doStuff