在第一个实例上调用javascript类时，我能够获得表单数据值，但在后续实例上却不能

我知道我已经提交了相当长的代码，可以缩短它，但是我觉得最好我把它全部放上去，因为它是相关的

在过去的四天里，我一直在想什么地方可能出了问题，但都没有成功。 我甚至尝试在chrome开发工具中编辑代码，但没有成功。 我有四种类型的属性供用户在访问我们的网站时选择。 i、 一栋房子或一块土地。 如下所示

<div class="container">
<div class="house">            
<img src="../house_image.jfif" alt="house image" class="square-image" id="house-image">
<h3 class="list-type" id ="list-type-house">Looking for a house to let, buy or fullyFurnished ?</h3>
</div>
<div class="land">                    
<img src="../land_image.jpg" alt="land image" class="square-image">
<h3 class="list-type" id ="list-type-land">Looking for Land or a plot ?</h3>
</div>
<div class="hotel">                        
<img src="../hotel_image.jfif" alt="hotel image" class="square-image">
<h3 class="list-type" id ="list-type-hotel">Looking for  hotel ?</h3>
</div>
<div class="godown">                        
<img src="../godown_image.jpg" alt="godown image" class="square-image">
<h3 class="list-type" id ="list-type-godown">Looking for a commercial space or a down ?</h3>
</div>             
</div><!---container-->

/* the first modal pop up */

#modal_wrapper.overlay::before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0; 
background: rgba(0,0,0,0.7);
}

#modal_window {
display: none;
z-index: 200;
position: fixed;
left: 50%;
top: 50%;
width: 400px;
overflow: auto;
padding: 10px 20px;
background: #fff;
border: 5px solid #999;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#modal_wrapper.overlay #modal_window {
display: block;
}

#modal_feedback{
display: grid;
justify-content: center;
align-items: center;  
grid-auto-rows: 2.5em;  
font-size: medium;  
background-color:  rgb(235, 236, 238); 
color:  rgb(219, 76, 76);  
font-weight: normal;
justify-items: center;

}

/* .buy-let-furnished{
display: grid;
/* grid-template-columns: 20px auto; 
} */

.better-exp-p{
color: brown;
font-size: large;
font-weight: normal;
display: flex;
justify-content: center;


}

#expand{
color: rgb(85, 24, 24);
font-size: medium;
font-weight: small;
display: flex;
justify-content: center;
text-align: center;

}
.min-max-cost{
display: grid;
grid-auto-flow: column;
grid-auto-columns: repeat(auto-fill, 100px);
justify-items: center;
align-items: center;

}


.Bedrooms{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;
}
.complete-offplan{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;

}
.gated-slone-apart{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;

}
.buy-let-furnished{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;

}
/* second modal pop up */
#modal_wrapper_two.overlay_two::before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0; 
background: rgba(0,0,0,0.7);
}

#modal_window_two {
display: none;
z-index: 200;
position: fixed;
left: 50%;
top: 50%;
width: 400px;
overflow: auto;
padding: 10px 20px;
background: #fff;
border: 5px solid #999;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#modal_wrapper_two.overlay_two #modal_window_two {
display: block;
}


#modal_feedback_two{
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr;
align-items: center;  
grid-auto-rows: 2.5em;  
font-size: medium;  
background-color:  rgb(235, 236, 238); 
color:  rgb(219, 76, 76);  
font-weight: normal;
justify-items: start;

}

.area{
display: grid;

} 
.better-exp-p-two{
display: grid;
grid-column:span 2 ;
color: brown;
font-size: large;
font-weight: normal;
align-self:center;
justify-self: center;
}
#expand-two{
color: rgb(85, 24, 24);
font-size: medium;
font-weight: small;
display: grid;
grid-column:span 2 ;
align-self:center;
justify-self: center;
}

/* third modal pop up */
#modal_wrapper_three.overlay_three::before{
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0; 
background: rgba(0,0,0,0.7);
}

#modal_window_three {
display: none;
z-index: 200;
position: fixed;
left: 50%;
top: 50%;
width: 400px;
overflow: auto;
padding: 10px 20px;
background: #fff;
border: 5px solid #999;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#modal_wrapper_three.overlay_three #modal_window_three {
display: block;
}
#test{

