Jump to content
vinitf

JSon Adicionar novas arrays

Recommended Posts

Tenho um input para o usuário escolher quantos números vão estar no array e estou tentando colocar outro agora para ele escolher a quantidade de arrays que vai gerar através de JSON, mas estou tendo dificuldades. 

<html>

<input  placeholder ="Quantidade de elementos" id="quantidadeElementos" />
<input placeholder ="Quantidade de listas" id="quantidadelistas"/>
<button onclick="myFunction()">Gerar</button>
<p id="gerar"></p>
<p id="demo"></p>
</html>

 

<script>

function myFunction() {
  var listas = {
    listainicial: [],
    nova: []
  };
  var max = document.getElementById("quantidadeElementos").value || 5;
  for (var i = 0; i < max; i++) {
    listainicial.push(parseInt(Math.random() * 100));
    var n = document.getElementById("quantidadelistas").value || 5;
    for (var n = 0; n < max; n++) {
      listainicial.push(parseInt(Math.random() * 100));
      listas.listainicial.push({
        outra: []
     });
   }
    document.getElementById("gerar").innerHTML = listainicial;
    document.getElementById("demo").innerHTML = nova;
  }
  document.getElementById("botão").addEventListener("click", myFunction);
}

</script> 

Share this post


Link to post
Share on other sites

Não sei se entendi bem.

 

Você quer uma saída assim?

Array[10]
	0: Array[10]
		0 : 46
		1 : 13
		2 : 71
		3 : 88
		....
	1: Array[10]
		0 : 55
		1 : 20
		2 : 10
		3 : 5
		....

 

 

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>



<script>

	var qntArrays = 5;
	
	var lista = [];	
	for(var i = 0; i < 10; i++){
		lista[i] = [];
		
		for(var y = 0; y < 10; y++){					
			var rand = parseInt(Math.random() * 100);			
			lista[i][y] = rand;
		}
	}
	
	console.log(lista);
	
</script>
</body>
</html>

 

Algumas dicas.

Se atente ao HTML semântico/correto/valido.

 

 

1-    

<input  placeholder ="Quantidade de elementos" id="quantidadeElementos" />

Prefira:

<input type="text" placeholder ="Quantidade de elementos" id="quantidadeElementos" />

(Ausencia do campo type atrapalha) 

Ou melhor ainda utilize os tipos 'tel/number' do padrão de HTML5

Mais:

https://diveintohtml5.com.br/

 

 

2 - 
O JavaScript deveria ficar antes do fechamento da tag
</body>

Mais:

https://www.eventials.com/pinceladasdaweb/javascript-boas-praticas-e-otimizacoes/

 

3 - 
A tag <body></body> Simplesmente não existe no seu documento.


