Usuário com melhor resposta
Interação HTML5 e JavaScript

Pergunta
-
Pessoal,
Preciso de ajuda para um formulário em HTML5 que precisa fazer algumas validações usando Javascript. Explico abaixo:
Tenho uma pergunta cuja resposta é formada por um array de radiobuttons e uma vez que um dos radiobuttons é selecionado eu preciso emitir uma mensagem de alerta e carregar uma variável do tipo string que será testada ao final do script por meio de uma cadeia de ifs.
Por exemplo:
Você gosta mais de jogar em qual ambiente?
1) Aberto
2) Fechado
3) Ambos
Eu escolho a opção Aberto (1), então eu preciso carregar uma variável com a palavra "aberto" para ser testada mais tarde no código, por meio de ifs.
Aqui está o meu código HTML:
Construção do array de radiobuttons:
<p>
<label>Você se sente melhor para jogar em ambiente abertos, fechados ou ambos?</label><br>
<input type = "radio"
name = "radambiente"
id = "ambientefechado"
value = "Fechado"
checked = "checked"/>
<label for = "ambientefechado">Ambiente Fechado</label><input type = "radio"
name = "radambiente"
id = "ambienteaberto"
value = "Aberto"/>
<label for = "ambienteaberto">Ambiente Aberto</label>
<input type = "radio"
name = "radambiente"
id = "ambienteambos"
value = "Ambos"/>
<label for = "ambientefechado">Ambos</label>
</p>Botão para submeter a resposta:
<input
type = "button"
id = "btn-enviar"
onclick = ambiente()
value = "Buscar!">Função Javascript:
Function Ambiente()
document.getElementById("btn-enviar").onclick = ambiente()
{
var radios = document.getElementsByName("radambiente");
for (var i = 0; i < radios.length; i++)
{
if (radios[i].checked)
{
varorienta = radios[i].value;
alert("Passou por aqui!");
}
}
};Desde já muito obrigada!
Starshine.
A água sempre vence.
- Editado Star Shine quarta-feira, 29 de julho de 2015 20:48
Respostas
-
Amigo, achei o erro... Function é com "f" minúsculo... a única diferença...
Obrigada de qualquer forma....
Starshine.
A água sempre vence.
- Editado Star Shine sexta-feira, 31 de julho de 2015 00:52
- Marcado como Resposta Star Shine sexta-feira, 31 de julho de 2015 00:52
Todas as Respostas
-
Bom dia Star S
Me explica essa parte que não entendi direito, pois esta chamando uma função que não existe ambiente()
Function Ambiente() document.getElementById("btn-enviar").onclick = ambiente() { var radios = document.getElementsByName("radambiente"); for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { varorienta = radios[i].value; alert("Passou por aqui!"); } } };
A vantagem de ser inteligente é que podemos fingir que somos imbecis enquanto ao contrario é completamente impossivel
-
Oi! Obrigada pela ajuda!
Eu simplifiquei o código mas ainda não consegui.... fiz de modo a apenas aparecer uma mensagem quando clicar o botão, mas não funcionou....
estou postando meu código original:
<!DOCTYPE HTML>
<html>
<head>
<title>Seu Esporte!</title>
<meta charset = "UTF-8" />
<link rel="stylesheet" href="css/estilo.css">
<script>
Function Funcao1()
{
alert("Passou por aqui!");
}
</script>
</head><header class = "containerh">
<table>
<tr>
<td class = "logo">
<img src="imagens/Logo Jouer.png" alt="Jouer!" border=0></h1>
</td>
<td class="Menu">
<ul>
<li class="MenuLinha"> <a href= "default.aspx">Home</a></li>
<li class="MenuLinha"> <a href = "Jouer.aspx">Jouer!</a></li>
<li class="MenuLinha"> <a href ="Esportes.aspx">Esportes</a></li>
<li class="MenuLinha"> <a href ="FormOportunidade.aspx">Jouer Oportuni</a></li>
<li class="MenuLinha"> <a href ="Projeto.aspx">Project</a></li>
<li class="MenuLinha"> <a href ="Noticias.aspx">Notícias</a></li>
<li class="MenuLinha"> <a href ="Pesquisa2.aspx">Seu Esporte</a></li>
<li class="MenuLinha"> <a href ="FormContato.aspx">Contato</a></li>
</ul>
</td>
<td>
<img src="imagens/Bolinhas2.png" alt="Jouer!" border=0></h1>
</td>
</tr>
</table>
</header>
<body class="container">
<br> <br>
<center><img src="imagens/figurabusca.png" alt="Jouer!" border=0></h1></center>
<br> <br>
<form>
<fieldset>
<legend><b>Quais as suas preferências quando ao esporte? Clique na resposta mais adequada!</b></legend>
<br>
<p>
<label>Você prefere receber orientação completa antes de jogar (guiada), enquanto está jogando (semi-guiada) ou você não precisa de orientação (livre)?</label><br>
<input type = "radio"
name = "radorienta"
id = "orientaguiada"
value = "guiada"
checked = "checked"/>
<label for "orientaguiada">Guiada</label><input type = "radio"
name = "radorienta"
id = "orientasemiguiada"
value = "semi-guiada">
<label for "orientasemiguiada">Semi-Guiada</label>
<input type = "radio"
name = "radorienta"
id = "orientalivre"
value = "livre"/>
<label for "orientalivre">Livre</label>
</p>
<p>
<label>No esporte que você procura, o time deveria ser composto apenas de homens, apenas por mulheres ou ambos?<label><br>
<input type = "radio"
name = "radsexo"
id = "sexoMasculino"
value = "Homens"
checked = "checked" />
<label for = "sexoMasculino">Homens</label>
<input type = "radio"
name = "radsexo"
id = "sexoFeminino"
value = "Mulheres"/>
<label for = "gendermale">Mulheres</label>
<input type = "radio"
name = "radsexo"
id = "sexoAmbos"
value = "Ambos"/>
<label for = "sexoAmbos">Ambos</label>
</p>
<p>
<label>Você se sente melhor para jogar em ambiente abertos, fechados ou ambos?</label><br>
<input type = "radio"
name = "radambiente"
id = "ambientefechado"
value = "Fechado"
checked = "checked"/>
<label for = "ambientefechado">Ambiente Fechado</label><input type = "radio"
name = "radambiente"
id = "ambienteaberto"
value = "Aberto"/>
<label for = "ambienteaberto">Ambiente Aberto</label>
<input type = "radio"
name = "radambiente"
id = "ambienteambos"
value = "Ambos"/>
<label for = "ambientefechado">Ambos</label>
</p>
<p>
<label>Qual o grau de investimento que você está disposto a empregar?</label><br>
<input
type = "radio"
name = "radinvest"
id = "investbaixo"
value = "baixo"
checked = "checked"/>
<label for = "investbaixo">Baixo</label>
<input
type = "radio"
name = "radinvest"
id = "investmedio"
value = "medio"/>
<label for = "investmedio">Medio</label><input
type = "radio"
name = "radinvest"
id = "investalto"
value = "alto"/>
<label for = "investalto">Alto</label>
</p>
<p>
<label>Qual a sua idade?</label><br>
<input
type = "radio"
name = "radidade"
id = "idade1"
value = "idade1"
checked = "checked">
<label for = "idade1"> Até 20 anos </label>
<input
type = "radio"
name = "radidade"
id = "idade2"
value = "idade2">
<label for = "idade2"> Até 40 anos </label>
<input
type = "radio"
name = "radidade"
id = "idade3"
value = "idade3">
<label for = "idade3"> Até 60 anos </label>
<input
type = "radio"
name = "radidade"
id = "idade4"
value = "idade4">
<label for = "idade4">Indiferente</label>
</p>
<p>
<label>Fale um pouco de você, seu jeito de ser é:</label><br>
<input
type = "radio"
name = "radjeito"
id = "jeito1"
value = "Timido"
checked = "checked"/>
<label for "jeito1">Tímido</label>
<input
type = "radio"
name = "radjeito"
id = "jeito2"
value = "Extrovertido"/>
<label for "jeito2">Extrovertido</label><input
type = "radio"
name = "radjeito"
id = "jeito3"
value = "Depende"/>
<label for "jeito1">Depende</label><p>
<label>Qual o tipo de <b>Atividade</b> que você gosta mais? Escolha 3 (três):</label><br><br>
<input
type = "checkbox"
name = "chkatividade"
id = "atividade1"
value = "explosiva" />
<label for "atividade1">Explosivas</label><br>
<input
type = "checkbox"
name = "chkatividade"
id = "atividade2"
value = "concentracao" />
<label for "atividade1">de Concentração</label> <br><input
type = "checkbox"
name = "chkatividade"
id = "atividade3"
value = "forca" />
<label for "atividade3">de Força</label><br><input
type = "checkbox"
name = "chkatividade"
id = "atividade4"
value = "descontraida" />
<label for "atividade1">Descontraida e Recreativa</label><br><input
type = "checkbox"
name = "chkatividade"
id = "atividade5"
value = "corpo" />
<label for "atividade1">com Uso Apenas do Corpo</label> <br><input
type = "checkbox"
name = "chkatividade"
id = "atividade6"
value = "equipamento" />
<label for "atividade6">com Uso de Equipamento (Bola, Disco, Fita, etc.)</label><br>
<input
type = "checkbox"
name = "chkatividade"
id = "atividade7"
value = "concentracao" />
<label for "atividade7">Coordenação Motora</label><br><input
type = "checkbox"
name = "chkatividade"
id = "atividade8"
value = "concentracao" />
<label for "atividade8">Competitiva</label> <br><input
type = "checkbox"
name = "chkatividade"
id = "atividade9"
value = "diferente" />
<label for "atividade9">que Possuam Estilo de Vida e Vestimenta</label><br><input
type = "checkbox"
name = "chkatividade"
id = "atividade10"
value = "conceitual" />
<label for "atividade10">que Possuam Conceitos Bem Definidos (Fair Play, Filosofia, Cultura, etc)</label><br>
<input
type = "checkbox"
name = "chkatividade"
id = "atividade11"
value = "globalizadas" />
<label for "atividade11">que sejam Globalizadas</label><br><input
type = "checkbox"
name = "chkatividade"
id = "atividade12"
value = "viajar" />
<label for "atividade12">que Permitam Competir e Viajar</label> <br>
</p>
<input type="button" onclick="funcao1()" value="Exibir Alert" />
<br><br>
</fieldset>
</form>
</body>
</html>o mais interessante e que se eu executar o código:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial de Alert em Javascript - Linha de Código</title>
<script>
function funcao1()
{
alert("Eu sou um alert!");
}
</script>
</head>
<body>
<input type="button" onclick="funcao1()" value="Exibir Alert" />
</body>
</html>funciona perfeitamente.... então não sei se é algo no meu código.
Novamente obrigada!
Starshine.
---------------------------------------------------------------------------------
A água sempre vence.
- Editado Star Shine quinta-feira, 30 de julho de 2015 23:48
-
Amigo, achei o erro... Function é com "f" minúsculo... a única diferença...
Obrigada de qualquer forma....
Starshine.
A água sempre vence.
- Editado Star Shine sexta-feira, 31 de julho de 2015 00:52
- Marcado como Resposta Star Shine sexta-feira, 31 de julho de 2015 00:52