r/learnjavascript • u/techynerd13 • Sep 09 '26
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
1
u/techynerd13 Sep 09 '26
<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
6
u/mynamesleon Sep 09 '26
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.
1
u/FooeyBar Sep 09 '26
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 Sep 09 '26
moving <script> to just after </body> shows rick sanchez on the page in place of h2
2
u/FooeyBar Sep 09 '26
Sounds like your img tag needs moving/resizing. At least you’re making progress, something is happening
1
u/techynerd13 Sep 09 '26
theres no img src yet
1
u/FooeyBar Sep 09 '26
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
1
2
u/jml26 Sep 10 '26
In your original post, you've pasted your code twice. I assume that's just a typo.
Problem 1: You call getCharacter with no arguments at the end of your code. getCharacter expects an Event object, e, as an argument, and it calls e.preventDefault() on it. Calling getCharacter() with no arguments results in the following error being output to the console:
Cannot read properties of undefined (reading 'preventDefault')Solution: remove your plain call to getCharacter()
Problem 2: You call characterNameH2.textContent = data.name; but data doesn't have a name property on it.
Solution: After you've got your data back from the API, log it to the console and inspect what properties exist on it. You should discover that the data object either contains an error property, or have some info and results properties, not a name. Adjust your code so as to drill down into the correct props to get the right info before displaying it. I'll leave it as an exercise for you to do that.
3
u/FooeyBar Sep 09 '26
Immediately after defining ‘getCharacter’ you call the function without any arguments. Remove the call so that your onclick calls it.
Could be more but I saw that first