尝试使用使用 JavaScript 的 addEventListener 重用按钮

Question

我正在尝试（重新）设置一个按钮，以便我的 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>

Answer 1

每当您使用formControl.innerText = something 时，您基本上都是用文本替换了formControl元素的整个子元素。

这意味着您的input元素已从 html 中删除。

这就是为什么您下次会遇到错误的原因。

在您的代码中注释以下行，然后尝试一下。 它会起作用的。
formControl.innerText = "\n\n\n code is valid. Do you want to continue?"

Answer 2

我建议只使用一个监听器，并在那里管理操作，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 重用按钮

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-05-12 17:32:53

解决方案2
0 2021-05-12 17:30:41

尝试使用使用 JavaScript 的 addEventListener 重用按钮

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-05-12 17:32:53

解决方案2 0 2021-05-12 17:30:41

解决方案1
1 已采纳 2021-05-12 17:32:53

解决方案2
0 2021-05-12 17:30:41