Q:

How come the "transform" of document.getElementById().style.transform="translateX()" will only translate once?

I'm making a new online game. When I click a button, I want the red square to translate on the X-axis by 50px. Here is the HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>cake (singleplayer 2d adventure game)</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
   <script>
      function moveright() {
        document.getElementById("master-cube").style.transform = "translateX(50px)";
      }
    </script>
    <div id="master-cube"></div><img src="arrows/rightarrow.png" alt=h"Right Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">
    <img src="arrows/middlejumpsquare.png" alt="Jump Square" height="60vh" width="60vw" onclick="movejump()" class="arrowcontrols">
    <img src="arrows/leftarrow.png" alt="Left Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">
    </body>
</html>

I understand that the images will not load. If you scroll down, you will find a Repl.it.
Here is the CSS:
html {margin: none;}

body {margin: none; width: 100vw; height: 100vh;}

.arrowcontrols {float: right; margin-right: 5px; margin-top: 90%; margin-bottom: 10%;}

#master-cube {background-color: #FF0000; height: 40px; width: 40px;}

If you want to see the Repl.it, here is the link for it:
https://repl.it/@ritzcrackerz201/cake

A:

That's because your element has transform: translateX(50px) once you set it. It is always there, and setting it again to the same thing doesn't do anything.
You have to set it to something else, such as:

let displacement = 50;

function moveright() {
  document.getElementById("master-cube").style.transform = `translateX(${displacement}px)`;
  displacement += 50;
}
html {
  margin: none;
}

body {
  margin: none;
  width: 100vw;
  height: 100vh;
}

.arrowcontrols {
  margin-right: 5px;
  margin-top: 10%;
  margin-bottom: 10%;
}

#master-cube {
  background-color: #FF0000;
  height: 40px;
  width: 40px;
}
<div id="master-cube"></div><img src="arrows/rightarrow.png" alt="Right Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">
<img src="arrows/middlejumpsquare.png" alt="Jump Square" height="60vh" width="60vw" onclick="movejump()" class="arrowcontrols">
<img src="arrows/leftarrow.png" alt="Left Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">

Since you asked how it worked in the comment, it is:
You need to set it to translate a different amount. Or else, if you just translate it by 50px, then it is always translated by 50px (from the original position) and there is no difference.
So that's why somehow you need to translate it by 100px or 150px, and so on. So one way is to have a variable, and set it to 50, and every time you translate it, translate it by that amount, and increment that 50 to 100, and then to 150, etc.
The usage of 
`translateX(${displacement}px)`

is called string interpolation and you can look it up here.
Some programmers may consider having a variable like that not good, because it is in the global scope and other code can change it too, and they'd hide the variable somehow as a private variable. (really by enclosing it in a local scope in JavaScript. But don't worry about that for now.)
Since you seem like you are just into programming, you can also add transition: all 1s to the moving object to make it translate more smoothly:

let displacement = 50;

function moveright() {
  document.getElementById("master-cube").style.transform = `translateX(${displacement}px)`;
  displacement += 50;
}
html {
  margin: none;
}

body {
  margin: none;
  width: 100vw;
  height: 100vh;
}

.arrowcontrols {
  margin-right: 5px;
  margin-top: 10%;
  margin-bottom: 10%;
}

#master-cube {
  background-color: #FF0000;
  height: 40px;
  width: 40px;
  transition: all 1s;
}
<div id="master-cube"></div><img src="arrows/rightarrow.png" alt="Right Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">
<img src="arrows/middlejumpsquare.png" alt="Jump Square" height="60vh" width="60vw" onclick="movejump()" class="arrowcontrols">
<img src="arrows/leftarrow.png" alt="Left Arrow" height="60vh" width="60vw" onclick="moveright()" class="arrowcontrols">

