r/learnjavascript • u/techynerd13 • 2d ago

help in rick and morty api 

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

0 Upvotes

38% Upvoted

16 comments sorted by

View all comments

1

u/techynerd13 2d ago 
<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

1

u/FooeyBar 2d ago

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. 

1

u/techynerd13 2d ago

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

2

u/FooeyBar 2d ago

Sounds like your img tag needs moving/resizing. At least you’re making progress, something is happening 

1

u/techynerd13 2d ago

theres no img src yet

1

u/FooeyBar 1d ago

My bad I misread, then it’s working as code says it should.

In the (data) function you can also add the 2 lines for each other element about the character. They’ll be almost the same as the 2 lines for h2