javascript JS无线电按钮打开而不是值

lrpiutwd  于 2022-12-02  发布在  Java
关注(0)|答案(1)|浏览(177)
let apples = ['Fuji','Gala','Braeburn'];
const basketDiv = document.getElementById('basket');

for (const apple of apples) {
  let radiobtn= document.createElement('input');
  radiobtn.setAttribute('type', 'radio');
  let radiolabel = document.createElement('label');
  radiolabel.innerHTML= apple;
  radiobtn.name= 'apples';
  radiobtn.id= apple;
  basketDiv.append(radiobtn);
  basketDiv.append(radiolabel);
  radiobtn.addEventListener('change',message);
}


function message(e) {
  let getselected = getSelectedValue = document.querySelector('input[name="apples"]:checked'); 
    if(getselected != null) { 
                document.getElementById("show").innerHTML= getselected.value + "  is selected"; 
            } 
            else { 
                document.getElementById("show").innerHTML = "*You have not selected  "; 
            } 
  }

我应该得到苹果的价值观,但我不能它给我开,我不知道什么是开,我需要知道我的错误是什么

2lpgd968

2lpgd9681#

看起来你的代码中有几个错误。在message()函数中,你试图使用getselected.value来获取选中单选按钮的值。但是,单选按钮的value属性只有在你显式地给予它赋值时才能被设置。因为你没有给任何单选按钮赋值,所以getselected.value总是未定义的。
要解决此问题,可以使用setAttribute()方法将每个单选按钮的value属性设置为相应的apple名称。然后,在message()函数中,可以使用所选单选按钮的id属性而不是其value属性来获取所选apple的名称。
以下是修复代码的方法:

let apples = ['Fuji','Gala','Braeburn'];
const basketDiv = document.getElementById('basket');

for (const apple of apples) {
  let radiobtn= document.createElement('input');
  radiobtn.setAttribute('type', 'radio');
  let radiolabel = document.createElement('label');
  radiolabel.innerHTML= apple;
  radiobtn.name= 'apples';
  radiobtn.id= apple;
  radiobtn.value = apple;  // Set the value attribute of the radio button to the apple name
  basketDiv.append(radiobtn);
  basketDiv.append(radiolabel);
  radiobtn.addEventListener('change',message);
}


function message(e) {
  let getselected = getSelectedValue = document.querySelector('input[name="apples"]:checked'); 
  if(getselected != null) { 
    // Use the id property of the selected radio button to get the apple name
    document.getElementById("show").innerHTML= getselected.id + "  is selected"; 
  } else { 
    document.getElementById("show").innerHTML = "*You have not selected  "; 
  } 
}

我希望这能帮上忙。

相关问题