[英]console out checked radio buttons
我試圖用 JS 來控制一個單選按鈕,以便查看選中按鈕的值。 Js 似乎沒有語法錯誤,但它返回未定義:
這是 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>
非常感謝!
由於您想在單擊按鈕時檢查值/將其記錄到控制台上,因此請確保在 EventListener 內部使用 if-else 語句,而不是在 function 外部使用。 如果按照自己的方式編寫 if-else-statement,它將在頁面第一次加載時執行。
要打印所選會議的當前值,請將 JavaScript 代碼更改為此。 我修改了您提供的代碼。
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}`);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.