display: none;
}

.modal-feedback-three-top{
display: grid;
justify-content: center;
grid-template-columns: auto ;
align-items: center;  
grid-auto-rows: 2.5em;  
font-size: medium;  
background-color:  rgb(235, 236, 238); 
color:  rgb(219, 76, 76);  
font-weight: normal;
justify-items: start;

}
.modal-feedback-three-top 
.selector{

max-width: 100px;

}

.modal-feedback-three-lower{
display: grid;
grid-template-columns: 1fr;
/* justify-content: center;
align-items: center; */

}

上面的App.init类初始化下面显示的名为modalOne的类，modalOne类运行名为listTypeHouse的方法，该方法在上打开一个模态弹出窗口。在整个页面上创建覆盖的模式弹出窗口由css控制，如下所示

<div class="container">
<div class="house">            
<img src="../house_image.jfif" alt="house image" class="square-image" id="house-image">
<h3 class="list-type" id ="list-type-house">Looking for a house to let, buy or fullyFurnished ?</h3>
</div>
<div class="land">                    
<img src="../land_image.jpg" alt="land image" class="square-image">
<h3 class="list-type" id ="list-type-land">Looking for Land or a plot ?</h3>
</div>
<div class="hotel">                        
<img src="../hotel_image.jfif" alt="hotel image" class="square-image">
<h3 class="list-type" id ="list-type-hotel">Looking for  hotel ?</h3>
</div>
<div class="godown">                        
<img src="../godown_image.jpg" alt="godown image" class="square-image">
<h3 class="list-type" id ="list-type-godown">Looking for a commercial space or a down ?</h3>
</div>             
</div><!---container-->

/* the first modal pop up */

#modal_wrapper.overlay::before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0; 
background: rgba(0,0,0,0.7);
}

#modal_window {
display: none;
z-index: 200;
position: fixed;
left: 50%;
top: 50%;
width: 400px;
overflow: auto;
padding: 10px 20px;
background: #fff;
border: 5px solid #999;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#modal_wrapper.overlay #modal_window {
display: block;
}

#modal_feedback{
display: grid;
justify-content: center;
align-items: center;  
grid-auto-rows: 2.5em;  
font-size: medium;  
background-color:  rgb(235, 236, 238); 
color:  rgb(219, 76, 76);  
font-weight: normal;
justify-items: center;

}

/* .buy-let-furnished{
display: grid;
/* grid-template-columns: 20px auto; 
} */

.better-exp-p{
color: brown;
font-size: large;
font-weight: normal;
display: flex;
justify-content: center;


}

#expand{
color: rgb(85, 24, 24);
font-size: medium;
font-weight: small;
display: flex;
justify-content: center;
text-align: center;

}
.min-max-cost{
display: grid;
grid-auto-flow: column;
grid-auto-columns: repeat(auto-fill, 100px);
justify-items: center;
align-items: center;

}


.Bedrooms{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;
}
.complete-offplan{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;

}
.gated-slone-apart{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;

}
.buy-let-furnished{
display: grid;
grid-auto-flow: column;
justify-items: center;
align-items: center;

}
/* second modal pop up */
#modal_wrapper_two.overlay_two::before {
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0; 
background: rgba(0,0,0,0.7);
}

#modal_window_two {
display: none;
z-index: 200;
position: fixed;
left: 50%;
top: 50%;
width: 400px;
overflow: auto;
padding: 10px 20px;
background: #fff;
border: 5px solid #999;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#modal_wrapper_two.overlay_two #modal_window_two {
display: block;
}


#modal_feedback_two{
display: grid;
justify-content: center;
grid-template-columns: 1fr 1fr;
align-items: center;  
grid-auto-rows: 2.5em;  
font-size: medium;  
background-color:  rgb(235, 236, 238); 
color:  rgb(219, 76, 76);  
font-weight: normal;
justify-items: start;

}

.area{
display: grid;

} 
.better-exp-p-two{
display: grid;
grid-column:span 2 ;
color: brown;
font-size: large;
font-weight: normal;
align-self:center;
justify-self: center;
}
#expand-two{
color: rgb(85, 24, 24);
font-size: medium;
font-weight: small;
display: grid;
grid-column:span 2 ;
align-self:center;
justify-self: center;
}

/* third modal pop up */
#modal_wrapper_three.overlay_three::before{
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 100;
top: 0;
left: 0; 
background: rgba(0,0,0,0.7);
}

#modal_window_three {
display: none;
z-index: 200;
position: fixed;
left: 50%;
top: 50%;
width: 400px;
overflow: auto;
padding: 10px 20px;
background: #fff;
border: 5px solid #999;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

#modal_wrapper_three.overlay_three #modal_window_three {
display: block;
}
#test{

display: none;
}

.modal-feedback-three-top{
display: grid;
justify-content: center;
grid-template-columns: auto ;
align-items: center;  
grid-auto-rows: 2.5em;  
font-size: medium;  
background-color:  rgb(235, 236, 238); 
color:  rgb(219, 76, 76);  
font-weight: normal;
justify-items: start;

}
.modal-feedback-three-top 
.selector{

max-width: 100px;

}

.modal-feedback-three-lower{
display: grid;
grid-template-columns: 1fr;
/* justify-content: center;
align-items: center; */

}

让我从类实例开始

class ModalPopUp{
constructor(modal_wrapper,modal_window,overlay,modal_close,expand,submit,formId){
this.modalWrapper = document.getElementById(modal_wrapper);
this.modalWindow  = document.getElementById(modal_window);
this.overlay = overlay;
this.modalClose = modal_close;
this.expand = expand;
this.clicK = 'click';
this.keyDown= 'keydown';
this.submit = submit;
this.formId = formId;
document.getElementById(this.modalClose).addEventListener(this.clicK, this.closeModal.bind(this, 
this.modalWrapper));
document.getElementById(this.expand).addEventListener(this.clicK, expandModalTwo.bind(this));                               
document.getElementById(this.formId).addEventListener(this.submit, this.validate);                
document.addEventListener(this.clicK, this.clickHandler.bind(this)); 
document.addEventListener(this.keyDown, this.keyHandler);
}

listTypeHouse(e){
this.modalWrapper.className = this.overlay;                         
this.modalWindow.style.marginTop = (-this.modalWindow.offsetHeight)/2 + "px";
this.modalWindow.style.marginLeft = (-this.modalWindow.offsetWidth)/2 + "px";

};

closeModal(th)
{
this.modalWrapper.className = "";
};

clickHandler(e) {                           
console.log(e);                             
if(e.target.tagName == "DIV") {                                     
if(e.target.id != this.modal_window){
modal_wrapper.className = "";                       

}
e.preventDefault();  
}                    
};

keyHandler (e) {                 
if(e.keyCode == 27) {
modal_wrapper.className = "";
e.preventDefault();
}
}

validate(e){                
e.preventDefault();                                                                           
const formData = new FormData(this)        
for (const formDat of formData) {
console.log(formDat);                        

}
}
}



