0

Gostaria de entender como faço para usar um input do tipo radio com algumas opções e usar o javascript para quando setar uma opção do input ir para uma determinada página. por exemplo: tenho no html:

function seletor() {
    var day1 =document.getElementById("day1");
    var day2 =document.getElementById("day2");
    var day3 =document.getElementById("day3");
    var day4 =document.getElementById("day4");
    var day5 =document.getElementById("day5");
    var day6 =document.getElementById("day6");
    var day7 =document.getElementById("day7");

    if (day1.value != ""){
        document.getElementById("dia1.html").innerHTML = 'Meu Texto Novo';
    }
} // aqui fica minha dúvida, como inserir o link html
<fieldset id="frmRadio">
            <legend><b>Escolha o dia:</b></legend>
            <div>
              <input type="radio" id="day1" name="drone" value="day1" checked>
              <label for="day1">Operações Booleana</label>
            </div>
            <div>
              <input type="radio" id="day2" name="drone" value="day2">
              <label for="day2">Variáveis</label>
            </div>

1 Resposta 1

1

Se a sua intenção é redirecionar a pessoa para outra página usando javascript assim que alguém clicar em um dos input radio, você precisa: Aguardar alguém clicar no input radio -> redirecionar para outra página.

A fim de ativar um elemento do tipo input quando o usuário clicar em uma das opções, você pode usar um event listener para aguardar e executar uma função assim que o evento do tipo "change" ocorrer.

Cada input radio precisa de um event listener, mas para não precisar pegar um a um usando o id, eu selecionei todas as radios que tem o atributo name="drone" do seu HTML. Depois, converti a lista de elementos que essa função retornou para um array, assim posso usar a função forEach dos arrays e fazer um loop, adicionando o event listener em cada input radio. Com isso, quando ocorrer o evento tipo "change" em qualquer dos elementos, ele irá executar a função handleChange.

Nessa função handleChange, você pode ver que eu peguei o valor que foi setado no atributo "value" do input tipo radio, por meio do event.target (radio selecionado) e acessei a propriedade value dele. Na sequencia, busquei a constante URLS, que é um objeto que tem como chaves os valores do input radio de um lado ("day1", "day2", "day...") e do outro lado o link que você quiser usar para redirecionar o usuário. Por fim, para poder redirecionar, usei a função location.assign do navegador.

Se respondi sua dúvida, dá um up, espero que sim.

const URLS = {
day1: 'https://pt.stackoverflow.com/',
day2: 'https://www.google.com'
};

function handleChange(event) {
  const selected = event.target.value;
  const to = URLS[selected];

  location.assign(to);
}

Array.from(document.getElementsByName('drone')).forEach(option => {
  option.addEventListener('change', handleChange);
});
<fieldset id="frmRadio">
  <legend><b>Escolha o dia:</b></legend>
  <div>
<input type="radio" id="day1" name="drone" value="day1" checked>
<label for="day1">Operações Booleana</label>
  </div>
  <div>
<input type="radio" id="day2" name="drone" value="day2">
<label for="day2">Variáveis</label>
  </div>
</fieldset>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .