rename consts; element shorthand function

script.js

@@ -1,5 +1,9 @@
 import init, {load_default_game_data, add_tiles} from './pkg/bitsy_tiles.js';
 
+function el(id) {
+    return document.getElementById(id);
+}
+
 function pagination(e) {
     const parent = e.target.parentNode;
 
@@ -30,21 +34,21 @@ function readFile(input, callback, type = "text") {
 async function run() {
     await init();
 
-    const addImageButton        = document.getElementById("add");
-    const buttonGameDataProceed = document.getElementById("game-data-next");
-    const gameDataInput         = document.getElementById("game-data");
-    const importButton          = document.getElementById("import");
-    const load_game_button      = document.getElementById("load");
-    const new_game_button       = document.getElementById("new");
-    const output                = document.getElementById("output");
-    const preview               = document.getElementById("preview");
-    const resetButton           = document.getElementById("reset");
+    const buttonAddImage         = el("add");
+    const buttonGameDataProceed  = el("game-data-next");
+    const textareaGameDataInput  = el("game-data");
+    const buttonImportGame       = el("import");
+    const buttonLoadGame         = el("load");
+    const buttonNewGame          = el("new");
+    const textareaGameDataOutput = el("output");
+    const preview                = el("preview");
+    const resetButton            = el("reset");
 
     // hide all pages except start page
     for (let page of document.getElementsByClassName('page')) {
         page.style.display = "none";
     }
-    document.getElementById("start").style.display = "block";
+    el("start").style.display = "block";
 
     for (let pageButton of document.getElementsByClassName("pagination")) {
         pageButton.addEventListener('click',    pagination);
@@ -52,43 +56,43 @@ async function run() {
     }
 
     function new_game() {
-        gameDataInput.value = load_default_game_data();
+        textareaGameDataInput.value = load_default_game_data();
         // we don't need to look at the default game data, so skip ahead to the image page
         buttonGameDataProceed.click();
     }
 
     function clear_game() {
-        gameDataInput.value = "";
+        textareaGameDataInput.value = "";
     }
 
-    new_game_button.addEventListener("click", new_game);
-    new_game_button.addEventListener("touchend", new_game);
-    load_game_button.addEventListener("click", clear_game);
-    load_game_button.addEventListener("touchend", clear_game);
+    buttonNewGame.addEventListener("click", new_game);
+    buttonNewGame.addEventListener("touchend", new_game);
+    buttonLoadGame.addEventListener("click", clear_game);
+    buttonLoadGame.addEventListener("touchend", clear_game);
 
     // handle game data and image
 
-    document.getElementById("game").addEventListener("change", function() {
+    el("game").addEventListener("change", function() {
         readFile(this, function (e) {
-            gameDataInput.value = e.target.result;
+            textareaGameDataInput.value = e.target.result;
             checkGameData();
         }, "text");
     });
 
     function checkGameData() {
-        if (gameDataInput.value.length > 0) {
+        if (textareaGameDataInput.value.length > 0) {
             buttonGameDataProceed.removeAttribute("disabled");
         } else {
             buttonGameDataProceed.setAttribute("disabled", "disabled");
         }
     }
 
-    gameDataInput.addEventListener("change", checkGameData);
-    gameDataInput.addEventListener("keyup",  checkGameData);
+    textareaGameDataInput.addEventListener("change", checkGameData);
+    textareaGameDataInput.addEventListener("keyup",  checkGameData);
 
     preview.style.display = "none";
 
-    document.getElementById('image').addEventListener('change', function () {
+    el('image').addEventListener('change', function () {
         readFile(this, function (e) {
             preview.src = e.target.result;
             preview.style.display = "initial"
@@ -96,23 +100,23 @@ async function run() {
     });
 
     function addTiles() {
-        let image    = document.getElementById("preview").getAttribute("src");
-        let gameData = document.getElementById("game-data").value;
-        let prefix   = document.getElementById("prefix").value;
+        let image    = el("preview").getAttribute("src");
+        let gameData = el("game-data").value;
+        let prefix   = el("prefix").value;
 
-        output.value = add_tiles(gameData, image, prefix);
+        textareaGameDataOutput.value = add_tiles(gameData, image, prefix);
     }
 
-    importButton.addEventListener("click",    addTiles);
-    importButton.addEventListener("touchend", addTiles);
+    buttonImportGame.addEventListener("click",    addTiles);
+    buttonImportGame.addEventListener("touchend", addTiles);
 
     function addImage() {
-        gameDataInput.value = output.value;
-        output.value = "";
+        textareaGameDataInput.value = textareaGameDataOutput.value;
+        textareaGameDataOutput.value = "";
     }
 
-    addImageButton.addEventListener("click",    addImage);
-    addImageButton.addEventListener("touchend", addImage);
+    buttonAddImage.addEventListener("click",    addImage);
+    buttonAddImage.addEventListener("touchend", addImage);
 
     function reset() {
         clear_game();