Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>© 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. :/
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>© 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.' )
}
}
} )
}>
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>© 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.
Você está utilizando: