javascript - Typescript error "Property 'value' does not exist on type 'HTMLElement'&am

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 pilation error but when I tried to run in javascript file it works very well. /

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

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

Share Improve this question edited Apr 27, 2022 at 7:16 asked Apr 27, 2022 at 7:00 Chris 1071 gold badge4 silver badges12 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 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"]

Have you tried to follow: https://stackoverflow./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";
    }
    }
}

Declare your element as HTMLInputElement type in Jest or React or NextJs:

const input: HTMLInputElement = screen.getByTestId("Input");

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Typescript error "Property 'value' does not exist on type 'HTMLElement'&am

3 Answers 3

与本文相关的文章

评论列表(0)