提交按鈕在我的代碼中無法正常工作

Question

下面我有一個帶有字段的表格。 我嘗試使用 JavaScript 打印從字段輸入的數據，我可以在 div 中使用 id result獲得結果，但是當我在表單中添加相同的 div 時，由於某種原因，從該字段輸入的結果沒有出現，我不明白. 我在這里錯過了什么嗎？

ps 我想保存在表單中輸入的數據，因為我想打印它

編輯：我嘗試了下面的代碼並沒有解決問題，因為大多數關於 JS 頁面刷新的答案

 userNameInput = function(event) { event.preventDefault(); event.stopPropagation(); var AmountPaid = document.getElementById('AmountPaid').value; var threeMonthGoal = document.getElementById('threeMonthGoal').value; var result = document.getElementById('result'); if (AmountPaid.length < 3) { result.textContent = 'Name must contain at least 3 characters'; //alert('Username must contain at least 3 characters'); } else { result.textContent = AmountPaid } } submitButton.addEventListener('click', userNameInput, false);

 <label>المبلغ المدفوع</label> <input id="AmountPaid" type="text"></input> <label>3 Month Goal</label> <input id="threeMonthGoal" type="text"></input> <button id="submitButton" type="submit">Print Name</button> <p id='result'></p> //here it appears </div> <div class="container"> <div id="printMe" class="row" style="padding: 15px; font-family: 'Cairo', sans-serif !important; "> <div> <div> <div class="row bodyPrint" style="box-shadow: #4b4746 0px 0px 0px 1000px inset !important"> <div class="col" style=" position: relative; margin-top: 3rem !important; right: -7px;"> <h6 style="color:white;"> 0780 553 1245</h6> <h6 style="color:white;">0780 456 3215 </h6> </div> <div class="col mt-2"> <img src="newLOgo-white.png" alt="Company logo" style=" margin-bottom: 15px; max-width: 296px "></div> <div class="col " style="position: relative; margin-top: 3rem!important; left: 135px;"> <h6 style="color:white;"> شركة فانتاج العقارية للبيع والبناء</h6> <h6 style="color:white;">Vantage Real Estate </h6> </div> </div> </div> <br> <div class="table-responsive" style="overflow-x: clip !important; padding: 25px;"> <div class="row" style="position: relative; margin-top: -38px; margin-bottom: -13px;"> <div class="col" sm="4 mt-2 "> <button style=" border: 1px solid lightgrey; border-radius: 0px; background: transparent; height: 39px;"> No: </button> </div> <div class="col" sm="4 mt-2 "> </div> <div class="col" sm="4 mt-2 "> <h4 style="color:white!important; box-shadow: #906248 0px 0px 0px 1000px inset !important; padding:5px; text-align:center;"> وصل قبض</h4> </div> <div class="col" sm="4 mt-2 "> </div> <div class="col" sm="4 mt-2 "> <button style=" font-weight: 900; border-radius: 0px; background: transparent; height: 39px; border: .5 px solid grey; position: relative; border: 1px solid lightgrey; left: 109px;"> $ : المبلغ </button> </div> <p id='result'></p> // ican't see result here </div> </div> <div class="row"> <b-button style=" border-radius: 0px; border-radius: 0px; background: transparent; height: 39px; position: relative; left: 15px; bottom: 7px; "> </b-button> </div> <div class="row"> <div> <p id='result'></p> </div> <div class="col-10"> <h5 style="border:.5px solid lightgray; padding:5px; text-align: end;"> مبلغ وقدره </h5> </div> <div class="col" style=" margin: inherit;"> <h5 style="margin-top: 9px;">: استلمــــت من السيــــد</h5> </div> </div> <h5 style=" text-align: end;">العـــــــــــــــــــــــــــــــــائد للشقـــــــــــــــــــــــــة المـــــــــــــــــبينة مواصــــــــــــــفاتها أدنـــــــــــــــاه و فـــــــــــــي التـــــــــــــــــــــــــــــــاريخ اعــــــــــــــــــلاه</h5> <div class="row"> <table class="table table-bordered"> <thead> <tr class="tr-class"> <th> &nbsp;الاتجاه</th> <th>المساحة</th> <th>رقم الشقة</th> <th>الطابق</th> <th> رقم البناية</th> </tr> </thead> <tbody> <tr> <td scope="row"></td> <td></td> <td></td> <td class="mt-3"> </td> <td></td> </tr> </tbody> </table> </div> </div> <div>

Answer 1

我建議您包裝在一個表單中並使用提交事件

您可以將 event.preventDefault() 移動到 if 以僅在 AmountPaid > 3 個字符時提交，但為什么不使用數字？

什么名字？ 請將問題更新為最小的可重現示例

 const result = document.getElementById('result'); const userNameInput = function(event) { event.preventDefault(); let AmountPaid = +document.getElementById('AmountPaid').value; let threeMonthGoal = document.getElementById('threeMonthGoal').value; result.textContent = +AmountPaid < 100 ? 'Amount must contain at least 3 characters' : AmountPaid } document.getElementById("goalForm").addEventListener('submit', userNameInput);

 <form id="goalForm"> <div> <label>المبلغ المدفوع</label> <input id="AmountPaid" type="text" /> <label>3 Month Goal</label> <input id="threeMonthGoal" type="text" /> <button id="submitButton" type="submit">Print Amount</button> <p id='result'></p> </div> </form>