Change JS Variable based on HTML input?

Question

I am trying to create a game in JS and want to have the speed of the ball within able to be changed by a user clicking either a + or - button.

I'm not sure how to do this, here is what I have attempted so far:

var dxoriginal = 6;
var dyoriginal = -6;

document.getElementById("speed").innerHTML = dxoriginal;

* { padding: 0; margin: 0; }
     canvas { background: #eee; display: block; margin: 0 auto; }

  .button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
    width: 20px;
    float: left;

    }

   .button5:hover {
    background-color: #555555;
    color: white;
  }

<div style="float:left; margin-left:10px;" id="speed">Speed</div>
<br />
<button class="button button5" value="undefined">-</button>
<button class="button button5" value="undefined">+</button>

This does display the current speed the game is set to, yet I have no idea how to change it based on the buttons I have created.

Thanks in advance for your help

Use [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener), not `onclick`. — Sebastian Simon, Dec 23 '18 at 13:05
Using onclick and creating a function in JavaScript to his choosing would work. — Lloyd Nicholson, Dec 23 '18 at 13:07

score 0 · Answer 1 · answered Dec 23 '18 at 13:14

You can add the onclick attribute to your buttons. In the onclick attribute you can define a function to call when the button is clicked. In the example below I have set the + button to call the add() function, and the - button to call the subtract() function.

Both functions perform similar operations, one adds and the other subtracts 1 from the value of dxoriginal. Once they have computed their output they add the result to the screen by using .textContent (this is similar to .innerHTML however is strictly for text).

See working example below:

var dxoriginal = 6;
var dyoriginal = -6;
var speedElem = document.getElementById("speed");
function subtract() {
  dxoriginal--; // dxoriginal = dxoriginal - 1
  speedElem.textContent = dxoriginal;
}

function add() {
   dxoriginal++; // dxoriginal = dxoriginal + 1
   speedElem.textContent = dxoriginal;
}


speedElem.textContent = dxoriginal;

* {
  padding: 0;
  margin: 0;
}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
  width: 20px;
  float: left;
}

.button5:hover {
  background-color: #555555;
  color: white;
}

<div style="float:left; margin-left:10px;" id="speed">Speed</div>
<br />
<button class="button button5" onclick="subtract()" >-</button>
<button class="button button5" onclick="add()">+</button>

score 0 · Answer 2 · answered Dec 23 '18 at 13:16

Add an onclick attribute to each of the buttons:

var dxoriginal = 6;
var dyoriginal = -6;

function inc() {
  dxoriginal += 1; // change the 1 however you want
  document.getElementById("speed").innerHTML = dxoriginal;
}

function dec() {
  dxoriginal -= 1; // change the 1 however you want
  document.getElementById("speed").innerHTML = dxoriginal;
}

* {
  padding: 0;
  margin: 0;
}

canvas {
  background: #eee;
  display: block;
  margin: 0 auto;
}

.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
  width: 20px;
  float: left;
}

.button5:hover {
  background-color: #555555;
  color: white;
}

<div style="float:left; margin-left:10px;" id="speed">Speed</div>
<br />
<button class="button button5" value="undefined" onclick="dec()">-</button>
<button class="button button5" value="undefined" onclick="inc()">+</button>

score 0 · Answer 3 · answered Dec 23 '18 at 13:16

To change that value first you have to get the element and then change the value. You have successfully accessed the element. you have to use on click event handling function.

var speedVar=document.getElementById("speed").innerHTML;

speedVar=dxoriginal;
fuction decreseVal()
{
 dxoriginal=dxoriginal-1;    
 speedVar=dxoriginal-1;
}

<button  onclick="decresVal()"class="button button5" value="undefined">-</button>

blex · Answer 4 · 2018-12-23T13:33:26.367

Mixing HTML and JS

You should take the good habit of not mixing you HTML and JS. Try not to use this:

<button onclick="someFunction">Do something</button>

Instead, use this:

document.getElementById('some-id').addEventListener('click', someFunction);

Increasing and decreasing the speed

You can then do this:

var dxoriginal = 6;

document.getElementById('dec-btn').addEventListener('click', decreaseSpeed);
document.getElementById('inc-btn').addEventListener('click', increaseSpeed);
displaySpeed();

function decreaseSpeed() {
  dxoriginal -= 1;
  displaySpeed();
}

function increaseSpeed() {
  dxoriginal += 1;
  displaySpeed();
}

function displaySpeed() {
  document.getElementById("speed").innerHTML = dxoriginal;
}

/* Untouched CSS */*{padding:0;margin:0}canvas{background:#eee;display:block;margin:0 auto}.button5{background-color:#fff;color:#000;border:2px solid #555;width:20px;float:left}.button5:hover{background-color:#555;color:#fff}

<div style="float:left; margin-left:10px;" id="speed">Speed</div>
<br />
<button class="button button5" id="dec-btn">-</button>
<button class="button button5" id="inc-btn">+</button>

Interactive demo

I got a little carried away and made a demo:

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  ball = {
    radius: 10,
    speed: 2,
    direction: 1,
    x: 10,
    y: 20
  };

animationLoop();

document.getElementById('btn-speed-down').addEventListener('click', speedDown);
document.getElementById('btn-speed-up').addEventListener('click', speedUp);

function speedDown() {
  ball.speed = Math.max(-50, ball.speed - 1);
  document.getElementById('speed').textContent = ball.speed;
}

function speedUp() {
  ball.speed = Math.min(50, ball.speed + 1);
  document.getElementById('speed').textContent = ball.speed;
}

function animationLoop() {
  ball.x += ball.speed * ball.direction;
  if (ball.x >= canvas.width - ball.radius) {
    ball.x = canvas.width - ball.radius;
    ball.direction = -ball.direction;
  } else if(ball.x <= ball.radius){
    ball.x = ball.radius;
    ball.direction = -ball.direction;
  }
  renderCanvas();
  requestAnimationFrame(animationLoop);
}

function renderCanvas() {
  renderBackground();
  renderBall();
}

function renderBackground(){
  ctx.fillStyle = "#2e3033";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function renderBall() {
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
  ctx.fillStyle = "#0095DD";
  ctx.fill();
  ctx.closePath();
}

#canvas { display: block; }
#speed { display: inline-block; min-width: 1.5em; }

<p>
  Speed: <span id="speed">2</span>
  <button id="btn-speed-down">-</button>
  <button id="btn-speed-up">+</button>
</p>
<canvas id="canvas" width="500" height="40"></canvas>

score 0 · Answer 5 · answered Dec 23 '18 at 14:01

try it that way:

var dxoriginal = 6;
var dyoriginal = -6;
var dx = dxoriginal;

function plus(num){
  dx = dx + num;
}

function minus(num){
  dx = dx - num;
}
setInterval(function(){ document.getElementById("speed").innerHTML = dx; }, 100);

<div style="float:left; margin-left:10px;" id="speed">Speed</div>
<br />
<button class="button button5" value="undefined" onClick="minus(1)">-</button>
<button class="button button5" value="undefined" onClick="plus(1)">+</button>

Change JS Variable based on HTML input?

5 Answers5

Mixing HTML and JS

Increasing and decreasing the speed

Interactive demo