Ir para conteúdo
renan mafra

Atrelando valores array do DOM à evento

Recommended Posts

Olá pessoal,
Estou aprendendo JS há alguns meses. Como todo processo de aprendizagem aparecem certas lacunas, dúvidas....
A minha é a seguinte: Estou tendo dificuldade em atrelar elementos do tipo (arrays/listas/vetores) retornados pelos
métodos do DOM e atrelá-los a eventos. Nesse código abaixo eu queria transformar cada dia de um calendário em
um objeto clicável e estou tendo dificuldade em manipular os vetores retornados e atrelá-los A CADA DIA.,
alguém pode dar essa luz ??

 

segue o código:

 

<script>
		window.onload = function(){
			var msg = document.getElementById("msg");
			
			var el = document.getElementById("mes");
			var elemento = el.getElementsByClassName("dia");
            
			
			
              /*
			  elemento[0].onclick =  function(){
				 elemento[0].style.backgroundColor = "#ccc";
			  }
			  */
			  elemento[1].onclick =  function(){
				 elemento[1].style.backgroundColor = "#ccc";
			  }
			  elemento[2].onclick =  function(){
				 elemento[2].style.backgroundColor = "#ccc";
			  }
			  elemento[3].onclick =  function(){
				 elemento[3].style.backgroundColor = "#ccc";
			  }
			  
			  
		}
	
</script>

</head>

<body>

    <table id="mes">
    	<tr>
    		<td class="dia">1</td><td class="dia">2</td><td class="dia">3</td><td class="dia">4</td><td class="dia">5</td><td class="dia">6</td><td class="dia">7</td>
    	</tr>
    	<tr>
    		<td class="dia">8</td><td class="dia">9</td><td class="dia">10</td><td class="dia">11</td><td class="dia">12</td><td class="dia">13</td><td class="dia">14</td>    		
    	</tr>
    	<tr>
     		<td class="dia">15</td><td class="dia">16</td><td class="dia">17</td><td class="dia">18</td><td class="dia">19</td><td class="dia">20</td><td class="dia">21</td>   		
    	</tr>
     	<tr>
    		<td class="dia">22</td><td class="dia">23</td><td class="dia">24</td><td class="dia">25</td><td class="dia">26</td><td class="dia">27</td><td class="dia">28</td>    		
    	</tr>
     	<tr>
    		<td class="dia">29</td><td class="dia">30</td><td class="dia">31</td>   		
    	</tr>       	   	    	    	
    </table>

</body>
</html>

Já usei função fora do onLoad, já usei loop for mas to quebrando a cabeça aqui.

 

Eu gostaria que um único botão (o dia clicado) em uma função conseguisse fazer o trabalho, tipo assim:

      

       elemento[x].onclick =  function(){
                 elemento[x].style.backgroundColor = "#ccc";
        }

 

qual a forma correta de fazer isso ????

 

agradeço a ajuda.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

/*
Inicio duas variáveis
Uma para varrer o documento em busca de elementos classificador "dia"
Outra vazia que usarei como método de identificar cada elemento
*/
var dia = document.getElementsByClassName('dia'), i;

/*
Como a variável dia é um array, tenho que indexar cada item desse array através de um loop
Que por sua vez a cada volta desse loop vai adicionando um evento a cada item
*/
for (i = 0; i < dia.length; i++) {
  dia[i].addEventListener('click', uma_funcao, false);
  console.log('O loop deu ' + i + ' volta(s) e indexou o elemento ' + dia[i]);
}

function uma_funcao(evento) {
  var alvo = evento.target;
  console.log('Você clicou em ' + alvo);
}

 

Usar onload para esse tipo de situação é desaconselhável, além de ser um método ultrapassado ele vai fazer com que o consumo de memória aumente por adicionar todo javascript na espera e só depois irá começar a carregar o DOM.

Nesse caso quando precisar percorrer o documento atrás de elementos o script deve ser acionado depois desses elementos terem sido devidamente carregados.

Compartilhar este post


Link para o post
Compartilhar em outros sites
9 horas atrás, renan mafra disse:

Olá Omar,

Muito obrigado pela explicação, eu já tinha chegado a solução parecida.
Valeu pela ajuda !!!

Que isso cara disponha...

