如何将无线电按钮的选定值设置为变量

Question

我有一个速度打字游戏。我也有一个带有3个广播按钮的表格，我想根据所选的广播按钮选择游戏级别。我该怎么做？

我在此处尝试了document.querySelector('input[name="genderS"]:checked').value;此代码。但是它没有起作用

const levels = {
  easy: 5,
  medium: 3,
  hard: 1
};

let easyChecked = document.querySelector('#radio-easy').checked;
let mediumChecked = document.querySelector('#radio-medium').checked;
let hardChecked = document.querySelector('#radio-hard').checked;
var currentLevel = levels.medium;
let time = currentLevel;
let score = 0;
let isPlaying;
// To change level
function isChecked() {
}

我希望CurrentLevel变量将根据无线电按钮更改。

Answer 1

简单地，以这样的名称制作您的广播按钮html代码：

<input type="radio" name="level" value="easy"> Easy<br>
<input type="radio" name="level" value="medium"> Medium<br>
<input type="radio" name="level" value="hard"> Hard<br>

然后通过foreach loop

将所有广播按钮绑定到change事件上

let selectedLevel;
const levelButtons = document.querySelectorAll('input[name="level"]');
Array.prototype.forEach.call(levelButtons, function(btn) {
  btn.addEventListener('change', function(){
    selectedLevel = this.value;
    console.log(selectedLevel);
  });
});

Answer 2

类似的东西：

 var currentLevel = null;  // not set yet
 let easyChecked = document.querySelector('#radio-easy');
 let mediumChecked = document.querySelector('#radio-medium');
 let hardChecked = document.querySelector('#radio-hard');
 easyChecked.addEventListener("change", function() {
   currentLevel = this.checked; // update currentLevel on change
 }); 
 mediumChecked.addEventListener("change", function() {
   currentLevel = this.checked; // update currentLevel on change
 }); 
 hardChecked.addEventListener("change", function() {
   hardChecked = this.checked; // update currentLevel on change
 }); 

现在 CurrentLevel 将在广播按钮更改时更新。