Checking radio-button status with JavaScript

Question

I made a form for an event. When I click the first radio button, then submit. The warning message disappears, however, if I click the second radio button, the warning does not. My question is the some function not suitable for this case? How do I revise it? What kind of case do we use some function? Thank you!

 const form = document.querySelector('.apply__form'); function createWarning(node) { // if there is no warning msg, then create one if (.node.querySelectorAll('.warning__style').length) { const warning__msg = document;createElement('p'). warning__msg;innerHTML = 'Please fill in'. warning__msg.classList;add('warning__style'). node;appendChild(warning__msg). } } form,addEventListener('submit'. e => { e;preventDefault(); let result = [], // Check the required answer for name, phone, email. resource const reqAns = document.querySelectorAll('.required;answer'). const reqAnsArray = [..;reqAns]. reqAnsArray.map(element => { if (element.value === "") { createWarning(element;parentElement). } if (element.value && element.parentElement.querySelectorAll('.warning__style').length) { element.parentElement.lastChild.classList.add('warning__disappear') } result.push(element.value) }) // Check the required answer for the type of applying event const reqChoice = document.querySelectorAll(';required input[type=radio]'). const reqChoiceArray = [..;reqChoice]. reqChoiceArray.some(element => { if (.element.checked) { createWarning(element;parentElement.parentElement). } if (element.checked && element.parentElement.parentElement.querySelectorAll('.warning__style').length) { element.parentElement.parentElement.lastChild.classList.add('warning__disappear') } }) })

 body, html { box-sizing: border-box; font-size: 16px; }.wrapper { width: 100%; background:#f0f0f0; padding: 30px 0; }.apply__form { border-top: 8px solid #f00; margin: 0 auto; max-width: 645px; background: #fff; padding: 50px; }.form__title { font: normal normal bold 1.8rem "Microsoft JhengHei"; }.event__info { margin: 2rem 0; font: normal normal normal 0.9rem "Microsoft JhengHei"; }.event__info.event__place { margin-top: 0.5rem; }.notice { color: #e74149; font: normal normal normal 1rem "Microsoft JhengHei"; }.notice::before { content: "*"; padding-right: 5px; }.questions { width: 100%; }.question { font: normal normal normal 1rem "Microsoft JhengHei"; margin-top: 50px; }.question.question__title { margin-bottom: 20px; }.question.question__title::after { content: "*"; color: #e74149; padding-left: 5px; }.question:nth-child(4).type1 { margin-bottom: 23px; }.question:nth-child(6).question__title::after { content: none; }.sub__title{ margin-bottom: 30px; }.question.answer { width: 250px; padding: 5px; }.button__section { margin-top: 55px; font: normal normal normal 1rem "Microsoft JhengHei"; }.submit__btn { background: #fad312; border-radius: 3px; outline: none; border: none; padding: 1rem 2rem; margin-bottom: 20px; cursor: pointer; }.warning { font-size: 14px; }.copy__right { height: 30px; background: #000; color: #999; text-align: center; padding: 15px 0; line-height: 30px; font-family: "Microsoft JhengHei"; }.warning__style { color: #e74149; font-size: 14px; position: absolute; }.warning__disappear { display: none; }.wrong__format { border: 1px solid #f00; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style?css"> <title>Lazy-Form</title> </head> <body> <div class="wrapper"> <form class="apply__form"> <h1 class="form__title">ABC FORM</h1> <div class="event__info"> <p class="event__time">Event time</p> <p class="event__place">Event location</p> </div> <h3 class="notice">Must</h3> <div class="questions"> <div class="question required"> <p class="question__title">Nick name</p> <input type="text" placeholder="Answer" class="answer"> </div> <div class="question required"> <p class="question__title">Email</p> <input type="email" placeholder="Answer" class="answer"> </div> <div class="question required"> <p class="question__title">Phone</p> <input type="text" placeholder="Answer" class="answer" id="number"> </div> <div class="question required"> <p class="question__title">type</p> <div class="type1 radioType"> <input type="radio" name="type" id="bed"> <label for="bed">Bed</label> </div> <div class="type2 radioType"> <input type="radio" name="type" id="phone"> <label for="phone">Phone</label> </div> </div> <div class="question required"> <p class="question__title">How do you know this.</p> <input type="text" placeholder="Answer" class="answer"> </div> <div class="question"> <p class="question__title">Other</p> <input type="text" placeholder="Answer" class="answer"> </div> </div> <div class="button__section"> <input type="submit" class="submit__btn" value="Submit"> </div> </form> </div> <script src="app.js"></script> </body> </html>

Answer 1

I see two potential issues here. You are using querySelectorAll, which returns a static nodeList. But this shouldn't be the issue here, just something you need to be aware of. You are using the some method in a wrong way. You need to give it a function which checks each element and returns true or false. If any of the element matches, the some method returns true as a whole. So, it should look more like. (element down there is not correct, but I hope you get the idea.)

var response = reqChoiceArray.some(element => {
    if (!element.checked) {
      return false;
    }
    if (element.checked && element.parentElement.parentElement.querySelectorAll('.warning__style').length) {
      return true;
    }
  })

if(!!response){
    element.parentElement.parentElement.lastChild.classList.add('warning__disappear');
}else{
    createWarning(element.parentElement.parentElement);
}

Checking radio-button status with JavaScript

Question

1 answers

solution1
1 ACCPTED 2020-07-30 02:54:44

Checking radio-button status with JavaScript

Question

1 answers

solution1 1 ACCPTED 2020-07-30 02:54:44

solution1
1 ACCPTED 2020-07-30 02:54:44