Typescript 错误“类型‘HTMLElement’上不存在属性‘值’”、“‘元素’类型上不存在属性‘onclick’”

Question

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" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <img src="/images/logo.png" alt="SAMPLE" width="120" class = "mx-auto">
      <span class="close">&times;</span>
    </div>
    
    <div class="modal-body">
      <h4 class = "text-center"><span id = "message1"></span></h4>
    </div>
    <div class="modal-footer mx-auto">
      <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;
}

Answer 1

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";
    }
    }
}

Answer 2

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"]