KPC
Kevin Powell - Community•3y ago
Malik

Javascript In astro

I used my javascript in script tag inside astro. But it's showing me red underlines but the code works fine and shows no error in the javascript. What's the reason. On hover it says Property value doesn't exist on type "Element". It's happening for .click .key .value .style Something it doesn't show underline and appears out of no where. 
const search = document.querySelector('.search_bar');
const search_btn = document.querySelector('.search_btn');
earch.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    search_btn.click();
  }
});
search_btn.addEventListener('click' ,  () => { 
  console.log('hello');
    const game_cards = document.querySelectorAll('.game_card');
    const search_value = search.value.toLowerCase().replace(/ /g, '');
    const names= document.querySelectorAll('.game_name a')
    for(let i = 0; i < names.length; i++){
        const name_value = names[i].textContent.toLowerCase().replace(/ /g, '');
        if(name_value.includes(search_value) === true){
            game_cards[i].style.display = '';
        }else{
          game_cards[i].style.display = 'none';
        }
    }
});
const search = document.querySelector('.search_bar');
const search_btn = document.querySelector('.search_btn');
earch.addEventListener("keydown", (e) => {
  if (e.key === "Enter") {
    search_btn.click();
  }
});
search_btn.addEventListener('click' ,  () => { 
  console.log('hello');
    const game_cards = document.querySelectorAll('.game_card');
    const search_value = search.value.toLowerCase().replace(/ /g, '');
    const names= document.querySelectorAll('.game_name a')
    for(let i = 0; i < names.length; i++){
        const name_value = names[i].textContent.toLowerCase().replace(/ /g, '');
        if(name_value.includes(search_value) === true){
            game_cards[i].style.display = '';
        }else{
          game_cards[i].style.display = 'none';
        }
    }
});
2 Replies
Squidgical
Squidgical•3y ago
This is likely because either your editor, Astro, or both, are checking and enforcing type definitions (this checks that stuff will work before you try to run it). document.querySelector returns a type of Element, however the properties you're accessing are only available on HTMLElements If you know that your query will return an actual HTMLElement, you can tell whatever is checking types that you know what you're doing by writing the following; 
// in TypeScript
const definitelyHtmlElement = document.querySelector<HTMLElement>(".my-thing");
const definitelyAnchorElement = document.querySelector<HTMLAnchorElement>(".my-anchor");

// in JavaScript
/** @type {HTMLElement} */
const definitelyHtmlElement = document.querySelector(".my-thing");
/** @type {HTMLAnchorElement} */
const definitelyAnchorElement = document.querySelector(".my-anchor");
// in TypeScript
const definitelyHtmlElement = document.querySelector<HTMLElement>(".my-thing");
const definitelyAnchorElement = document.querySelector<HTMLAnchorElement>(".my-anchor");

// in JavaScript
/** @type {HTMLElement} */
const definitelyHtmlElement = document.querySelector(".my-thing");
/** @type {HTMLAnchorElement} */
const definitelyAnchorElement = document.querySelector(".my-anchor");
Note that HTMLElement does not mean <html>, it means any XML element which belongs to the HTML specification, for example <a>, <p>, <div>, etc. There's also SVGElement for svg stuff such as <path> and <g> Element captures all of these. If you're familiar with what inheritance is in OOP, this is the same thing; HTMLElement inherits Element, HTMLAnchorElement and HTMLDivElement both inherit HTMLElement, etc. an extra tip; If you know what kind of element you're going to get, but don't know what the specific name for it is in terms of it's type, you can just type in HTML either in the angle brackets (typescript only) or in the curly braces after @type and press ctrl + space in VSCode, it will give you a list of suggestions you can scroll through, or keep typing to narrow down the search.
Malik
MalikOP•3y ago
Got it. Thank for the extra tip. 💛

Did you find this page helpful?