I'm rebuilding a website which contains basic introductions to characters in the fighting game Tekken 7. I've stored all the characters and their data as objects in one file.
/* CHARACTERS */
const characters = {
// Akuma
akuma: {
// Profile
name: "Akuma (Gouki)",
nickname: "The Raging Demon",
flag: "../img/flagicons/unknown.svg",
image: "../img/characters/akuma.png",
age: "Unknown",
country: "Unknown",
fightingStyle: "Ansatsuken, Satsui no Hadō",
debut: "<em>Tekken 7</em>",
// Scores
offense: 10,
defence: 10,
range: 7,
punishment: 7,
gimmicks: 4,
execution: 5,
hurtbox: 3,
// Playstyle
playstyle: `Offensive, unorthodox, "MESSATSU!"`,
introduction: "<p>Guest character from Capcom's <em>Street Fighter</em> series with great offensive tools and some of the highest damage output in the game thanks to his meter and special moves. However, a lot of his key moves come with some risk, generally being either unsafe on block or leaving him vulnerable in mid-air.</p>",
},
get gouki() {
return this.akuma;
},
get gōki() {
return this.akuma;
},
// Heihachi Mishima
heihachi: {
// Profile
name: "Heihachi Mishima",
nickname: "The King of Iron Fist",
flag: "../img/flagicons/japan.svg",
image: "../img/characters/heihachi-2.png",
age: 75,
country: "Japan (citizenship denied by government)",
fightingStyle: "Mishima-ryū karate",
debut: "<em>Tekken</em>",
// Scores
offense: 9,
defence: 7,
range: 8,
punishment: 7,
gimmicks: 3,
execution: 4,
hurtbox: 4,
// Playstyle
playstyle: "Offensive, Mishima",
introduction: "<p>Offensive Mishima character with great poking, good counter hit tools, great damage output and good range. However, a lot of his best lows are launch punishable if not just unsafe on block, while his WS/FC punishment is mediocre.</p>",
},
// Kazumi Mishima
kazumi: {
// Profile
name: "Kazumi Mishima",
nickname: "The Assassin of Hachijō",
flag: "../img/flagicons/japan.svg",
image: "../img/characters/kazumi.png",
age: "Unknown (deceased)",
country: "Japan",
fightingStyle: "Hachijō-ryū karate, Mishima-ryū karate",
debut: "<em>Tekken 7</em>",
// Scores
offense: 9,
defence: 7,
range: 7,
punishment: 7,
gimmicks: 3,
execution: 1,
hurtbox: 2,
// Playstyle
playstyle: "Offensive, poking",
introduction: "<p>Offensive character who, despite her name, lacks a big chunk of the Mishima-style toolset that her family members possess but more than makes up for it with great poking, great pressure tools, good counter hit tools and great range (partly thanks to her teleporting pet tiger). However, she lacks range on some key punishers, while most of her best lows are quite slow and unreliable for pressure.</p>",
},
}
/* EXPORTING CHARACTERS */
export { characters };
I'm then attempting to export to another file that contains a function to display the given haracter's data on a web page, accepting that character's name as its sole argument. However, when I check the console on my browser, I get a SyntaxError that says "Cannot use import statement outside a module". What's the issue here?
/* IMPORTING CHARACTERS */
import { characters } from './character-list.js';
/* DECLARATIONS */
// Profile
let charName = document.getElementById("char-name");
let charNickname = document.getElementById("nickname");
let charFlag = document.getElementById("flag");
let charImg = document.getElementById("image");
let charAge = document.getElementById("age");
let charCountry = document.getElementById("country");
let charFightingStyle = document.getElementById("fighting-style");
let charDebut = document.getElementById("first-appearance");
// Scores
let charOffense = document.getElementById("offense");
let charDefence = document.getElementById("defence");
let charRange = document.getElementById("range");
let charPunishment = document.getElementById("punishment");
let charGimmicks = document.getElementById("gimmicks");
let charExecution = document.getElementById("execution");
let charHurtbox = document.getElementById("hurtbox");
// Playstyle and Intro
let charPlaystyle = document.getElementById("playstyle");
let charIntro = document.getElementById("introduction");
/* DISPLAY FUNCTION */
const display = character => {
charName.innerHTML = characters[character].name;
charNickname.innerHTML = characters[character].nickname;
charFlag.src = characters[character].flag;
charImg.src = characters[character].image;
charAge.innerHTML = characters[character].age;
charCountry.innerHTML = characters[character].country;
charFightingStyle.innerHTML = characters[character].fightingStyle;
charDebut.innerHTML = characters[character].debut;
charOffense.innerHTML = characters[character].offense;
charDefence.innerHTML = characters[character].defence;
charRange.innerHTML = characters[character].range;
charPunishment.innerHTML = characters[character].punishment;
charGimmicks.innerHTML = characters[character].gimmicks;
charExecution.innerHTML = characters[character].execution;
charHurtbox.innerHTML = characters[character].hurtbox;
charPlaystyle.innerHTML = characters[character].playstyle;
charIntro.innerHTML = characters[character].introduction;
}
/* CALLING DISPLAY FUNCTION */
let params = (new URL(document.location)).searchParams;
let char = params.get("view");
display(char);
