주소 표시 줄에서 구문 분석 된 문자열을 인수로 사용할 수없는 함수

격투 게임 Tekken 7의 캐릭터에 대한 기본 소개가 포함 된 웹 사이트를 다시 구축하고 있습니다 . 나는 모든 캐릭터와 그 데이터를 객체로 저장하고 웹 페이지에 캐릭터의 데이터를 표시하는 기능을 설정하여 해당 캐릭터의 이름을 유일한 인수로 받아 들였습니다.

/* 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 = character.name;
    charNickname.innerHTML = character.nickname;

    charFlag.src = character.flag;
    charImg.src = character.image;

    charAge.innerHTML = character.age;
    charCountry.innerHTML = character.country;
    charFightingStyle.innerHTML = character.fightingStyle;
    charDebut.innerHTML = character.debut;

    charOffense.innerHTML = character.offense;
    charDefence.innerHTML = character.defence;
    charRange.innerHTML = character.range;
    charPunishment.innerHTML = character.punishment;

    charGimmicks.innerHTML = character.gimmicks;
    charExecution.innerHTML = character.execution;
    charHurtbox.innerHTML = character.hurtbox;

    charPlaystyle.innerHTML = character.playstyle;
    charIntro.innerHTML = character.introduction;
}

/* CHARACTER EXAMPLE */
// Jin Kazama
const jin = {
    // Profile
    name: "Jin Kazama",
    nickname: "The Child of Destiny",

    flag: "../img/flagicons/japan.svg",
    image: "../img/characters/jin.png",

    age: 21,
    country: "Japan",
    fightingStyle: "Traditional karate",
    debut: "<em>Tekken 3</em>",

    // Scores
    offense: 9,
    defence: 10,
    range: 8,
    punishment: 8,

    gimmicks: 3,
    execution: 3,
    hurtbox: 3,

    // Playstyle
    playstyle: "Versatile, keep-out, Mishima",
    introduction: "<p>Versatile character who performs at his best in the mid-range, armed with good poking, great counter hit tools, great damage output, variety in his throws and a unique parry that deals with all highs and mids except projectiles (fireballs). While his Mishima-style tools are not quite as effective as those of the out-and-out Mishima characters, he makes up for it with other situational moves that plug those weaknesses. He does, however, lack range on a few key punishers.</p>",
};

/* CALLING DISPLAY FUNCTION */
let params = (new URL(document.location)).searchParams;
let char = params.get("view");
display(char);

코드는 주소 표시 줄에서 "view"매개 변수를 구문 분석하여 함수에 인수로 반환해야합니다. 예를 들어 주소 표시 줄에 URL이있는 .../guides/character.html?view=jin경우 코드는 이상적으로 jin값을 구문 분석하고 이를 표시하기 위한 인수로 함수에 다시 전달해야 합니다 . 나는 값이 문제없이 전달되었는지 확인하기 위해 char인수를 테스트했으며 예상대로 console.log인쇄 jin되었습니다.

그러나 코드가 자체적으로 실행되면 값을 인수로 사용할 수없고 대신 정의되지 않은 개체를 다시 전달하며 콘솔에 여기에 표시된 오류 메시지 GET [file path]/guides/undefined net::ERR_FILE_NOT_FOUND가 표시됩니다 .

아무도 왜 이런 일이 발생하는지 이해하도록 도울 수 있습니까? 나는 여전히 자바 스크립트의 내부 동작을 배우고있어서 완전히 어리둥절하다.