Manipulação do DOM é um "basicão" do JS e no fim(o mais avançado) é o objetivo final...

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

  • Conteúdo Similar

    • Por fideles
      Fala pessoal, como anda as coisas?
       
      Meu conhecimento em JS e quase neutro, conheço algo, mais talvez não o suficiente para o que eu precise, por isso venho pedir ajuda a vocês,
       
      Tenho um pequeno programinha, simples mesmo que tem 4 areas (Administração, Compras, Financeiro, Almoxarifado).
       
      Quem fica na ADM solicita algo,  compras visualiza e da um "ok" e o financeiro tbm tem que dar um "ok" e no final, o almoxarifado dá um "Processo Concluido" (está parte está ok, funcionando, sem erro)
       
      Meu problema seria que quem está no almoxarifado consegue clicar no botão "Processo Concluido" mesmo o pessoal de compras e financeiro não dando um "ok" na solicitação ou ele tbm consegue dar "Processo Concluido" se um ou outro dar um "ok". Precisaria que ele so conseguisse dar "Processo Concluido" se os dois darem o "ok", se so um dar "ok" ele não pode dar "Processo Concluido".
       
      Alguém consegue pelo menos me dar um norte para que eu possa dar continuidade? Já tentei em PHP e nada.
       
    • Por rfael023
      Pessoal, bom dia!
       
      Estou iniciando no JS e quero automatizar algumas ações realizadas por humanos. Uma delas, preciso acessar um site e fazer o download de arquivo, porém, neste site especifico, não estou conseguindo passar da tela de login. Estou testando essa parte  no console do browser mesmo:
       
      var username = window.document.getElementById("username") undefined var password = window.document.getElementById("password") undefined var signin = window.document.querySelector(".splButton-primary.btn") undefined username.value = "usuariovalue" "usuariovalue" password.value = "passwordvalue" "password value" signin.click() Mas quando eu disparo o click, da usuário e senha errada e no console da a seguinte mensagem: 
       
      POST https://siteexemple/en-US/account/login 401 (Unauthorized) common.js:27
       
      Se eu digito o usuário e senha na mão e uso o console apenas para clicar no botão, ele acessa normalmente. Segue abaixo, bloco HTML do site:
       
      <form method="post" class="loginForm" action="/en-US/account/login"> <div style="display: none" data-cid="view200" class="account-login-firsttime" data-view="views/account/login/FirstTime" data-render-time="0"> <h2>First time signing in?</h2> <p>If you've forgotten your username or password, please contact your Splunk administrator.</p> <table> <tbody><tr> <td>username</td> <td>admin</td> </tr> <tr> <td>password</td> <td>changeme</td> </tr> </tbody> </table> </div> <fieldset> <div class="control account-login-textcontrol control-default" data-cid="view197" data-view="views/account/login/TextControl" data-name="username" data-render-time="0"> <span class="uneditable-input " data-role="uneditable-input" style="display:none"></span> <input type="text" name="username" class=" " value="" autocomplete="off" id="username" placeholder="Username"> </div> <div class="control account-login-textcontrol control-default" data-cid="view199" data-view="views/account/login/TextControl" data-name="password" data-render-time="0"> <span class="uneditable-input " data-role="uneditable-input" style="display:none"></span> <input type="password" name="password" class=" " value="" autocomplete="off" id="password" placeholder="Password"> </div><input class="splButton-primary btn" type="submit" value="Sign in"> <input type="hidden" name="cval" value="1900007162"> <input type="hidden" name="return_to" value="/en-US/"> </fieldset> </form> Conseguem me ajudar? Estou iniciando no JS.
       
      Agradeço, desde já!
    • Por soyer2018
      Bom dia
       
      to aprendendo por conta html, css e java script, eu criei um exercício onde eu criei uma input no html:
       
      <input type="number" onclick="teste()">
       
      e no java script eu quero o seguinte, quando eu clico no input, quero que ele armazene o número que cliquei e informe através do alert.
      fiz o seguinte código:
      function teste() {
      var number = document.getElementByName('input', 'number').values;
      alert('seu numero', + number);
       
      };
       
      porém ele só mostra o alerta mas sem mostrar o número,, como posso resolver esse problema.?
    • Por thgsousa3122
      <?php $url = 'www.site.com'; $dadosSite = file_get_contents($url); echo $dadosSite; ?> <script type="text/javascript"> window.onload = function(){ var x = document.getElementsByClassName("fraction")[0].innerHTML= "100"; } </script> Glr tenho esse codigo, eu queria alterar o conteudo que tem como classe "fraction", porem ele nao da resposta, alguem tem alguma sujestão?
    • Por diogoglobaltec
      criei um formulário dinamico e gostaria de enviar para o arquivo rec.php, os aquivos adicionados pelo no formato file , já tentei colocar em
       x.setAttribute("enctype" , "multipart/form-data");
      também não funcionou segue o arquivo:
       
      <!DOCTYPE html>
          <html>
              <body>
              
                  
                  
                  <p>Click the button to create a FORM and an INPUT element.</p>
                  <button onclick="myFunction()">Try it</button>
                  <button onclick="enviar()">enviar</button>
          <script>
          function myFunction() {
            var x = document.createElement("FORM");
            x.setAttribute("action", "rec.php");
          x.setAttribute("method", "post");
          x.setAttribute("id", "myForm");
            document.body.appendChild(x);

            var y = document.createElement("INPUT");
            y.setAttribute("type", "file");
            y.setAttribute("name", "arquivo[]");
            document.getElementById("myForm").appendChild(y);
      }
           function enviar(){
              document.forms[0].submit(); 
          
          }
          </script>

              </body>
      </html>
       
      consigo pegar no arquivo rec.php o valor de $_POST , mas de $_FILES não consigo pegar como um array, o que está dando errado ? segue o  script PHP 
       
      Arquivo rec.php
      <?php
      foreach($_POST['arquivo'] as $value) {
              echo $value."<br />";
      }
      foreach($_FILES['arquivo'] as $value) {
                     echo $value['arquivo']['name']."<br />";
      }
       
       
       
       
×

Informação importante

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