function expandModalTwo(e){
e.preventDefault();
console.log('expand model'); 
e.stopPropagation();
if(this.overlay == 'overlay'){ 
this.modalWrapper.className = "";           
let modalTwo = new 
ModalPopUp('modal_wrapper_two','modal_window_two','overlay_two','modal_close_two','expand- 
two','submit-two','modal_feedback_two');
modalTwo.listTypeHouse();
}else if(this.overlay == 'overlay_two'){            
this.modalWrapper.className = "";
let modalThree = new 
ModalPopUp('modal_wrapper_three','modal_window_three','overlay_three','modal_close_three','expand- 
three','submit-three','modal_feedback_three');
modalThree.listTypeHouse();
} 
}

class App {
static init(){
let modalOne = new ModalPopUp('modal_wrapper','modal_window','overlay','modal_close','expand','submit','modal_feedback');
modalOne.listTypeHouse();
}
}

由modalpopp打开的HTML表单如下所示。我删除了一些输入表单，使其更短

<div id="modal_wrapper" class="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p class="better-exp-p" id="better-exp-p">Select House Type:</p>
<form id="modal_feedback" method="POST" action="<?php echo url_for('/landing_page.php') ;?>">
<span class="buy-let-furnished">
<label for="buy" class="buy-let-furnished-label">Buy</label>
<input class="selector" id="buy" name="buy-let-furnished" type="radio" value="1">
<label for="let" class="buy-let-furnished-label">Let</label>
<input class="selector" id="let" name="buy-let-furnished" type="radio" value="2">
<label for="let" class="buy-let-furnished-label">Fully Furnished</label>
<input class="selector" id="furnished" name="buy-let-furnished" type="radio" value="3">
</span>
<button type="submit" class="better-exp-p submit" id="submit"  name="feedbackForm" value="submit">Search</button>           
<input type="button" id="expand" name="feedback-expand-Form" value="More Detailed Search">
</form>

</div> <!-- #modal_window -->
</div> <!-- #modal_wrapper -->


<!-- modal two ----------------------------------------->
<div id="modal_wrapper_two">
<div id="modal_window_two">
<div style="text-align: right;"><a id="modal_close_two" href="#">close <b>X</b></a></div>
<p class="better-exp-p-two" id="better-exp-p-two">Select more options here:</p>
<form id="modal_feedback_two" method="POST" action="<?php echo url_for('/landing_page.php') ;?>">
<span>
<label for="swimming-Pool" class="check-boxes">Swimming Pool</label>
<input class="selector check " id="swimming-Pool" name="swimming-Pool" type="checkbox" value="1">
</span>                    
<span>
<label for="Fiber-Cable" class="check-boxes">Fibre cable</label>
<input class="selector check" id="Fiber-Cable" name="Fiber-Cable" type="checkbox"  value="1">
</span>                    

<button class="better-exp-p-two submit" id="submit-two" type="submit" name="feedbackForm-two" 
value="Search"> Search </button>            
<input type="button" id="expand-two" name="feedback-expand-Form-two"  value="Narrow Down your search 
further">

</form>
</div> <!-- #modal_window_two -->
</div> <!-- #modal_wrapper_two -->

<!-- modal three ----------------------------------------->
<div id="modal_wrapper_three">
<div id="modal_window_three">
<div style="text-align: right;"><a id="modal_close_three" href="#">close <b>X</b></a></div>
<h3 class="better-exp-p-three" id="better-exp-p-three">Select more options here:</h3>
<form id="modal_feedback_three" method="POST" action="#" accept-charset="UTF-8">
<section class="modal-feedback-three-top">
<span>
<label for="bathrooms" class="check-boxes">Bath Rooms</label>
<input class="selector" id="bathrooms" name="bathrooms" type="text" value="">
</span>                    
<span>
<label for="bed-with-bath" class="text-boxes">Bedrooms with Bathrooms</label>
<input class="selector" id="bedwithbath" name="bedwithbath" type="text"  value="">
</span>

</section>
<section class="modal-feedback-three-search">

<button id="submit-three" type="submit" name="feedback-expand-Form-three" 
value="submit">submit</button>
<input type="hidden" id="expand-three" name="feedback-expand-Form-three"  value=""><!-- hidden to 
allow use of class-->
</section>
</form>
</div> <!-- #modal_window_three -->
</div> <!-- #modal_wrapper_three -->

代码运行良好，当用户单击id为submit的submit按钮时，我得到表单数据值。当用户单击展开按钮显示第二个模式弹出表单时，当我尝试使用id submit two提交表单时，表单突然消失，好像它已经提交了一样，并且我没有获得表单数据值。 同样的问题也发生在模态三中，我没有得到形式值。 我制作了三个可选的弹出表单，这样用户可以在他填写的任何阶段提交表单，就像这三个表单一样，此外，我不希望有一个非常大的输入表单，这会让用户感觉我要求的信息太多

代码可以在这里找到

---

请将此代码添加到（或类似代码），以便我们更容易了解其工作原理并为您提供帮助。你能做到吗？是的，我会的。代码在这里是可用的。在这样的代码中很难找到错误。在这种情况下我可以推荐什么。如果您有机会重构这段代码（甚至重写其中的某些部分），那就太好了。我真的很想帮助你，但是这段代码看起来太过复杂了。如果你有机会简化，请去做。也许使用任何外部的模态库或者以不同的方式简化它是一个好主意。我不知道你的项目的细节，但如果你能做到，就用最佳实践来做。我相信这会有帮助的。对不起，如果我不帮忙的话。我真的很想这么做。