Typescript error "Property 'value' does not exist on type 'HTMLElement'&quo-CodePudding

I am trying to put in a typescript file, then these "Property 'value' does not exist on type 'HTMLElement'", "Duplicate function implementation." and "Property 'onclick' does not exist on type 'Element'" appear on my screen as compilation error but when I tried to run in javascript file it works very well. https://jsfiddle.net/chrismontage/onh51g93/12/

<label for = "password">New Password</label>
<input type="password" class = "input" id = "password1" value="">
<label for = "cnfm-password">Confirm Pasword</label>
<input type="password" class = "input" id = "password2">
<input onclick = "verifyPassword()" type="submit" value = "Save Changes"class = "btn" id = "myBtn">
          
 <!-- The Modal -->
<div id="myModal" >

  <!-- Modal content -->
  <div >
    <div >
      <img src="/images/logo.png" alt="SAMPLE" width="120" class = "mx-auto">
      <span >&times;</span>
    </div>
    
    <div >
      <h4 class = "text-center"><span id = "message1"></span></h4>
    </div>
    <div >
      <button class = "btn" id = "confirm">Okay</button>

    </div>
  </div>
</div>

ts file

function verifyPassword(){
    var pw1 = document.getElementById("password1");
    var pw2 = document.getElementById("password2");
    
    // Get the modal
    var modal = document.getElementById("myModal");
    
    // Get the button that opens the modal
    var btn1 = document.getElementById("myBtn");
    
    var confirm = document.getElementById("confirm");
    
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("close")[0];
    
    
    btn1.onclick = function () {
        
        modal.style.display = "block";
    
        //check empty password field
    
        if(pw1.value == "") {
            document.getElementById("message1").innerHTML = "Please put your new password!";
            return false;
        }
    
        //minimum password length validation
        if(pw1.value.length < 8) {
            document.getElementById("message1").innerHTML = "Password length must be atleast 8 characters";
            return false;
        }
    
        //maximum length of password validation
        if(pw1.value.length > 15) {
           document.getElementById("message1").innerHTML = "Password length must not exceed 15 characters";
           return false;
        } else {
           if(pw1.value == pw2.value){
               document.getElementById("message1").innerHTML=  "Passwords match!";
           }
        
           else {
               document.getElementById("message1").innerHTML=  "Passwords not match!";
           }
        }
    
    }
    
    confirm.onclick = function () {
        modal.style.display = "none";
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
      }
    
      // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
    }
    }
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  max-width: 40%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: $color5;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  
  background-color: $color1;
  color: white;
  text-align: center;
}

.modal-header h2 {
    color: $color1;
    text-align: center;
}

.modal-body {
    padding: 2px 16px;
  }

  .modal-body h4 {
      font-family: $font1;
      font-weight: normal;
      color: $color4;
      font-size: 20px;
  }

.modal-footer {
  padding: 2px 16px;
  color: white;
}

.modal-footer .btn {
    background-color: $color1;
    font-family: $font1;
    font-weight: normal;
    color: $color3;
}

.modal-footer .btn:hover{
    color: $color5;
}

CodePudding user response：

Have you tried to follow: https://stackoverflow.com/a/12990166/13309686

The code would look like this:



function verifyPassword(){
    var pw1 = (<HTMLInputElement>document.getElementById("password1")).value;
    var pw2 = (<HTMLInputElement>document.getElementById("password2")).value;
    
    // Get the modal
    var modal = <HTMLInputElement>document.getElementById("myModal");
    
    // Get the button that opens the modal
    var btn1 = <HTMLInputElement>document.getElementById("myBtn");
    
    var confirm = <HTMLInputElement>document.getElementById("confirm");
    
    // Get the <span> element that closes the modal
    var span = <HTMLInputElement>document.getElementsByClassName("close")[0];
    
    
    btn1.onclick = function () {
        
        modal.style.display = "block";
    
        //check empty password field
    
        if(pw1 == "") {
            document.getElementById("message1").innerHTML = "Please put your new password!";
            return false;
        }
    
        //minimum password length validation
        if(pw1.length < 8) {
            document.getElementById("message1").innerHTML = "Password length must be atleast 8 characters";
            return false;
        }
    
        //maximum length of password validation
        if(pw1.length > 15) {
           document.getElementById("message1").innerHTML = "Password length must not exceed 15 characters";
           return false;
        } else {
           if(pw1 == pw2){
               document.getElementById("message1").innerHTML=  "Passwords match!";
           }
        
           else {
               document.getElementById("message1").innerHTML=  "Passwords not match!";
           }
        }
    
    }
    
    confirm.onclick = function () {
        modal.style.display = "none";
    }
    
    // When the user clicks on <span> (x), close the modal
    span.onclick = function() {
        modal.style.display = "none";
      }
    
      // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
          modal.style.display = "none";
    }
    }
}

CodePudding user response：

It looks like DOM typing declarations are missing on your Typescript project. Could you also post your tsconfig.json?

You might need to include dom into your tsconfig.json file if that's not present.

"lib": ["dom"]