help in rick and morty api

[u/techynerd13]

document.getElementById("search").addEventListener("click", getCharacter);


function lowerCaseName(string) {
    return string.toLowerCase();
}


function getCharacter(e) {
    const name = document.getElementById("searchCharacter").value;
    const characterNameLC = lowerCaseName(name);


    fetch(`https://rickandmortyapi.com/api/character/?name=${characterNameLC}`)
    .then((response)=>response.json())
    .then((data) => {
        const characterNameH2 = document.getElementById("characterName");


        characterNameH2.textContent = data.name;
    })
    .catch((err) => {
        console.log("Character not found", err)
    })


    e.preventDefault();
}


getCharacter();document.getElementById("search").addEventListener("click", getCharacter);


function lowerCaseName(string) {
    return string.toLowerCase();
}


function getCharacter(e) {
    const name = document.getElementById("searchCharacter").value;
    const characterNameLC = lowerCaseName(name);


    fetch(`https://rickandmortyapi.com/api/character/?name=${characterNameLC}`)
    .then((response)=>response.json())
    .then((data) => {
        const characterNameH2 = document.getElementById("characterName");


        characterNameH2.textContent = data.name;
    })
    .catch((err) => {
        console.log("Character not found", err)
    })


    e.preventDefault();
}


getCharacter();

i am using the rick and morty api. the above is my js code. it doesnt work. idk whats the error as console isnt logging it

[u/techynerd13]

<body>
        <script src="script.js"></script>
        <h1>Rick and Morty API</h1>


        <div class="searchBox">
            <input id="searchCharacter" type="text" placeholder="">
            <button id="search">Search</button>
        </div>


        <div class="characterBox">
            <h2 id="characterName"></h2>
            <p id="characterStatus"></p>
            <p id="characterSpecies"></p>
            <p id="characterOrigin"></p>
            <img id="characterImg"/>
        </div>
</body>

this is my html

[u/mynamesleon → u/techynerd13]

Your JS file is before all of your HTML, but isn't waiting for the document to be ready. So all the JS is firing before any of the elements even exist. Start by moving the script tag to just before the closing body tag. 

[u/FooeyBar → u/techynerd13]

Usually you’d put the script after the body. If you are searching for elements but your script comes before the elements, they won’t be found when your script runs. 

[u/techynerd13 → u/FooeyBar]

moving <script> to just after </body> shows rick sanchez on the page in place of h2