javascript - Typescript 오류 "속성 'value'가 'HTMLElement' 유형에 존재하지 않습니다", "속성 'onclick'이 'Element' 유형에 존재하지 않습니다"
저는 TypeScript 파일에 넣으려고 하는데, 그러면 화면에 "Property 'value' does not exist on type 'HTMLElement'", "Duplicate function implementation." 그리고 "Property 'onclick' does not exist on type 'Element'"와 같은 컴파일 오류가 나타납니다. 하지만 JavaScript 파일에서 실행해 보니 잘 작동합니다. 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">×</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 파일
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;
}
답변 #1
당신의 TypeScript 프로젝트에 DOM 타이핑 선언이 없는 것 같습니다. tsconfig.json 파일도 올려주실 수 있나요?
만약 존재하지 않는다면 tsconfig.json 파일에 dom을 포함시켜야 할 수도 있습니다.
"lib": ["dom"]
답변 #2
다음을 시도해 보셨나요: https://stackoverflow.com/a/12990166/13309686
코드는 이렇게 보일 것입니다:
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";
}
}
}