Question

我正在努力仅使用HTML，CSS和JavaScript来简单地决定自己的命运风格游戏。我开始编写一个函数以检测单选按钮中他们想要选择的选项，但是当我编写该函数以使用JavaScript的“ location.replace”更改页面（HTML）时，我开始编写该函数不管选择了什么按钮，都会不断收到相同的警报。

    <form>
      <input type="radio" name="choice" onclick="getRadioValue('A1')" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
      <input type="radio" name="choice" onclick="getRadioValue('A2')" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
      <input type="radio" name="choice" onclick="getRadioValue('A3')" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
      <button type="button" onclick=choiceA()> Choose </button>
    </form>

var selectedButton = 'A1';
function getRadioValue(param){
    selectedButton = param;
    console.log(selectedButton);
}

function choiceA(){
  alert(selectedButton)
    if (selectedButton = 'A1') {
      alert("You selected the first button!");
      location.replace();
    } else if (selectedButton = 'A2') {
      alert("You selected the second button!");
      location.replace();
    } else {
      alert("You selected the third button!");
      location.replace();
    }
}

Answer 1

您正在使用分配运算符=。您应该使用比较运算符==或===。最好使用严格平等===

function choiceA(){
  alert(selectedButton)
    if (selectedButton === 'A1') {
      alert("You selected the first button!");
      location.replace();
    } else if (selectedButton === 'A2') {
      alert("You selected the second button!");
      location.replace();
    } else {
      alert("You selected the third button!");
      location.replace();
    }
}

您可以通过创建一个对象来使代码更好，更短。

var selectedButton = 'A1';
function getRadioValue(param){
    selectedButton = param;
    console.log(selectedButton);
}

function choiceA(){
  const obj = {
    A1:'first',
    A2:'second'
  }
  alert(`You selected the ${obj[selectedButton] || 'third'} button`)
}

<form>
      <input type="radio" name="choice" onclick="getRadioValue('A1')" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
      <input type="radio" name="choice" onclick="getRadioValue('A2')" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
      <input type="radio" name="choice" onclick="getRadioValue('A3')" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
      <button type="button" onclick=choiceA()> Choose </button>
    </form>

Answer 2

开关盒更适合这项工作。您也不需要存储检查值。您只需查询选中的元素即可。

尽管它将与按钮上的嵌入式事件处理程序一起使用。我建议在JavaScript中使用addEventListener()函数来附加事件。

function choiceA() {
  var selectedValue = document.querySelector('input[name="choice"]:checked').value;

  switch (selectedValue) {
    case "A1":
      console.log("A1 selected");
      break;
    case "A2":
      console.log("A2 selected");
      break;
    case "A3":
      console.log("A3 selected");
      break;
    default:
      //some error logging would be good incase you ever decide to add a 4th option and forget to update this function.
      console.log("Something went terribly wrong");
  }
}

<form>
  <input type="radio" name="choice" value="A1" checked> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br>
  <input type="radio" name="choice" value="A2"> Proin volutpat eros fringilla felis euismod laoreet a eu velit. <br>
  <input type="radio" name="choice" value="A3"> Mauris orci mi, luctus in leo eget, facilisis imperdiet lacus. <br><br>
  <button type="button" onclick=choiceA()> Choose </button>
</form>

无法通过JavaScript函数重定向HTML页面

2 个答案: