Ir para conteúdo

Arquivado

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

FlvDev

Obtendo valor do array pelo length

Recommended Posts

Eai galera, tudo bem sou novo no fórum e também no javascript hahaha, estou criando um QUIZ aqui, e me deparei com um erro que está me tirando do sério, não estou conseguindo obter o valor de um array pelo length.

 

No index :

 Questão: <span id="questoes_respondidas">1</span>/<span id="totalQuestoes">0</span>

nos arquivo JS :

 

Esse é o arquivo da array :

 

 

 

var perguntas = [

	{
		pergunta:"Um dos elementos relacionados abaixo não está de acordo com os demais do grupo.",
		resA:"Maracujá",
		resB:"Ameixa",
		resC:"Manga",
		resD:"Pitomba",
		resE:"Abacate",
		correta:"A",
		nivel:"media",
	},

	{
		pergunta:"Dentre os itens abaixo, qual aquele que pode ser considerado um intruso?",
		resA:"Gato",
		resB:"Lobo Guará",
		resC:"Hiena",
		resD:"Vaca",
		resE:"Leão",
		correta:"D",
		nivel:"facil"
	},

	{
		pergunta:'"Amigo" está para "Inimigo" assim como "Alegria" está para:',
		resA:"Triste",
		resB:"Sonho",
		resC:"Risos",
		resD:"Felicidade",
		resE:"Tristeza",
		correta:"E",
		nivel:"facil"
	},


]; 

 

 

 

e esse o arquivo da funções do meu QUIZ :

 

 

 

var _pontos = 0;
var _respCorreta;
var _quantidadeRespostas = 0;

// criando uma função em JS:
function imprimeQuestao(objeto){
	document.getElementById("question").innerHTML = objeto.pergunta;
	document.getElementById("resA").innerHTML = objeto.resA;
	document.getElementById("resB").innerHTML = objeto.resB;
	document.getElementById("resC").innerHTML = objeto.resC;
	document.getElementById("resD").innerHTML = objeto.resD;
	document.getElementById("resE").innerHTML = objeto.resE;
	_respCorreta = objeto.correta;

	_quantidadeRespostas++;
	document.getElementById("questoes_respondidas").innerHTML = _quantidadeRespostas;
}

function sorteioQuestao(perguntasArray){
	var _numero = Math.floor(Math.random() * perguntasArray.length);
	imprimeQuestao(perguntasArray[_numero]);
}


// função que verifica a resposta do usuario:
function respostaUsuario(_respUser){
	if (_respCorreta === _respUser){
		_pontos += 10;
		document.getElementById("pontos").innerHTML = _pontos;
	}
	setTimeout(function(){
		sorteioQuestao(perguntas);
		limpaRespostas();
	}, 500);
}

// verifica se o campo está marcado e desmarca
function limpaRespostas(){
	var kill = document.getElementsByName("radio");
   	for(var i= 0; i < kill.length; i ++){
   		kill[i].checked = false;
   	}   
}

document.getElementById("totalQuestoes").innerHTML = perguntas.length;

// executando uma função:
sorteioQuestao(perguntas);

 

 

 

o problema é que a função :

document.getElementById("totalQuestoes").innerHTML = perguntas.length;

não está retornando para meu index o total de elementos do array ou seja o total de perguntas.

 

Agradeço desde já.

Compartilhar este post


Link para o post
Compartilhar em outros sites

tenta adicionar seu seletores em variaveis, ai quando for usar eles vc usa as variáveis, tipo pega os seletores e separas eles em cima:

 

var $seletor = document.getElementById('totalQuestoes'),

$seletor2 = document.getElementById('question'),

$seletor3 = document.getElementById('resA');

 

 

ai depois nas funcoes vc chama os seletores

 

$seletor.innerHTML = ...

 

e tenta dar uma olhada no console.log em cada função pra ver se está tudo certo, espero ter ajudado, boa sorte!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Verifiquei o log está acontecendo esse erro :

 

Uncaught ReferenceError: perguntas is not defined
em :
$seletorQuestoes.innerHTML = perguntas.length;
sendo que em perguntas.js existe o array perguntas...
e o mais estranho é que quando jogo no console :
$seletorQuestoes.innerHTML = perguntas.length;
ele me retorna 3...
sabe o que pode ser ?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Tira a virgula do último elemento em perguntas... as vezes essa merdinha da chablaus!

