Jump to content

Recommended Posts

Bom dia Senhores,

 

Pessoal estou iniciando em Js e gostaria de uma mãozinha. Na faculdade o professor pediu para que eu fizesse um gerador de curriculo em HTML com JS.

Perfeito estou criando, mais enrrosquei em uma parte aqui, temos os campos dos dados pessoais, após tenho os dados de formação, ai que está: Na formação tenho tres inputs criado em HTML para Curso, Instituição e Ano de Conclusão e na frente tenho que ter o botão de mais e menos para inserir e tirar mais inputs contendo o mesmo conteúdo. Tenho um evento em cada input, onkeyup que vai mostrando os dados abaixo. E estou com dificuldade na hora de adicionar esse evento aos input que eu crio automaticamente após criar apertando o botão mais. Alguém pode me ajudar. Vou colocar abaixo meu dois códigos HTML e JS.

 

HTML

 

<!DOCTYPE html>
<html lang="en">
 
<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>teste</title>
</head>
 
<body>
<form id="dadosP">
<div id="dadosPe">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" onkeyup="mostrar()">
<label for="email">E-mail:</label>
<input type="text" name="email" id="email" onkeyup="mostrar()">
<label for="end">Endereço Profissional:</label>
<input type="text" name="end" id="end" onkeyup="mostrar()">
</div>
</form>
<br>
<form id="dadosEdu">
<div id="dadosEduc">
<label for="curso">Curso:</label>
<input type="text" name="curso" id="curso" onkeyup="mostrar()">
<label for="inst">Instituição:</label>
<input type="text" name="inst" id="inst" onkeyup="mostrar()">
<label for="anoconclu">Ano Conclusão:</label>
<input type="text" name="anoconclu" id="anoconclu" onkeyup="mostrar()">
<button type="button" onclick="maiscurso()">+</button>
<button type="button" onclick="menoscurso()">-</button>
</div>
 
</form>
<br><br>
<div id="mdadosp">
<div id="mnome">
<span id="pmnome"></span><br>
<span id="pmemail"></span><br>
<span id="pmend"></span>
</div>
</div>
<br><br>
<div id="mdadosedu">
<div id="mcurso">
<span id="pmcurso"></span><br>
<span id="pminst"></span><br>
<span id="pmanoconclu"></span>
</div>
</div>
<script src="script.js"></script>
</body>
 
</html>
 
JS
 
var i = 0;
 
