尝试使用使用 JavaScript 的 addEventListener 重用按钮
[英]Trying to reuse a button using addEventListener using JavaScript
问题描述
I am trying to (re)set a button so my JavaScript can listen for it.
我正在尝试（重新）设置一个按钮，以便我的 JavaScript 可以监听它。 The button starts out in the HTML code with an id = "actionButton" and the text REDEEM.该按钮以 HTML 代码开头，id = "actionButton" 和文本 REDEEM。 If that is selected, I change the text to CONFIRM and then think I am performing an addEventListener again but the button is not active (ie it's not clickable).如果选择了该选项，我将文本更改为 CONFIRM，然后认为我正在再次执行 addEventListener 但按钮未激活（即它不可点击）。 Being a noob at JavaScript, there is something I am not setting to reactivate that CONFIRM button.作为 JavaScript 的菜鸟，我没有设置重新激活该确认按钮。 Can someone please help me with this.有人可以帮我解决这个问题。
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>
2 个解决方案
解决方案1
1 已采纳 2021-05-12 17:32:53
Whenever you use formControl.innerText = something, you are basically replacing the entire children of the formControl element with the text.每当您使用formControl.innerText = something 时，您基本上都是用文本替换了formControl元素的整个子元素。
Which means your input elements are removed from the html.这意味着您的input元素已从 html 中删除。
This is why you are getting an error the next time.这就是为什么您下次会遇到错误的原因。
Comment the below line in your code and then try it out.在您的代码中注释以下行，然后尝试一下。 It will work.它会起作用的。
formControl.innerText = "\n\n\n code is valid. Do you want to continue?"
解决方案2
0 2021-05-12 17:30:41
I suggets use only one listener, and there manage the actions, ej我建议只使用一个监听器，并在那里管理操作，ej
let actionType = 'cancel';
const listener = () => {
if(actionsType === 'cancel') {
//manage cancel action ej
cancelAction();
} else if(actionType === 'CONFIRM') {
// manage CONFIRM action
confirmAction();
}
};
listener is the only listener you have to add to the button. listener是您必须添加到按钮的唯一侦听器。 Then when you cange the text of the button, change the actionType too.然后当你改变按钮的文本时，也改变actionType 。 ej ej
document.getElementById('buttonId').innerHTML('CONFIRM');
actionType = 'CONFIRM';
So now, when the user clicks the button the action of actionType var will be executed.所以现在，当用户点击按钮时，actionType var 的动作将被执行。 Hope help you PS. PS希望能帮到你。 I dont speak english very well.我英语说得不太好。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.