Ir para conteúdo
Minatos™

Como manipular checkboxes usando .checked

Por , em Javascript

Recommended Posts

Minatos™    0

Minatos™
Postado

Olá pessoal, tudo bom? recentemente eu comecei a aprender programação com JS, eu já conseguir usar o 

.checkboxes

em exercício que o professor passou, entretanto, quando fui criar outros exercícios pra treinar, pra conseguir realmente aprender, ao usar o mesmo método que o professor utilizar, o meu código não funciona.

 

Basicamente, eu quero saber quando o usuário clicar em uma opção, e em seguida fazer uma ação, o meu código abaixo é de uma pergunta com resposta, basicamente quero saber qual resposta o usuário clicou e dependendo de qual, queria informar uma mensagem na <div></div>

 

HTML:  

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Modelo de exercício</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <header>   
        <h1>Pergunta do Milhão</h1>
    </header>
    <section> 
        <div id="div1">
         <center><p>O que é um sistema ERP?</p></center>
         <p><input type="radio" name="per1" id="alt1" >
         <label for="alt1">É um sistema de informação que integra todos os dados e processos de uma organização em um único sistema.</label></p>
         <p><input type="radio" name="per1" id="alt2">
         <label for="alt2">É uma instituição internacional sem fins lucrativos que associa profissionais de gestão de projetos.</label></p>
         <p><input type="radio" name="per1" id="alt3">
         <label for="alt3"> é um conjunto de práticas na gestão de projetos organizado pelo instituto PMI e é considerado a base do conhecimento sobre gestão de projetos por profissionais da área.</label></p>
         <p><input type="radio" name="per1" id="alt4" checked >
         <label for="alt4">NDA</label></p>
         <center><input type="button" value="Verificar" onclick="verificar()"></center>
        </div>
        <div id="res">
            Testando...
        </div>
    </section>
    <footer>
        <p>&copy; Alexsander Fontes</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

JS: 

function verificar() {
    var pergunta = document.getElementById('per1')
    var res = document.getElementById('res')
    if (pergunta[0].checked) {
        res.innerHTML = `Testando manipulação'`
    } else if (pergunta[1].checked) {
        res.innerHTML = `Testando manipulação 1`
    } else if (pergunta[2].checked) {
        res.innerHTML = `Testando manipulação 2`
    } else if (pergunta[3].checked) {
        res.innerHTML = `Testando manipulação 3`
    }
}

E então, se eu usar: 

res.innerHTML = `Testando manipulação`

 fora do IF, funciona normal, se eu por na condição, o código para. :/

Compartilhar este post

Link para o post
Compartilhar em outros sites

felipeoli7eira    0

felipeoli7eira
Postado

Se não for isso, perdão ! devo ter interpretado errado.

 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Modelo de exercício</title>
<!-- <link rel="stylesheet" href="estilo.css"> -->
</head>
<body>
<header>
<h1>Pergunta do Milhão</h1>
</header>
<section>
<div id="div1">
<p>O que é um sistema ERP?</p>
<p><input type="radio" name="pergunta" value="1" id="respostaUm" >
<label for="respostaUm">É um sistema de informação que integra todos os dados e processos de uma organização em um único sistema.</label></p>
<p><input type="radio" name="pergunta" value="2" id="respostaDois">
<label for="respostaDois">É uma instituição internacional sem fins lucrativos que associa profissionais de gestão de projetos.</label></p>
<p><input type="radio" name="pergunta" value="3" id="respostaTres">
<label for="respostaTres"> é um conjunto de práticas na gestão de projetos organizado pelo instituto PMI e é considerado a base do conhecimento sobre gestão de projetos por profissionais da área.</label></p>
<p><input type="radio" name="pergunta" value="4" id="nenhuma" checked >
<label for="nenhuma">NDA</label></p>
<input type="button" value="Verificar" onclick="verificar()">
</div>
<div id="res">
Testando...
</div>
</section>
<footer>
<p>&copy; Alexsander Fontes</p>
</footer>
<script src="ecma.js"></script>
</body>
</html>
 
 
 
