I dont understand 1 thing.
I have a doubt about scoping.
okay so see how I arranged it-
function dynamicStatsApi() {
let val = parseInt(input.value) === NaN ? input.value : parseInt(input.value);
console.log(val);
}
then-
btn.addEventListener("click", () => {
fetchData;
dynamicStatsApi();
});
Now how do I access it here ?
let stats = `https://rpg-creature-api.freecodecamp.rocks/api/creature/${val}`;
I tried with addEventListener(“change”) but that also didn’t helped.
But that logic was flawed.
I am very confused now.
Ok. First things first. If parseInt(input.value) === NaN isn’t working, what do you need to change there? And since you’re using stats in fetchData() careful with the ordering of your statements.
Just read your recent post…why do you think you need to change the event in the listener??
I’d say slow down and think about this stuff before you respond again with questions.
just assign val = input.value
and I don’t need to chnage event, it is fine. I did that ealier but that was flawed logic
function dynamicStatsApi() {
let val = input.value;
return val;
}
and assigned to click btn event.
Please answer 1 question, when we get input from DOM then it is string then why I am getting number here ?
Alright. Show your full code please and explain what you entered in the text input element before clicking the Search button.
const input = document.getElementById("search-input");
const btn = document.getElementById("search-button");
const namesx = document.getElementById("creature-name");
const idsx = document.getElementById("creature-id");
const weightsx = document.getElementById("weight");
const heightsx = document.getElementById("height");
const typesx = document.getElementById("types");
const hpsx = document.getElementById("hp");
const attacksx = document.getElementById("attack");
const defensesx = document.getElementById("defense");
const sAtk = document.getElementById("special-attack");
const sDef = document.getElementById("special-defense");
const speedsx = document.getElementById("speed");
const creatures = "https://rpg-creature-api.freecodecamp.rocks/api/creatures";
function dynamicStatsApi() {
let val = input.value;
console.log(val);
return val;
}
let stats = `https://rpg-creature-api.freecodecamp.rocks/api/creature/${dynamicStatsApi()}`;
const fetchData = async () => {
try {
const res1 = await fetch(creatures);
const data1 = await res1.json();
const res2 = await fetch(stats);
const data2 = await res2.json();
data1.forEach((obj) => {
const {name, id} = obj;
if(input.value === name || id) {
if(data2.id === id) {
const {id,name,weight,height,stats,types} = data2;
let typeVar = [];
let hpVar;
let atkVar;
let defVar;
let speedVar;
let sAtkVar;
let sDefVar;
types.forEach((type) => {
typeVar.push(type.name);
})
stats.forEach((stat) => {
if(stat.name === "hp") {
hpVar = stat.base_stat;
}
else if(stat.name === "attack") {
atkVar = stat.base_stat;
}
else if(stat.name === "defense") {
defVar = stat.base_stat;
}
else if(stat.name === "speed") {
speedVar = stat.base_stat;
}
else if(stat.name === "special-attack") {
sAtkVar = stat.base_stat;
}
else if(stat.name === "special-defense") {
sDefVar = stat.base_stat;
}
})
idsx.innerHTML = `Id: ${id}`;
namesx.innerHTML = `Name: ${name}`;
weightsx.innerHTML = `Weight: ${weight}`;
heightsx.innerHTML = `Height: ${height}`;
typesx.innerHTML = `Type: ${typeVar}`;
hpsx.innerHTML = `Hp: ${hpVar}`;
attacksx.innerHTML = `Atk: ${atkVar}`;
defensesx.innerHTML = `Def: ${defVar}`;
sAtk.innerHTML = `S.Atk: ${sAtkVar}`;
sDef.innerHTML = `S.Def: ${sDefVar}`;
speedsx.innerHTML = `Speed: ${speedVar}`;
}
} else {
alert("Creature not found");
}
})
} catch (err) {
console.log(err);
}
};
btn.addEventListener("click", () => {
fetchData;
dynamicStatsApi();
});
Try console.log(typeof val);
typeof method says string whether I enter no. or letters
So there you have your answer. The type of anything entered into a text input field, regardless of whether it is a word or a number, is always a string.
Okay, now how do I fix the main issue. Please guide me
What else do you have in the global space that will not work there? At least, not the way you have written it…
My updated code -
/* file: script.js */
const input = document.getElementById("search-input");
const btn = document.getElementById("search-button");
const namesx = document.getElementById("creature-name");
const idsx = document.getElementById("creature-id");
const weightsx = document.getElementById("weight");
const heightsx = document.getElementById("height");
const typesx = document.getElementById("types");
const hpsx = document.getElementById("hp");
const attacksx = document.getElementById("attack");
const defensesx = document.getElementById("defense");
const sAtk = document.getElementById("special-attack");
const sDef = document.getElementById("special-defense");
const speedsx = document.getElementById("speed");
const creatures = "https://rpg-creature-api.freecodecamp.rocks/api/creatures";
const fetchData = async () => {
const stats = `https://rpg-creature-api.freecodecamp.rocks/api/creature/${input.value}`;
try {
const res1 = await fetch(creatures);
const data1 = await res1.json();
const res2 = await fetch(stats);
const data2 = await res2.json();
data1.forEach((obj) => {
const {name, id} = obj;
if(input.value === name || id) {
if(data2.id === id) {
const {id,name,weight,height,stats,types} = data2;
let typeVar = [];
let hpVar;
let atkVar;
let defVar;
let speedVar;
let sAtkVar;
let sDefVar;
types.forEach((type) => {
typeVar.push(type.name);
})
stats.forEach((stat) => {
if(stat.name === "hp") {
hpVar = stat.base_stat;
}
else if(stat.name === "attack") {
atkVar = stat.base_stat;
}
else if(stat.name === "defense") {
defVar = stat.base_stat;
}
else if(stat.name === "speed") {
speedVar = stat.base_stat;
}
else if(stat.name === "special-attack") {
sAtkVar = stat.base_stat;
}
else if(stat.name === "special-defense") {
sDefVar = stat.base_stat;
}
})
idsx.innerHTML = `Id: ${id}`;
namesx.innerHTML = `Name: ${name}`;
weightsx.innerHTML = `Weight: ${weight}`;
heightsx.innerHTML = `Height: ${height}`;
typesx.innerHTML = `Type: ${typeVar}`;
hpsx.innerHTML = `Hp: ${hpVar}`;
attacksx.innerHTML = `Atk: ${atkVar}`;
defensesx.innerHTML = `Def: ${defVar}`;
sAtk.innerHTML = `S.Atk: ${sAtkVar}`;
sDef.innerHTML = `S.Def: ${sDefVar}`;
speedsx.innerHTML = `Speed: ${speedVar}`;
}
}
})
} catch (err) {
alert("Creature not found");
}
};
btn.addEventListener("click", () => {
idsx.innerHTML = "";
namesx.innerHTML = "";
weightsx.innerHTML = "";
heightsx.innerHTML = "";
typesx.innerHTML = "";
hpsx.innerHTML = "";
attacksx.innerHTML = "";
defensesx.innerHTML = "";
sAtk.innerHTML = "";
sDef.innerHTML = "";
speedsx.innerHTML = "";
fetchData();
});
program is working fine now, need to do some changes here and there I think to pass all tests. If I face any problem I will ask here.
Thank you very much, what you typed here, I read it again and again and though and did it and it seems good now
I completed the project and submited it.
I have 1 project remaining then I’ll claim certificate but then also I will make more projects and learn React.
Thank you very much. I learnt so much from you today.
Have a nice day 
is the provided updated code working fine .can i use it ?
you can’t use someone else’s code, no