6
respostas

Function para abrir um arquivo html

Pessoal, estou com certa dificuldade que é o seguinte, estou criando um input radio com algumas seleções que vai abrir um arquivo html, mas estou com dificuldade para utilizar o javascript para fazer esta call.

6 respostas

Olá, Márcio! Tudo bem?

Você poderia, por favor, disponibilizar um print da tela contendo seu código (ou mesmo, copiar e colar o código em si) aqui neste tópico para que possamos analisar?

Juntamente, tente especificar da forma mais detalhada possível, o que você deseja fazer quando esses input radios forem selecionados. Aí a gente dá uma olhada juntos e tenta construir uma solução, blz?

Ficamos aqui no aguardo! \m/

Claro, segue o que tenho a intenção de fazer: uma parte do html:

<fieldset id="frmRadio">
            <form action="selecao" method="get" action="select.js">
            <legend><b>Escolha o dia:</b></legend>
            <div>
              <input type="radio" id="day1" name="drone" value="day1" href="dia1/dia1.html">
              <label for="day1">Exemplos do dia 1 </label>
            </div>
            <div>
                <button type="submit" onclick="select()">Bora lá!</button>
            </div>
        </form>
        </fieldset>

e isso em Javascript que estou bem perdido:

function select() {
    var dayOne = document.getElementById("day1").value;
    if(dayOne.value != "") {
        location.host="./dia1/dia1.html"+day1;
    }
}

Vamos ver se entendi bem:

  1. A ideia é ter um formulário com vários radio buttons cada um "apontando" para um arquivo .HTML diferente: Exemplos do dia 1 = dia1/dia1.html; Exemplos do dia 2 = dia2/dia2.html e assim por diante;
  2. Ao clicar no botão "Bora Lá", você quer executar uma função JavaScript chamada "select()" que pega o valor do input radio selecionado e redireciona o usuário para a página indicada: Se eu selecionei o radio button "Exemplos do dia 1" eu redireciono o usuário para "dia1/dia1.html", se for o "Exemplos do dia 2" eu levo o usuário para "dia2/dia2.html" etc.

Essa é a ideia, Marcio?

isso mesmo!

Olá pessoal, Acabei encontrando uma solução: Em HTML fiz desta maneira:

<fieldset id="frmRadio">
            <legend><b>Escolha o dia:</b></legend>
            <div>
              <input type="radio" id="day1" name="drone" value="dia1/dia1" onchange="javascript:handleform(this)">
              <label for="day1">Lógica JS 1/7: Operações Booleana </label>
            </div>
            <div>
              <input type="radio" id="day2" name="drone" value="dia2/dia2" onchange="javascript:handleform(this)">
              <label for="day2">Lógica JS 2/7: Variáveis</label>
            </div>

E em js fiz a seguinte function:

function handleform(elm){
    window.location = elm.value + ".html";
}

Se alguém sugerir de outra maneira seria de grande ajuda para analisarmos de outro angulo.

Olá Márcio, tudo bem? Desculpe a demora para responder.

Sim, a sua solução é bem próxima da que eu iria sugerir. No caso, como opção, você poderia colocar nos valores dos elementos <input> do HTML o caminho completo para o arquivo já sem a necessidade de concatenar a extensão ".html" dentro da função javascript.

Veja:

<fieldset id="frmRadio">
    <legend><b>Escolha o dia:</b></legend>
    <div>
        <input type="radio" id="day1" name="drone" value="dia1/dia1.html" onchange="handleform(this)">
        <label for="day1">Lógica JS 1/7: Operações Booleana </label>
    </div>
    <div>
        <input type="radio" id="day2" name="drone" value="dia2/dia2.html" onchange="handleform(this)">
        <label for="day2">Lógica JS 2/7: Variáveis</label>
    </div>
</fieldset>

Perceba no atributo value do <input> já está o caminho para o arquivo com a extensão .html definida.

A função handleform do javascript ficaria assim:

function handleform(elemento) {
    window.location = elemento.value;
}

Ou seja, ela atribuiria à propriedade location do objeto window o valor completo presente no atributo value do input selecionado fazendo com que o navegador redirecione a página para o valor indicado. Ou seja, nada muito diferente daquilo já proposto por você!

:)