function mostrar() {
var nome = document.getElementById("nome").value;
var email = document.getElementById("email").value;
var end = document.getElementById("end").value
 
document.getElementById("pmnome").innerHTML = nome;
document.getElementById("pmemail").innerHTML = email;
document.getElementById("pmend").innerHTML = end;
 
if (i > 0) {
var curso = document.getElementById("curso" + i).value;
var inst = document.getElementById("inst" + i).value;
var anoconclu = document.getElementById("anoconclu" + i).value;
} else {
var curso = document.getElementById("curso").value;
var inst = document.getElementById("inst").value;
var anoconclu = document.getElementById("anoconclu").value;
}
document.getElementById("pmcurso").innerHTML = curso;
document.getElementById("pminst").innerHTML = inst;
document.getElementById("pmanoconclu").innerHTML = anoconclu;
}
function maiscurso() {
i++;
var br2 = document.createElement("br");
var br1 = document.createElement("br");
 
var lbl1 = document.createElement("label");
lbl1.id = "lblcurso" + i;
var t = document.createTextNode("Curso: ");
lbl1.setAttribute("for", "Curso: ");
var inp1 = document.createElement("input");
inp1.id = "curso" + i;
inp1.setAttribute("onkeyup", mostrar());
 
var lbl2 = document.createElement("label");
lbl2.id = "lblinst" + i;
var x = document.createTextNode("Instituição: ");
lbl2.setAttribute("for", " Instituição: ");
var inp2 = document.createElement("input");
inp2.id = "inst" + i;
//inp2.addEventListener(onkeyup, mostrar());
 
var lbl3 = document.createElement("label");
lbl3.id = "lblanoconclu" + i;
var z = document.createTextNode("Ano Conclusão: ");
lbl3.setAttribute("for", " Ano Conclusão: ");
var inp3 = document.createElement("input");
inp3.id = "anoconclu" + i;
var br = document.createElement("br");
//inp3.addEventListener(onkeyup, mostrar());
 
document.getElementById("dadosEduc").appendChild(br2);
document.getElementById("dadosEduc").appendChild(br1);
document.getElementById("dadosEduc").appendChild(t);
document.getElementById("dadosEduc").appendChild(inp1);
document.getElementById("dadosEduc").appendChild(x);
document.getElementById("dadosEduc").appendChild(inp2);
document.getElementById("dadosEduc").appendChild(z);
document.getElementById("dadosEduc").appendChild(inp3);
document.getElementById("dadosEduc").appendChild(br);
 
 
// var newdiv = document.createElement('div');
// newdiv.innerHTML += '<label for="curso">Curso:</label><input onkeyup="mostrar()" type="text" name="curso' + line + '_1" id="curso' + line + '_1">';
// newdiv.innerHTML += '<label for="inst">Instituição:</label><input onkeyup="mostrar()" type="text" name="inst' + line + '_2" id="inst' + line + '_2">';
// newdiv.innerHTML += '<label for="anoconclu">Ano Conclusão:</label><input onkeyup="mostrar()" type="text" name="anoconclu' + line + '_3" id="anoconclu' + line + '_3">';
// document.getElementById("dadosEduc").appendChild(newdiv);
// line++;
}
 
//maiscurso('lines');

Share this post


Link to post
Share on other sites

As Linhas 17 18 19 21 22 23 estão precisando de revisão, estão erradas:

 

observe na emulação no jsfiddle como está,  os alertas em amarelo representam inatividade ou efeito nenhum, vermelho não se encaixa:

 

https://jsfiddle.net/hdrzq9yw/

 