function verificar ()
{
const respostaCorreta = 2
 
console.log ( 'verificando resposta...' )
 
let radiosElements = document.querySelectorAll ( 'input[type=radio]' )
 
// console.log ( radiosElements )
 
radiosElements.forEach ( radio => {
 
if ( radio.checked )
{
// console.log ( 'A resposta marcada foi essa:', radio.value )
 
if ( radio.value == respostaCorreta )
{
alert ( 'Parabens, reposta correta.' )
}
else
{
alert ( 'Errou trouxa.' )
}
}
 
} )
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Minatos™    0

Minatos™
Postado
1 hora atrás, winterjeferson disse:

Você está utilizando:

var pergunta = document.getElementById('per1');

Só que 'per1' não é um ID, sim um name.

Tenta mudar por:

var pergunta = document.getElementsByName("per1");

 

 

Nossa, Obrigado Mano! eu sabia que era coisa simples, revisei o código várias vezes, mas o sono deixou passar essa, Valeu! deu certinho.

 

1 hora atrás, _FelipeOlvr disse:

Se não for isso, perdão ! devo ter interpretado errado.

 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Modelo de exercício</title>
<!-- <link rel="stylesheet" href="estilo.css"> -->
</head>
<body>
<header>
<h1>Pergunta do Milhão</h1>
</header>
<section>
<div id="div1">
<p>O que é um sistema ERP?</p>
<p><input type="radio" name="pergunta" value="1" id="respostaUm" >
<label for="respostaUm">É um sistema de informação que integra todos os dados e processos de uma organização em um único sistema.</label></p>
<p><input type="radio" name="pergunta" value="2" id="respostaDois">
<label for="respostaDois">É uma instituição internacional sem fins lucrativos que associa profissionais de gestão de projetos.</label></p>
<p><input type="radio" name="pergunta" value="3" id="respostaTres">
<label for="respostaTres"> é um conjunto de práticas na gestão de projetos organizado pelo instituto PMI e é considerado a base do conhecimento sobre gestão de projetos por profissionais da área.</label></p>
<p><input type="radio" name="pergunta" value="4" id="nenhuma" checked >
<label for="nenhuma">NDA</label></p>
<input type="button" value="Verificar" onclick="verificar()">
</div>
<div id="res">
Testando...
</div>
</section>
<footer>
<p>&copy; Alexsander Fontes</p>
</footer>
<script src="ecma.js"></script>
</body>
</html>
 
 
 
function verificar ()
{
const respostaCorreta = 2
 
console.log ( 'verificando resposta...' )
 
let radiosElements = document.querySelectorAll ( 'input[type=radio]' )
 
// console.log ( radiosElements )
 
radiosElements.forEach ( radio => {
 
if ( radio.checked )
{
// console.log ( 'A resposta marcada foi essa:', radio.value )
 
if ( radio.value == respostaCorreta )
{
alert ( 'Parabens, reposta correta.' )
}
else
{
alert ( 'Errou trouxa.' )
}
}
 
} )
}

 

Obrigado Amigo! sua maneira de fazer essa questão está funcionando perfeitamente, valeu por essa luz. 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • juniormatrix
      Script para validação
      Por juniormatrix
      Olá
       
      Achei esse script aqui no fórum mesmo:
       
      $.validator.addMethod( "customEmail", function (value, element) { return this.optional(element) || /^[\w-\.]+@fulano\.com\.br$/i.test(value); }, "Por favor, insira um e-mail válido com o domínio @fulano.com.br" ); $("#formulario").validate({ ignore: ".ignore", rules: { empresa: { required: true }, nome: { required: true }, contato: { required: true }, celular: { required: true }, email: { required: true, email: true, customEmail: true }, }, }); Testei e funcionou perfeitamente, mas gostaria que liberasse mais e-mails válidos, ao invés de apenas um.

      Tem como fazer? 
       
      Se alguém puder ajudar, fico muito grato.
    • Alessandro Bodão
      Projeto de Branding
      Por Alessandro Bodão
      Salve galerinha, passando pra mostrar pra vocês o novo projeto de marca que a Jatobá Estúdio desenvolveu, espero que gostem.   https://www.behance.net/gallery/166555627/Fernanda-Pinheiro-Nutricionista-Esportiva
    • rogerblower
      Qual calendário free usar?
      Por rogerblower
      Boas pessoal, estou precisando de um calendário para agenda com crud para agendamento, mas teria que ser free.
      Obrogado.
    • Sapinn
      Erro em arquivos do tipo woff, tff
      Por Sapinn
      Fala galera! Tenho um site que possui alguns icones que são puxados da biblioteca flaticon , o problema é que de uma hora pra outra esses icones pararam de aparecer. No meu ambiente local funciona, mas no ambiente de produção eles não aparecem e eu recebo o seguinte erro no console: Failed to load resource: the server responded with a status of 404 () 
       
      Alguém saberia como resolver isso?
    • mateus.andriollo
      Executar função via marcação de um elemento [RESOLVIDO]
      Por mateus.andriollo
      Carrego um conteudo Ajax e junto com ele vem HTML e JS, existe um marcador que está relacionado a um elemento HTML, quando eu clico e este elemento tem um atributo exemplo data-onload="funcaoOla()" esta função tbm carregada pelo ajax deve ser executada.
       
      Dúvida como eu faço uma chama de função desta forma, seria como exec("funcaoOla")
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito