console out checked radio buttons

Question

Im trying to console out a radio button with JS in order to see the value of the checked button. the Js seems to be without syntax error, but it returns undefined:

this is the HTML:

 const firstName = document.querySelector('#FirstName'); const lastName = document.querySelector('#LastName'); const email = document.querySelector('#email'); const comments = document.querySelector('#comments'); let meeting1 = document.querySelector('#meetingtype1'); let meeting2 = document.querySelector('#meetingtype2'); let meeting3 = document.querySelector('#meetingtype3'); let meeting4 = document.querySelector('#meetingtype4'); let meeting; if (meeting1.checked) { meeting = meeting1.value; console.log(meeting = "1"); } else if (meeting2.checked) { meeting = meeting2.value; console.log(meeting = "2") } else if (meeting3.checked) { meeting = meeting3.value; console.log(meeting = "3") } else if (meeting4.checked) { meeting = meeting4.value; console.log(meeting = "4") } const submitform = document.querySelector('#submitform'); submitform.addEventListener('click', function() { console.log(` Name: ${firstName.value}, Last Name: ${lastName.value}, Email: ${email.value}, Comment: ${comments.value} Type of meeting: ${meeting}`); });

 <fieldset> <legend>Would you like to meet for?</legend> <label><input type="radio" id="meetingtype1" name=meetingtype value="coffee" > A coffee</label> <label><input type="radio" id="meetingtype2" name=meetingtype value="zoom"> A zoom meeting</label> <label><input type="radio" id="meetingtype3" name=meetingtype value="drive"> A drive to Eilat</label> <label><input type="radio" id="meetingtype4" name=meetingtype value="chef"> A chef meal</label> <button id="submitform" type="submit">Submit</button>

thank you very much!

Answer 1

Since you want to check the value/log it onto your console when you are going to click onto your button, make sure to use your if-else-statement inside of the EventListener and not outside of the function. If you write the if-else-statement in your way, it will be executed when the page loads the first time.

To print out your current value of the selected meeting change your JavaScript Code to this. I modified your provided code.

let meeting1 = document.querySelector('#meetingtype1');
let meeting2 = document.querySelector('#meetingtype2');
let meeting3 = document.querySelector('#meetingtype3');
let meeting4 = document.querySelector('#meetingtype4');
let meeting;

const submitform = document.querySelector('#submitform');

submitform.addEventListener('click', function () {
    if (meeting1.checked){
        meeting = meeting1.value;
    } else if (meeting2.checked){
        meeting = meeting2.value;
    } else if (meeting3.checked){
        meeting = meeting3.value;
    } else if (meeting4.checked){
        meeting = meeting4.value;
    }
    console.log(`Type of meeting: ${meeting}`);
});