{
		pergunta:'"Amigo" está para "Inimigo" assim como "Alegria" está para:',
		resA:"Triste",
		resB:"Sonho",
		resC:"Risos",
		resD:"Felicidade",
		resE:"Tristeza",
		correta:"E",
		nivel:"facil"
	}, <------------ tira essa aqui 

Compartilhar este post


Link para o post
Compartilhar em outros sites

na pagina.. você está adicionando o arquivo js de perguntas antes ou depois dessa função javascript?

 

LOL era isso mesmo ...

 

No meu index estava assim :

 

<body>

-------------------------

------ funções -------

-------------------------

-------------------------

</body>

 

uma linha antes do body eu adicionei :

<script type="text/javascript" src="js/controler.js" ></script> 
<script type="text/javascript" src="js/perguntas.js" ></script>

Depois da sua resposta eu só adicionei o arquivo perguntas.js antes do controler.js e funcionou wtf ??

 <script type="text/javascript" src="js/perguntas.js" ></script>
 <script type="text/javascript" src="js/controler.js" ></script>

Eu tentei colocar no head pra ver se funcionava e mesmo do jeito acima e não funcionou ? sabe me dizer o porque ? e porque o perguntas.js tem que vir primeiro que o controler ? venho de uma linguagem lua, que é muito fácil por sinal e é tudo praticamente automatizada, em definições leitura ....

 

Obrigado por ter me ajudado com o erro, agora só quero saber o porque disso ter acontecido, agradeço desde já.

Compartilhar este post


Link para o post
Compartilhar em outros sites

index.html

 

 

 

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Curso de Javascript Grátis</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">

    <link rel="stylesheet" href="css/style.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
      <header>
        <div class="row">
          <div class="panel panel-default text-center">
            <div class="panel-body">
              <strong>Pontuação: <span id="pontos">0</span>
              Questão: <span id="questoes_respondidas">1</span>/
              <span id="totalQuestoes">0</span></strong>
            </div>
          </div>
          <br>
          <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
              60%
            </div>
          </div>
        </div>
      </header>
      <article>
        <div class="row">
          <div class="caixa_painel borda_azul" id="callout-navs-tabs-plugin">
            <h4 id="question">Um dos elementos relacionados abaixo não está de acordo com os demais do grupo.</h4>          
          </div>
          <div class="caixa_painel_pequeno borda_cinza" id="callout-navs-tabs-plugin">          

            <div class="radio">
              <label>
                <input onclick="respostaUsuario('A');" name="radio" type="radio"> <span id="resA">Ameixa</span> 
              </label>
            </div>

          </div>
          <div class="caixa_painel_pequeno borda_cinza" id="callout-navs-tabs-plugin">
            <div class="radio">
              <label>
                <input onclick="respostaUsuario('B');" name="radio" type="radio"> <span id="resB">Manga</span>
              </label>
            </div>          
          </div>
          <div class="caixa_painel_pequeno borda_cinza" id="callout-navs-tabs-plugin">
            <div class="radio">
              <label>
                <input onclick="respostaUsuario('C');" name="radio" type="radio"> <span id="resC">Abacate</span>
              </label>
            </div>          
          </div>
          <div class="caixa_painel_pequeno borda_cinza" id="callout-navs-tabs-plugin">
            <div class="radio">
              <label>
                <input onclick="respostaUsuario('D');" name="radio" type="radio">  <span id="resD">Maracujá </span> 
              </label>
            </div>          
          </div>
          <div class="caixa_painel_pequeno borda_cinza" id="callout-navs-tabs-plugin">
            <div class="radio">
              <label>
                <input onclick="respostaUsuario('E');" name="radio" type="radio">  <span id="resE">Pitomba</span>
              </label>
            </div>          
          </div>

        </div>
      </article>
      <footer class="text-center">
        <br>
        <small>www.xtibia.com</small>

      </footer>
    </div>
    
    
    <script type="text/javascript" src="js/perguntas.js" ></script>
    <script type="text/javascript" src="js/controler.js" ></script>

  </body>
</html>

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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