Блог

Я работаю над созданием простой игры в стиле «Реши свою судьбу», используя только HTML, CSS и JavaScript. Я начал писать функцию, чтобы определить, какой выбор из набора переключателей они хотели выбрать, но затем, когда я написал функцию для изменения страницы (HTML) с помощью JavaScript «location.replace», я продолжал получать одно и то же предупреждение независимо от того, какая кнопкабыл выбран.

     <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();
    }
}
  

Вы используете оператор присваивания = . Вы должны использовать оператор сравнения == или === . Лучше использовать строгое равенство ===

 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>  

Случай переключения был бы более подходящим для этой работы. Вам также не нужно сохранять проверенное значение. Вы можете просто запросить проверенный элемент.

Хотя он будет работать с встроенным обработчиком событий на кнопке. Я советую использовать addEventListener() функцию в javascript для прикрепления событий.

 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>