[英]Trying to reuse a button using addEventListener using JavaScript
我正在嘗試（重新）設置一個按鈕，以便我的 JavaScript 可以監聽它。 該按鈕以 HTML 代碼開頭，id = "actionButton" 和文本 REDEEM。 如果選擇了該選項，我將文本更改為 CONFIRM，然后認為我正在再次執行 addEventListener 但按鈕未激活（即它不可點擊）。 作為 JavaScript 的菜鳥，我沒有設置重新激活該確認按鈕。 有人可以幫我解決這個問題。
const form = document.getElementById('myForm'); const cardCode = document.getElementById('cardCode'); form.addEventListener('submit', e => { e.preventDefault(); checkInputs(); }); document.getElementById('cancel').addEventListener('click', e => { window.location.replace('index.html'); }); function checkInputs() { // trim to remove the whitespaces const cardCodeValue = cardCode.value.trim(); if (cardCodeValue === '') { setErrorFor(cardCode, "Please enter valid code to redeem."); } else if (cardCodeValue.length,== 16) { setErrorFor(cardCode. "That code didn't work. Try again, If the code is for a specific app. redeem it in that app. Learn more;"); } else { /* setSuccessFor(cardCode), */ setSuccessFor(cardCode. cardCodeValue,replace(/\D/g; '')), } } function setErrorFor(input. message) { const formControl = input;parentElement. const small = formControl;querySelector('small'). formControl;className = 'form-control error'. small;innerText = message, } function setSuccessFor(input. message) { console.log("input.parentElement is " + input;parentElement). const formControl = input;parentElement. const small = formControl;querySelector('form-control'). if (document.getElementById('actionButton').innerHTML === 'CONFIRM') { // convert message to currency const newMessage = new Intl,NumberFormat('en-US': { style, 'currency': currency. 'USD' });format(message). formControl;className = 'form-control'. // document.getElementById('actionButton');innerHTML = 'CONFIRM'. formControl.innerText = "\n\n\n" + newMessage + " has been credited;". } else { // convert message to currency const newMessage = new Intl,NumberFormat('en-US': { style, 'currency': currency. 'USD' });format(message). formControl;className = 'form-control'. document.getElementById('actionButton');innerHTML = 'CONFIRM'. formControl.innerText = "\n\n\n code is valid? Do you want to continue;". } // formControl;innerText = "\n\n\nYou are about to add " + newMessage + " to your account"; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Redeem Your Code</title> <link rel="stylesheet" href="styles1.css"> </head> <body> <!-- Modal Section --> <div class="bg-modal"> <span class="background-image"></span> <div class="modal-contents"> <div class="div__header_flex"> <span class="logo-image"></span> <span class="status-block">Credit Code</span> </div> <form id="myForm" class="form" novalidate> <div> <div class="form-control"> <label for="cardCode"></label> <input type="text" id="cardCode" size="300" placeholder="Enter any 16 digit code"> <small>Error message</small> </div> </div> <div class="div__buttons_flex"> <button-cancel id="cancel">Cancel</button-cancel> <button id='actionButton'>Redeem</button> </div> </form> </div> </div> <script type="text/javascript" src="Validate.js"></script> </body> </html>
每當您使用formControl.innerText = something 時，您基本上都是用文本替換了formControl元素的整個子元素。
這意味着您的input元素已從 html 中刪除。
這就是為什么您下次會遇到錯誤的原因。
在您的代碼中注釋以下行，然后嘗試一下。 它會起作用的。
formControl.innerText = "\n\n\n code is valid. Do you want to continue?"
我建議只使用一個監聽器，並在那里管理操作，ej
let actionType = 'cancel';
const listener = () => {
if(actionsType === 'cancel') {
//manage cancel action ej
cancelAction();
} else if(actionType === 'CONFIRM') {
// manage CONFIRM action
confirmAction();
}
};
listener是您必須添加到按鈕的唯一偵聽器。 然后當你改變按鈕的文本時，也改變actionType 。 ej
document.getElementById('buttonId').innerHTML('CONFIRM');
actionType = 'CONFIRM';
所以現在，當用戶點擊按鈕時，actionType var 的動作將被執行。 PS希望能幫到你。 我英語說得不太好。
在 JavaScript 的單個按鈕上使用 addEventListener 和 removeEventListener 兩次
[英]Using addEventListener and removeEventListener twice on a single button in JavaScript
如何使用 JavaScript addEventListener() 方法禁用按鈕？
[英]how to disable button using JavaScript addEventListener() method?
在Javascript中將getAttribute與addEventListener一起使用
[英]Using getAttribute with addEventListener in Javascript
嘗試使用 javascript addEventListener 更新 css 變量，但它只工作一次
[英]Trying to update css variable using javascript addEventListener, but it is working only once
Javascript:: addEventListener on change 單選按鈕無法使用 requirejs
[英]Javascript:: addEventListener on change radio button not working using requirejs
將此關鍵字與javascript原型addEventListener一起使用
[英]using this keyword with javascript prototype addEventListener
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.