dot value property does not exist on type 'HTMLElement'

Question

im doing a personal project, and I got some issues finishing up register and login form with firebase. I am using Vuejs and TS and its throwing me this error. The part where is email saved as txtEmail.value and txtPassword.value thorws the error. Here is a snippet:

const txtEmail = document.getElementById('email');
const txtPassword = document.getElementById('psw');
const btnLogin = document.getElementById('login');
const btnSignUp = document.getElementById('register');
const btnLogout = document.getElementById('logout');


btnLogin.addEventListener('click', e => {
    const email = txtEmail.value;
    const pass = txtPassword.value;
    const auth = firebase.auth();
    //Sign in
    const promise = auth.signInWithEmailAndPassword(email, pass);
    promise.catch(e => console.log(e.message));
});

Have you checked [this answer](https://stackoverflow.com/questions/12989741/the-property-value-does-not-exist-on-value-of-type-htmlelement)? Also is it a Vue CLI app or are you using VueJS over CDN by adding it using ` — Dharmaraj, Aug 22 '21 at 16:31

Get Off My Lawn · Accepted Answer · 2021-08-22T19:53:57.310

You need to cast the element's return type to an HTMLInputElement using type assertions.

Reminder: Because type assertions are removed at compile-time, there is no runtime checking associated with a type assertion. There won’t be an exception or null generated if the type assertion is wrong.

// Using `as`:
const txtEmail = document.getElementById('email') as HTMLInputElement;
const txtPassword = document.getElementById('psw') as HTMLInputElement;

// Using  angle-brackets:
const txtEmail = <HTMLInputElement>document.getElementById('email');
const txtPassword = <HTMLInputElement>document.getElementById('psw');

dot value property does not exist on type 'HTMLElement'

1 Answers1