Trying to reuse a button using addEventListener using JavaScript
Question
I am trying to (re)set a button so my JavaScript can listen for it. The button starts out in the HTML code with an id = "actionButton" and the text 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). Being a noob at JavaScript, there is something I am not setting to reactivate that CONFIRM button. 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 answers
solution1
1 ACCPTED 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.
Which means your input elements are removed from the 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?"
solution2
0 2021-05-12 17:30:41
I suggets use only one listener, and there manage the actions, 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. Then when you cange the text of the button, change the actionType too. ej
document.getElementById('buttonId').innerHTML('CONFIRM');
actionType = 'CONFIRM';
So now, when the user clicks the button the action of actionType var will be executed. Hope help you PS. I dont speak english very well.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.