Issues Importing Variable/Classes for Main.js to use

Question

I am trying to get the NatoAlphabet into another javascript file to be used in the main javascript file. I am trying to make it so that in the future I can add more custom Phonetic Alphabets to choose from. However I am having issues using the variables from the other file.

Is there a way I can import the alphabet.js file for further use? I am also open to other approaches.

Thank you!

Alphabet.js

var NatoAlphabet = {"a":"Alpha",
    "b":"Bravo", 
    "c":"Charlie", 
    "d":"Delta", 
    "e":"Echo", 
    "f":"Foxtrot", 
    "g":"Golf", 
    "h":"Hotel", 
    "i":"India", 
    "j":"Juliett", 
    "k":"Kilo", 
    "l":"Lima", 
    "m":"Mike", 
    "n":"November",
    "o":"Oscar", 
    "p":"Papa", 
    "q":"Quebec", 
    "r":"Romeo", 
    "s":"Siera", 
    "t":"Tango", 
    "u":"Uniform", 
    "v":"Victor",
    "w":"Wiskey", 
    "x":"X-ray", 
    "y":"Yankee", 
    "z":"Zulu"};

Main.js

import {NatoAlphabet} from "alphabet.js";
    
var textToTranscribe = "";
var transcribedOutput = document.getElementById("transcribedOutput");
var arrayToTranscribe = [];


function transcribeOnClick(){
    transcribedOutput.innerHTML = ""
    textToTranscribe = document.getElementById("textToTranscribe").value; 
    convertStringToArray();
    arrayToTranscribe.forEach(transcribeChar)
}

function convertStringToArray(){
    arrayToTranscribe = Array.from(textToTranscribe);
    console.log(arrayToTranscribe);
}

function transcribeChar(index){
    if(index == " "){
        transcribedOutput.innerHTML += "<br>";
    }else{
        transcribedOutput.innerHTML += index.toUpperCase() + " as in " + "<b>" 
                                        + NatoAlphabet[index.toLowerCase()] + "</b>" +"<br>";
    }
    
}

Answer 1

The simple approach would be using ES6 modules see MDN guide

1. First we include our main.js file in index.html using script src ... but catch is in type value must be module to use import statements

2. Second create our Alphabet.js file and add an export keyword to the item which we want to import in other scripts. ( U can export as many as functions variables etc )

3. Finally we import our NatoAlphabet variable from Alphabet.js file using import statement. ( here remember we need to provide the absolute or relative path to the file from which we are importing the js content ).

Solution =>

index.html

 <!-- some above code -->
 <script src="main.js" type="module" charset="utf-8"></script>
 <!-- some below code -->

Alphabet.js

export let NatoAlphabet = {
  "a": "Alpha",
  "b": "Bravo",
  "c": "Charlie",
  "d": "Delta",
  "e": "Echo",
  "f": "Foxtrot",
  "g": "Golf",
  "h": "Hotel",
  "i": "India",
  "j": "Juliett",
  "k": "Kilo",
  "l": "Lima",
  "m": "Mike",
  "n": "November",
  "o": "Oscar",
  "p": "Papa",
  "q": "Quebec",
  "r": "Romeo",
  "s": "Siera",
  "t": "Tango",
  "u": "Uniform",
  "v": "Victor",
  "w": "Wiskey",
  "x": "X-ray",
  "y": "Yankee",
  "z": "Zulu"
};

main.js

import {NatoAlphabet} from "./Alphabet.js";   
console.log(NatoAlphabet)
//... All other code 

NOTE : All the files must be in same folder ( you can change the structure but remember to update your import from location )