4 - Utilize o botão 'Code' ao postar cógidos Html/Js/CSS/*....
 

5-

Recomendo os exercícios:

https://github.com/gabrieldarezzo/helpjs-ravi

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By marcosberaldo
      Boa noite.
       
      Estou criando um ranking de pontuação e preciso colocar uma paginação nesse ranking mas não posso fazer a paginação pelo select, pois a select tem que somar os pontos de cada jogador informados em cada registro no banco, se eu limito a select ele só vai somar os pontos dos registros da página e não todos os pontos do jogador.
       
      Dessa forma optei por fazer a select normalmente e criar um array onde eu pretendo exibir somente parte dos dados.
       
      Em resumo, consegui fazer da seguinte forma:
      $dados = mysqli_query($conn, "SELECT *, sum(Pontos) as TotalPontos, sum(Acerto_Exato) as Acertos FROM placares INNER JOIN jogadores ON placares.JogadorID = jogadores.id WHERE campeonato='$campeonato' GROUP BY JogadorID ORDER BY TotalPontos DESC, Acertos DESC "); for($a = 0; $a < 9; $a++ ) { $row = mysqli_fetch_array($dados); echo $row['JogadorID']. " - " .$row['nome']; } Esse código me retorna 10 registros do array, até ai tudo bem, mas eu gostaria de exibir apenas um intervalo, por exemplo do registro 5 ao 9. 
      Tentei da seguinte forma:
      $dados = mysqli_query($conn, "SELECT *, sum(Pontos) as TotalPontos, sum(Acerto_Exato) as Acertos FROM placares INNER JOIN jogadores ON placares.JogadorID = jogadores.id WHERE campeonato='$campeonato' GROUP BY JogadorID ORDER BY TotalPontos DESC, Acertos DESC "); for($a = 5; $a < 9; $a++ ) { $row = mysqli_fetch_array($dados); echo $row['JogadorID']. " - " .$row['nome']; } Dessa forma ele me mostra apenas 5 registros, mas ele sempre me mostra os 5 primeiros e eu preciso carregar os últimos 5.
       
      Como faço???
    • By VCastilho
      Bom Dia Estou tentando aplicar um HTML com Javascript no Portifólio do Meu Wordpress Mas assim que coloco ele deforma, como as imagens no final:  Em vez de modificar apenas horizontalmente, modifica também verticalmente, iguais as imagens, conferi o código e não localizei algo que causa isso, sendo que se visualizar o código no navegador, esta normal. A parte que esta desalinhado creio que consigo arrumar depois com o CSS Segue o código completo: <!doctype> <html> <head> <meta charset="utf-8"> <style> * { font-size: 16px; box-sizing: border-box; } button { display: block; margin: auto; } article { position: relative; display: inline-block; } aside { height: 200px; max-width: 260px; font-size: 3.2rem; font-weight: bold; line-height: 200px; display: inline-block; vertical-align: bottom; } aside#left { text-align: right; padding-right: 2rem; } aside#right { text-align: left; padding-left: 2rem; } .img-comp-container { height: 200px; min-width: 820px; position: relative; text-align: center; } .img-comp-img { width: 300px; height: 200px; overflow: hidden; position: absolute; } .img-comp-img img { display: block; vertical-align: middle; } .img-comp-slider { position: absolute; z-index: 9; cursor: ew-resize; width: 24px; height: 24px; background-image: url("http://images.tcdn.com.br/678962/themes/37/img/clicker1.png?325.80026377726244"); opacity: 1; } </style> </head> <body> <button onclick="initComparisons()">Centralizar ajustes</button> <div class="img-comp-container"> <aside id="left">Antes</aside> <article> <div class="img-comp-img "> <img src="https://www.lupadigital.info/wp-content/uploads/2018/05/imagens-gratis.jpg" width="280" height="200" alt="" /> </div> <div class="img-comp-img img-comp-overlay"> <img src="http://s2.glbimg.com/7B_srQyXERP_NoJCHSzgOnuwsyc=/smart/e.glbimg.com/og/ed/f/original/2017/07/26/best-sapce-photos-2017-designboom-10.jpg" width="280" height="200" alt="" /> </div> </article> <aside id="right">Depois</aside> </div> <script> slider = document.createElement("DIV"); slider.setAttribute("class", "img-comp-slider"); console.log(getId('right')); getId('right').style.width = getId('left').offsetWidth; function initComparisons() { var x, i, c, cc; getId('left').style.color = "#808080"; getId('right').style.color = "#808080"; x = document.getElementsByClassName("img-comp-overlay"); for (i = 0; i < x.length; i++) { x[i].style.width = "300px"; compareImages(x[i]); } function compareImages(img) { var clicked = 0, w = img.offsetWidth, h = img.offsetHeight; img.style.width = (w / 2) + "px"; img.parentElement.insertBefore(slider, img); img.parentElement.style.width = w; img.parentElement.style.height = h; slider.style.top = (h / 1) - (slider.offsetHeight / 2) + "px"; slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; slider.addEventListener("mousedown", slideReady); window.addEventListener("mouseup", slideFinish); slider.addEventListener("touchstart", slideReady); window.addEventListener("touchstop", slideFinish); function slideReady(e) { e.preventDefault(); clicked = 1; window.addEventListener("mousemove", slideMove); window.addEventListener("touchmove", slideMove); } function slideFinish() { clicked = 0; } function slideMove(e) { var pos; if (clicked == 0) return false; pos = getCursorPos(e) if (pos < 0) pos = 0; if (pos > w) pos = w; slide(pos); } function getCursorPos(e) { var a, x = 0; e = e || window.event; a = img.getBoundingClientRect(); x = e.pageX - a.left; x = x - window.pageXOffset; return x; } function slide(x) { c = 225 * x / w; cc = 225 - c; getId('right').style.color = "rgb(" + c + ',' + c + ',' + c + ")"; getId('left').style.color = "rgb(" + cc + ',' + cc + ',' + cc + ")"; img.style.width = x + "px"; slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; } } } function getId(ref) { return document.getElementById(ref); } initComparisons(); </script> </body> </html> Sendo que estou tentando utilizar tudo no mesmo arquivo, com o e o Estou fazendo errado? Há uma forma correta?

    • By CrysMorais
      Boa tarde pessoal,
      Sou nova por aqui e também sou nova na programação, e gostaria da ajuda de alguém, se possível.
      Eu montei uma pagina que cria questionários, onde o usuário  pode criar perguntas com 4 tipos de respostas (Radio, Checkbox, Text e Number).
      Porém não sei como verificar se no questionário, foi criado pelo menos uma pergunta de cada tipo.
       
      Montei assim:
       
      <select name="tipoconsquestao" id="tipoconsquestao" style="color:#000000; font-size:9px; width:130px; ">
                   <option value="1" selected >Única escolha</option>
                   <option value="2">Múltipla escolha</option>
                   <option value="3">Texto livre</option>
                   <option value="4">Número livre</option>
      </select>
       
      Criei um bloco desses para cada tipo de pergunta:
       
      <%if (ArrayQuestions(6,i) = 1) then%>
      <td width="8%" align=center>
             <input name="<%=conta_grupo%>" data-sm-tipo="<%=ArrayQuestions(6,i)%>" data-sm-vrmaxquestao="<%=ArrayQuestions(11,i)%>" data-sm-questao-numero="<%=ArrayQuestions(2,i)%>"  data-sm- alternativa="<%=ArrayQuestions(3,i)%>" data-sm-questao="<%=conta_grupo%>" id="<%=conta_Alternativa%>" type="radio" value="<%=ArrayQuestions(3,i) %>" <%if ArrayQuestions(4,i) = 1 then response.write "checked"%>/>
      </td>
      <td width="92%" >&nbsp;&nbsp;&nbsp;<b><%=ArrayQuestions(1,i)%><b></td>
      <% end if %>
       
       
      Recebo aqui:
       
              var arrayquestoes = [];
              var arrayalternativas = [];
              var questionarioRadio = [];
              var questionarioCheck = [];
              var questionarioText = [];
              var questionarioNum = [];
       
      for (var i = 1; i <= n_grupos; i++) {
                  var countRadio = 0;
                  var countCheck = 0;
                  var countText = 0;
                  var countVrText = 0;
                  var countVariosVrText = 0;
                  var countNum = 0;
                  
                  $("[data-sm-questao='" + i + "']").each(function (index, value) {
                      var questao = $(this).attr("data-sm-questao-numero");
                      var alternativa = $(this).attr("data-sm-alternativa");
                      //alert(alternativa);
                      var vralternativa = $(this).val();
                      var tipoalternativa = $(this).attr("data-sm-tipo");
                      
                      
                      vrmaxtotalizacao = $(this).attr("data-sm-vrmaxquestao");
                      
                      
                      arrayquestoes[i - 1] = questao;
          
                      //==============================================================================================================    
                      // Verifica todos os campos tipo questão 1 (Radiobuttons) e carrega o array questionarioRadio com true ou false
                      //==============================================================================================================  
                      if (eval(tipoalternativa) == 1)
                      {
                          if (this.checked) {
                              questionarioRadio[countRadio] = true;
                              if (textoalternativas == '') {
                                  textoalternativas = questao + '|' + alternativa + '|' + 1;
                              }
                              else {
                                  textoalternativas = textoalternativas + ';'+ questao + '|' + alternativa + '|' + 1;
                              }
                          }
                          else
                          {
                              questionarioRadio[countRadio] = false;
                          }
                          countRadio = countRadio + 1;
                          //console.log(cont);
                          
                      }
       
       
          Faço a validação aqui:
       
                
       for (var k = 0; k < questionarioRadio.length; k++) {
                  if (questionarioRadio[k])
                  {
                      if (!saidafinalRadio)
                      {
                          saidafinalRadio = true;
                      }
                  }
              }
              if (questionarioRadio.length == 1)
              {
                  saidafinalRadio = true;
              }
      }
       
      if (!saidafinalRadio)
              {
                  alert('Por favor responda todas as questões de única escolha.');
                  return;
              }
       
       
      E mando para o banco de dados.
       
       
       
    • By Anderson Ronilson Xavier
      Olá a todos gostaria da ajuda dos colegas estou em um projeto de site landing page  usando o plugin construtor de sites chamado themify ultra e não estou conseguindo uma galeria de imagens igual ao cliente está me pedindo que responsiva e com um menu que tenha as opções por exemplo "todas maçã banana laranja " se eu clicar em maçã a galeria ocultaria as bananas e Laranja e se eu clicar em todas e voltaria a apresentar todas as frutas ... Desculpa o jeito de explicar ... Mas galeria não estou conseguindo achar nada que me ajude a opção do themify ultra foi do próprio cliente que já tinha e acabei topando por fazer usando ele mesmo mas no site do themify não achei nenhum pluguin interessante a galeria deles é a padrão do WordPress será que teria como eu usar alguma outra os colegas tem alguma sugestão? 
       Vou deixar um site que o cliente deixou de modelo de como ele gostaria de que dele ficasse
       
      www.levelmont.com.br
       
      Grato pelo ajuda dos colegas.
       
       
    • By lucianfpaula
      Olá saudações, tenho a seguinte duvida, dentro de uma div vou ter varios campos de texto, seja h1, p, smaill etc.. a minha duvida é a seguinte: como manipular a cor de um texto selecionado, tipo tenho um <h1>Minha texto que pode ser grande, quero mudar essa cor</h1> tem varios editor que usam textarea, mas queria saber se é possivel fazer isso a partir de qualquer tag. tipo seleciono o texto e clico em um botão com a cor que quero e mude o texto selecionado.
       
      Muito obrigado
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.