Boa Sorte MEEEEU!

 

 

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 Cesar Melo
      Olá. Gostaria de uma opinião sobre onde focar meus estudos para trabalhar com PHP.
      Atualmente tenho conhecimentos com a linguagem PHP, e os seguintes frameworks: Bootstrap e Jquery.
      Recentemente fiz um curso de Laravel+materialize e gostei muito desse framework. Meu primeiro contato com framework para backend e pretendo utilizar o Laravel daqui pra frente nos meus estudos.
       
      Minha questão é a seguinte, quero dar continuidade aos meus estudos para me qualificar para o mercado de trabalho, mas não sei exatamente os próximos cursos que vou estudar.
      Não sei se atualmente há uma combinação de frameworks mais utilizada ou requisitada no mercado de trabalho. Ex: Laravel+vue+bootstrap, ou laravel+angularjs+materialize, tipo isso.
       
      Dei uma pesquisada no google e youtube, e notei que não há muito conteúdo de cursos por exemplo de Laravel+angularjs.
      Procurando algumas vagas de emprego, notei que há grande procurar para profissionais com qualificação em Laravel, e tambem grande procura para profissionais com qualificação em AngularJs, porém vagas distintas. Acho que não vi nenhuma vaga que peça Laravel+AngularJs.
       
      Alguém aí pode me passar uma visão ou dar sua opinião sobre isso, para eu focar meus estudos? Alguém sabe o que andam usando bastante? Ou que seja indicado de trabalhar em conjunto com PHP?
       
      Ah, uma observação... atualmente meu foco são de projetos voltados para sistemas, admin, etc. Não tenho muito perfil para projetos de marketing ou que exijam um frontend "lindo". rsrs.
       
      Grato...
    • By mpcarvalho
      Possuo pouco conhecimento em JS, então gostaria de solicitar uma ajuda com um script que montei para resgatar imagens de produtos de um determinado site/ecommerce utilizando o EAN do produto.
       
      No código abaixo eu passo via form alguns parametros como a URL do site onde quero pesquisar a imagem com "/" e na sequência o campo EAN com todos os códigos de barra que quero pesquisar separados por "," e por ultimo a extensão do arquivo de acordo com a extensão que o site em questão utiliza, jpg ou png. No final tudo será exibido na div dl_imgs e ai então eu posso dar um ctrl + s no meu navegador e salvar todas as imagens de uma vez. 
       
      O objetivo do FOR é retornar imagem por imagem utilizando os parametros URL + EAN + EXT. Ex: "ecommerce.com.br/imagens/000030201.png".
       
      O que acontece é que preencho o campo EAN com todos os códigos de barras que preciso separados por virgula, mas o script não consegue montar o array e me retorna algo parecido com isso: https://cdn-*******.*******.com.br/products/7896003703863,7897005100223,7897005101589,7896360210097,7896003703863,7897005100223,7897005101589
       
      Como podem ver me trás apenas uma imagem que não existe pois não separou os códigos de barra na matriz. Porem se eu copiar esses mesmos códigos e colocar direto na VAR MATRIZ, o script funciona. 
       
      Segue abaixo o script utilizado. Desde já agradeço!
       
      <script>
              function loadImgs(){
                /*--- Dados do formulário ---*/
                var dataform = document.forms[0] || document.forms['dados'];
                //var t = dataform.imgtotal.value;
                var url = dataform.url.value;
                var ext = dataform.ext.value;
                var ean = dataform.ean.value;
                dataform.buscar.disabled = true;
                  
                /*--- Gerar IMGS ---*/
                var div = document.getElementById('dl_imgs') || document.dl_imgs;
                div.innerHTML = "";

                novoArray = ean.split(',');
                var matriz = [novoArray];
                  
               for(var i=0; i<matriz.length; i++) {
                     div.innerHTML += '<img src="'+url+""+matriz+''+ext+'" />';
               }
      }
      </script>
       
      PS: Para melhorar ainda mais essa extração, eu gostaria de fazer isso fazendo um UPLOAD de um arquivo XLS contendo 2 colunas EAN e Nome produto, e no final exibir a imagem e abaixo o nome do produto, se alguém puder me dar uma luz de como fazer isso agradeço. Att;
    • By TheRonaldoStar
      Oii, fala ae pessoal!!
      Alguém pode me ajudar com uma coisa por favor?;
      Seguinte!, eu anteriormente fiz uma pergunta aqui no fórum recorrente a isso, mas eu conseguir uma solução parcial.
      Que era, fazer uma listagem de todos os cadastros e fazer a junção dos cadastros com uma coluna igual, Ou seja existem duas colunas [DE e Para], que recebem o id de quem está recebendo ou que está enviando a mensagem, eu conseguir fazer a tal listagem por grupo mas o problema que estou tendo é: que so faz o agrupamento de as colunas contiver o id por ex: [De = "1" e Para ="2"].
      Atualmente estou usando a codificação deste Jeito:
       
      $sql_2 = $db -> prepare("SELECT * FROM privado WHERE (Para = '$Meu_id') Or (De = '$Meu_id') GROUP BY Para, De DESC"); $sql_2 -> execute(); Esta consulta como pode ver ele busca todos os cadastros que tenha o meu ID ou seja do usuário online!, Após a consulta ele vei obter em um "while" somente o [ Id_De eo Id_Para ] desta forma:
      while($dados_2 = $sql_2 -> fetch(PDO::FETCH_OBJ)){ $Id_De = ($dados_2 -> De); $Id_Para = ($dados_2 -> Para); } Mas em fim eu gostaria de saber como mostrar somente um resultado ou seja o ultimo resultado que tiver o meu ID em ambas colunas [ Id_De ou Id_Para ].
      Antes de vocês me recomendar a função DESC LIMIT 'valor' saiba eu quero que liste todos os usuários que enviou ou recebeu minha mensagem não somente 1 ou seja se eu mandar um mensagem para o usuário 2 e ele me retornar uma mensagem vai mostrar somente o ultimo registro que tenha o meu ID e o id dele.
       
      Atenciosamente,
      ~Ronaldo
       
    • By manoaj
      Boa noite pessoal!
      Alguém ai entente dos checkouts do Mercado Pago pra me explicar como eu obtenho os dados da preferência criada através da url disponível na API
      https://api.mercadopago.com/checkout/preferences/:id?access_token=ACCESS_TOKEN_ENV  
    • By Richard.Ribeiro
      Boa tarde a todos, Uma ajuda Por favor, alguém pode me explicar porque sempre que eu digito no" input name=vsat" e clico em buscar a DIV do " select id=rightValues" SOME
      alguem poderia ajudar? o erro está no  PHP ou JS
      desde já agradeço a atenção.
      <style media="screen">
      SELECT, INPUT[type="text"] {
        width:500px;
        box-sizing: border-box;
      }
      SELECT, INPUT[type="button"] {
        font-size: 20px;
      }
      SECTION {
        padding: 8px;
        background-color: #f0f0f0;
        overflow: auto;
      }
      SECTION > DIV {
        float: left;
        padding: 30px;
      }
      SECTION > DIV + DIV {
        width: 200px;
        text-align: center;
      }
      </style>
      <section class="container">
      <form  method="post">
        <?php
        if (isset($_POST['buscar'])) {
            $id_gmm = $_POST['gmm'];
          }elseif (isset($_POST['buscar2'])){
                $vsat = $_POST['vsat'];
            }
            ?>
      <h2><i class="fa fa-link"></i> Vincular Componentes a VSAT</h2>
      <h4><i class="fa fa-arrow-down"></i> Itens da GMM</h4>
          <div>
            <input type="text" name="gmm"  placeholder="Digite o N° da GMM">
            <input type="submit" name="buscar" value="buscar"><br>
              <select id="leftValues" size="5" multiple>
                <?php
                $consultaGmm = ConexaoBD::conectar()->prepare("SELECT tipo_material_id FROM itens_fornecidos WHERE gmm_id = $id_gmm ");
                $consultaGmm->execute();
                $consultaGmm = $consultaGmm->fetchAll();
                foreach ($consultaGmm as $key => $value) {
               ?>
              <option value="<?php echo  $value['tipo_material_id'];?>">
               <?php echo $value['tipo_material_id']; ?>
               </option>
            <?php }?>
            </select>
          </div>
          <div>
              <input type="button" id="btnLeft" value="&lt;&lt;" />
              <br>  <br>
              <input type="button" id="btnRight" value="&gt;&gt;" />
          </div>
          <div>
            <label for="">VSAT</label>
            <input type="text" name="vsat"  placeholder="Digite o ID/IDE da VSAT">
            <input type="submit" name="buscar2" value="buscar"><br>
              <select id="rightValues" size="4" multiple>
                <?php
                $consultaVsat = ConexaoBD::conectar()->prepare("SELECT estoque_material_id FROM componentes_instalados WHERE estoque_material_id = $vsat ");
                $consultaVsat->execute();
                $consultaVsat = $consultaVsat->fetchAll();
                foreach ($consultaVsat as $key => $valueVsat) {
               ?>
               <option value="<?php echo $valueVsat['estoque_material_id'];?>">
                 <?php echo $valueVsat['estoque_material_id']; ?>
               </option>
             <?php } ?>
              </select>
          </div>
      </form>
      </section>
      <script  src="<?php echo INCLUDE_PATH_PAINEL ?>js/jquery-3.4.1.min.js"></script>
      <script src="<?php echo INCLUDE_PATH_PAINEL ?>js/main.js"></script>
      <script type="text/javascript">
      $("#btnLeft").click(function () {
          var selectedItem = $("#rightValues option:selected");
          $("#leftValues").append(selectedItem);
      });
      $("#btnRight").click(function () {
          var selectedItem = $("#leftValues option:selected");
          $("#rightValues").append(selectedItem);
      });
       
      </script>
      <?php die(); ?>
       
       
×

Important Information

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