Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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
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