Why VS Code autocomplete doesn't suggest .value attribute when working with Java Script file?

Question

HTML:

  <body>
    <h1>Grocery List</h1>
    <form action="/nowhere">
      <label for="item">Enter A Product</label>
      <input type="text" id="product" name="product" />
      <label for="item">Enter A Quantity</label>
      <input type="number" id="qty" name="qty" />
      <button>Submit</button>
    </form>

    <ul id="list"></ul>
  </body>

Java Script:

const frm = document.querySelector("form");
const prdct = document.querySelector("#product");
const qty = document.querySelector("#qty");
const mylst = document.querySelector("#list");

frm.addEventListener("submit", (e) => {
  e.preventDefault();
  const myele = document.createElement("li");
  myele.textContent = qty.value;
  myele.textContent += ` ${prdct.value}`;
  mylst.appendChild(myele);
  qty.value = "";
  prdct.value = "";
});

As can be seen, VS code isn't suggesting '.value' attribute with other suggestions. What can be the reason?

First of all what type is a prdct? I'd assume the one you think it is conflicts with what VSCode thinks it is. My suggestion would be switching to typescript, there is no other way to tell your IDE to autocomplete things properly without providing a type for a thing — JSEvgeny
– JSEvgeny, Commented Jul 18, 2022 at 10:57
@JSEvgeny I've updated the code. 'prdct' is an object containing the form input. — Anurag Pradhan
– Anurag Pradhan, Commented Jul 18, 2022 at 11:07
welcome in the realm of loosely typed languages! There's no way for the editor to know the exact type of a javascript variable because it's known only at runtime (unless doing weak assumptions). — Diego D
– Diego D, Commented Jul 18, 2022 at 11:07
anyway the only elements having the value property (or html value attribute) are <button>, <data>, <input>, <li>, <meter>, <option>, <progress>, <param> as listed here: developer.mozilla.org/en-US/docs/Web/HTML/Attributes. The editor cannot know that the variable holds a compatible html element. — Diego D
– Diego D, Commented Jul 18, 2022 at 11:12

Kokodoko · Accepted Answer · 2022-07-18 12:01:22Z

2

Document.querySelector() returns a Element, so the editor cannot know that it has a value.

If you would create the element by javascript, then the editor DOES know...

let input = document.createElement("input")
let test = input.value // now you can get autocomplete

Another way is to use typescript :

let input:HTMLInputElement = document.querySelector("myinput")!
let test = input.value // now you can get autocomplete

answered Jul 18, 2022 at 12:01

Kokodoko

28.3k37 gold badges132 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why VS Code autocomplete doesn't suggest .value attribute when working with Java Script file?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related