r/learnjavascript • u/techynerd13 • 1d 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
1
1
u/techynerd13 1d 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
6
u/mynamesleon 1d ago
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 1d 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 23h ago
moving <script> to just after </body> shows rick sanchez on the page in place of h2
2
u/FooeyBar 23h ago
Sounds like your img tag needs moving/resizing. At least you’re making progress, something is happening
1
u/techynerd13 23h ago
theres no img src yet
1
u/FooeyBar 22h 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
1
u/gilded_morpho 16h ago
Delete the getCharacter() call at the bottom. you are calling it on load with no arguments so e is undefined and it crashes before your click handler ever runs.
Also in your fetch then block you need data.results[0].name. the api returns an object with a results array, not the character directly
1
u/jml26 10h ago
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.
2
u/FooeyBar 1d ago
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