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

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

您正在使用分配操作员=。您应该使用比较运算符==或===。最好使用Strict Equality ===

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

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

虽然它可以在按钮上使用内联事件处理程序。我建议在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>