document.getElementById("myID").value; Não funciona

5 de fevereiro de 2018 21 respostas Resolvido

Lucio_Tepe_Jr 5 de fevereiro de 2018

Pessoal,

estou batendo cabeça em um problema (já pesquisei muito e todos os exemplos q vejo estão exatamente igual ao meu código). Vejam abaixo q no meu teste eu simplesmente atribuo um ID a uma tag

, na linha
seguinte chamo uma Function em um String para pegar o conteúdo dessa tag mas o getElementById não
funciona. A variável wM aparece vazia no alert na linha seguinte. Deem uma olhada:

<!DOCTYPE html>
<html lang ="pt-br">        
   <head>
      <title> loginServlet2 </title>
      <meta http-equiv = ”Content-Type” content=”text/html; charset=UTF-8”>
      <link rel="stylesheet" type="text/css" href="c:/java/html/css/estilo.css"/>    

      <script type="text/javascript">
         function oMsg()
         {
            var wM = document.getElementById("test1").value;
            alert("wM = ", wM);
         }
      </script> 
   </head>

   <body>
      <h2> Test  </h2>

      <p id="test1">Please enter your username and password</p>

      <script>
         alert("Before call oMsg");
         oMsg();
      </script>

   </body>
</html>

Podem me ajudar? Grato.

21 Respostas

javaflex 5 de fev. de 2018

Não existe value no elemento p. E o que seria essa virgula no alert? Assim vai funcionar:

var wM = document.getElementById("test1").innerText;
alert("wM = " + wM);

darlan_machado 5 de fev. de 2018

Me parece a sintaxe do visualg, creio que ele está tentando acompanhar algum curso de lógica de programação e javascript…

Lucio_Tepe_Jr 6 de fev. de 2018

javaflex, grato pela resposta. Corrigi a sintaxe do alert. Quanto ao fato do var wM = document.getElementById(“test1”) estar ficando com “null”, eu suspeito q o q ocorre é q no Form, a chamada da Function oMsg() está acontecendo antes do Submit q chama o Servlet. Percebi isso pois coloquei “println” no Servlet no início e no fim. Teste a HTML e as tags alert q estão na Function oMsg() estão executando antes da
chamada e execução do Servlet. O Debug foi o seguinte: abri o log do Tomcat onde os println aparecem. Executando a HTML vi a 1a tag alert (dentro da Function), abri o log e não havia nenhum println. Cliquei no Alert e vi a 2a Alert (ainda dentro da Function), abri o log e nada. Após clicar no Ok da tag Alert, o println apareceu no log. Concluo com isso q o “onclick” do “form” está executando antes do “submit” do Servlet.
Vc sabe como eu consigo fazer com q o Servlet (submit do form) execute antes da Function oMsg() (onclick do form)? Veja o código:

<!DOCTYPE html>
<html lang ="pt-br">   
<head>
      <title>loginServlet2</title>
      <meta charset=UTF-8”>
      <link rel="stylesheet" href="c:/java/html/css/estilo.css"/>    

      <script>
         function oMsg() 
         {
            var wM = document.getElementById("wMsg").textContent;
            alert("wM = " + wM);

            if (wM == "Test OK!") 
            {
               document.getElementById("wMsgA").textContent = "Test is OK";
            } 
            else 
            {
               alert("Test is not OK. Before set new msg");
               document.getElementById("wMsgA").textContent = "Test is not OK";
            }
         }
      </script> 
   </head>

   <body>
      <h2> Login Page2 </h2>

      <p>Please enter your username and password</p>

      <form method="GET" action="loginServlet2">
         <p id="test2"> Username <input type="text" name="userName" size="50"> </p>

     <p> Password <input type="password" name="password" size="20"> </p>

         <p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p> 
      </form>

      <h2>MsgB : <span id="wMsg"><%=request.getAttribute("wMsg")%></span> </h2> 

      <p>MsgA : <span id="wMsgA"> </span> </p>
   </body>
</html>

Grato.

Danielzilli 6 de fev. de 2018

Neste caso o onclick sempre executa antes do submit da pagina, e após o submit a sua pagina será recarregada e o metodo javascript “oMsg()” não será chamado. Para executar algo no carregamento da pagina você pode usar o “onload” do body.

Lucio_Tepe_Jr 6 de fev. de 2018

Danielzilli, o onload no body “carregará” o Servlet sem executá-lo ou fará a execução do mesmo no inicio do body? Pergunto isso, pois o meu teste implica em pegar o UserID e a Senha, chamar o Servlet e depois chamar o oMsg(), nesta ordem. Grato.

javaflex 6 de fev. de 2018

O submit do form não é servlet. Ele vai enviar o Post pro servlet e recarregar a página no navegador com a resposta do servlet. O que fizer após submit será perdido, não entendi o que precisa. Melhor você trabalhar com ajax.

Danielzilli 6 de fev. de 2018

Acho que você está confundindo um pouco a execução do javascript com a requisição http. No caso o onload será chamado após o html da pagina terminar de carregar e o onclick é executado antes da requisição http para o seu servlet. Caso o seu servlet retorne para esta pagina ela será recarregada aí tem que ver qual o momento que você envia esse atributo “wMsg”. Interessante seria dar uma olhada no ciclo de vida de um servlet para você ter um idéia melhor da diferença.

Lucio_Tepe_Jr 6 de fev. de 2018

javaflex, imagine um fluxo em que eu mostre uma tela onde o usuário digitará seu user e senha. Ele digitará esses dados e apertará o botão submit. O próximo passo será enviar os dados digitados a um Servlet q validará se os dados estão corretos. O Servlet poderá retornar 3 status: ok, user invalido ou senha invalida. Para cada um desses status eu preciso mostrar uma mensagem diferente. A escolha da mensagem será feita pela Function oMsg(). Portanto, a sequencia do fluxo seria:

Usuário digita User e Password;
Pressiona o botão Submit;
Chama o Servlet q valida os dados e retorna o status;
Chama a Function oMsg() que tratará o status retornado pelo Servlet, escolhendo qual mensagem será
mostrada.
Esse é o fluxo que eu estou tentando testar.

Danielzilli 6 de fev. de 2018

Você pode chamar a função oMsg() no onload do body e remover do onclick. Só tem que validar que a função oMsg() será executada duas vezes. Isso é uma das soluções possíveis.

Lucio_Tepe_Jr 6 de fev. de 2018

Danielzilli, eu estou apanhando mais na combinação HTML x Javascript do que no Java (programação) propriamente dita. Veja se vc consegue me ajudar a sair desse atoleiro. Vou descrever o q e como está funcionando, ok?

Servlet - A chamada (Submit no Form) do Servlet passando dados e o recebimento da resposta do Servlet
está funcionando ok para efeito do HTML. Exemplo disso é q o retorno do Servlet é “Teste OK!” e
a instrução abaixo pega a resposta do Servlet e coloca na tag span com id=“wMsg”. A pagina
está mostrando esta mensagem na tag span perfeitamente.
```
`<h2>MsgB : <span id="wMsg"><%=request.getAttribute("wMsg")%></span> </h2>`
```

Relação HTML x Javascript

Meu problema está em fazer com q o retorno do Servlet, q já está sob domínio do HTML,
         (a tag span id=wMsg mostra a resposta do Servlet) chegue ao método oMsg().
         A explicação de vcs q quando temos tanto o submit como o onclick dentro de um mesmo Form
         explica o fato do método oMsg() receber o campo "null", pois ele foi chamado antes do Servlet
         executar.

         Estudando alternativas de como fazer uma comunicação HTML x Servlet eu tô travado.
         Exemplos:
           - Consegui chamar um método passando dados mas não consigo fazer o método alterar
             o conteúdo de uma tag. 
             A instrução document.getElementById("sMsg3").innerHTML = "Test is OK"; não funciona.
             Tentei trocar o innerHTML por textContent, mas continua na mesma.
            Veja exemplo abaixo:

         <script>
         function oMsg2(wCampo1, wCampo2) 
         {
            alert("wCampo1 = " + wCampo1);
            alert("wCampo2 = " + wCampo2);

            if (wCampo1 == "10") 
            {
               alert("Vou mover Test is OK para sMsg2");
               document.getElementById("sMsg3").innerHTML = "Test is OK";
            } 
            else 
            {
               document.getElementById("sMsg3").innerHTML = "Test is not OK";
            }
         }
      </script> 

  <script> 
     alert("Vou chamar oMsg2");
     oMsg2("10", "20"); 
  </script>

  <script> 
     alert("Vou mostrar retorno oMsg2");
  </script>
  <p id="sMsg3"></p>

Esquecendo por enquanto a questão do Metodo oMsg() rodar antes do Servlet, vc consegue descobrir o q está errado com minha tentativa do método alterar uma tag? Grato.

darlan_machado 7 de fev. de 2018

Salvo se você tiver alguma função javascript que valide o form a partir do clique no botão

<form onsubmit="return funcaoQueValida();" action="AquelaServletMarota">

O clique em um elemento tipo submit não espera nada executar na página. Ele vai disparar a requisição, forçando a atualização da página, a partir do que ocorrer no backend (servlet, php, python, ou o que seja).

Como o @Danielzilli comentou, você precisa separar as coisas. Usar o evento onload do elemento body é uma alternativa ótima.

Lucio_Tepe_Jr 7 de fev. de 2018

darlan, grato pelo retorno. Testei sua sugestão. Inicialmente eu achei q com a instrução [onsubmit=“return oMsg();” o método oMsg() só seria chamado no retorno do Servlet (após o Botão Submit ser pressionado e o
Servlet ser chamado e totalmente executado). Porém, monitorando pelo log do Tomcat, vi q não. O oMsg() continua sendo chamado antes do Servlet executar.

Respondendo sua pergunta: sim, no meu teste eu devo validar no método oMsg() o resultado do processamento do Servlet. Portanto, o oMsg() só poderia ser chamado depois do retorno do Servlet.

Pergunta: a sugestão do Danielzilli e sua de usar o onload no body resolveria esta questão? Lendo
minhas apostilhas entendi q o onload apenas “carregaria” um script externo de forma a performar melhor a pagina. Meu entendimento está errado? O fato de colocar onload no body para um script interno permitirá que o script rode só depois do Servlet?

Caso contrario, na sua ótica, como eu conseguiria fazer o fluxo Digita Dados -> chama Servlet -> Chama método oMsg() -> mostra mensagem, usando Javascript e HTML? Grato.

Danielzilli 7 de fev. de 2018

O onload do html é igual o onclick um ele “faz alguma coisa após o click” o outro “faz alguma coisa após o load da pagina” https://www.w3schools.com/jsref/event_onload.asp.
Acho que o mais correto no seu cenário é Carregar a pagina e executar oMsg() no onload, não exibir nada pois a mensagem estará vazia, digitar os dados, submeter a pagina, aguardar que a página recarregue agora com a mensagem do servlet e realizar a validação no oMsg().

<!DOCTYPE html>
<html lang ="pt-br">        
<head>
  <title> loginServlet2 </title>
  <meta http-equiv = ”Content-Type” content=”text/html; charset=UTF-8”>
  <link rel="stylesheet" type="text/css" href="c:/java/html/css/estilo.css"/>    

  <script type="text/javascript">
     function oMsg2() 
     {
        alert("mensagem = " + document.getElementById("msg").value);
		var retorno = document.getElementById("msg").value;
        if (retorno!=null && retorno!="") 
        {
			//a mensagem existe executar validação...
		}
     }
  </script> 
</head>
<body onload="oMsg2()">
   <h2> Test  </h2>

  <form action="servletAction">
	<input type="hidden" name="msg" id="msg" value="<%=request.getAttribute("wMsg")%>"/>
	<input type="text" name="user"/>
	<input type="text" name="pass" />
	<input type="submit" name="submit"/>
  </form>
  <p id="sMsg3"></p>

</body>
</html>

javaflex 7 de fev. de 2018

Lucio_Tepe_Jr:

darlan, grato pelo retorno. Testei sua sugestão. Inicialmente eu achei q com a instrução [onsubmit=“return oMsg();” o método oMsg() só seria chamado no retorno do Servlet (após o Botão Submit ser pressionado e o
Servlet ser chamado e totalmente executado). Porém, monitorando pelo log do Tomcat, vi q não. O oMsg() continua sendo chamado antes do Servlet executar.

Respondendo sua pergunta: sim, no meu teste eu devo validar no método oMsg() o resultado do processamento do Servlet. Portanto, o oMsg() só poderia ser chamado depois do retorno do Servlet.

Pergunta: a sugestão do Danielzilli e sua de usar o onload no body resolveria esta questão? Lendo
minhas apostilhas entendi q o onload apenas “carregaria” um script externo de forma a performar melhor a pagina. Meu entendimento está errado? O fato de colocar onload no body para um script interno permitirá que o script rode só depois do Servlet?

Caso contrario, na sua ótica, como eu conseguiria fazer o fluxo Digita Dados -> chama Servlet -> Chama método oMsg() -> mostra mensagem, usando Javascript e HTML? Grato.

Servlet e HTML são processos separados. O onload é chamado sempre que a página é carregada, após resposta do submit a página será recarregada. A dica de fazer o tratamento no onload vai funcionar sem radicalizar a maneira que está fazendo, mas o ideal seria usar ajax, assim teria a resposta do servlet sem recarregar a página, facilitando esse fluxo sem gambiarras.

Lucio_Tepe_Jr 7 de fev. de 2018

Danielzilli/darlan, grato pelo retorno. Testei o snippet do Danielzilli e foi ok. Só tiver q colocar o null entre aspas.

darlan, vou estudar o ajax, pq realmente deve ser muito mais amigável e até mais “leve” não atualizar a pagina toda hora. Grato.

Mas, preciso da ajuda de vcs numa coisa q, acho, até uma nós moscada é mais inteligente q eu. Eu simplesmente não consigo alterar o conteúdo de uma tag. Incluí as instruções abaixo no snippet do Danielzilli e funciona perfeitamente e no meu teste não funciona nem a pau. Veja o snippet:

if (retorno != "null" && retorno != "") 
        {
           document.getElementById("sMsg3").innerHTML = "Test is OK";
        }

No meu:

var wMsg3Campo = document.getElementById("pMsg3a").innerHTML;
            var wMsgpMsg3b = document.getElementById("pmsg3b").innerHTML;
//            alert("pMsg3a = " + wMsg3Campo + " pmsg3b = " + wMsgpMsg3b);
            alert("** Teste **");

            alert("Vou mover Test is OK para pMsg3b");
            document.getElementById("pmsg3b").innerHTML = "Paragraph changed!";
//              wMsgpMsg3b.innerHTML = "Test is OK";

O mais incrível é que o alert com *** Teste *** não executa de jeito nenhum. Já olhei 500 vezes as 2 linhas de
cima “var = wMsg3Campo…” e não consigo ver nenhum erro. Já troquei innerHTML por value, por textContent e nada muda. Se eu desloco esse alert para antes dos “var”, o alert executa. Além disso o document.getElementById, identico ao do Danielzilli, não funciona nem com reza brava.

Vcs podem ajudar esse mongolóide q vos fala?

javaflex 7 de fev. de 2018

Mostra o código completo com HTML.

Lucio_Tepe_Jr 8 de fev. de 2018

javaflex, grato pela resposta. Segue abaixo o código completo. Observe q existem varias tentativas de fazer funcionar a atualização da tag por um script. Eu comento sobre cada tentativa o q funciona e o q não.

<!DOCTYPE html>
<html lang ="pt-br">   
<head>
      <title>loginServlet2</title>
      <meta charset=UTF-8”>
      <link rel="stylesheet" href="c:/java/html/css/estilo.css"/>    

      <script>
         function oMsg() 
         {
            alert("Inicio oMsg()");
            var wM = document.getElementById("wMsg").textContent;

//          var name = document.getElementById('factionName'),
//          factionName = name.value;

            alert("wM = " + wM);

            if (wM == "Test OK!") 
            {
               document.getElementById("wMsgA").textContent = "Test is OK";
            } 
            else 
            {
//               alert("Test is not OK. Before set new msg");
               document.getElementById("wMsgA").textContent = "Test is not OK";
            }
         }
      </script> 

<!----------------------- oMsg2 ------------------------------>
<! OK Receber dados pela área de transferência                >
<! NOK alterar tag                                            >
<!------------------------------------------------------------>
      <script>
         function oMsg2(wCampo1, wCampo2) 
         {
            alert("Iniciando oMsg2()");
            alert("wCampo1 = " + wCampo1);
            alert("wCampo2 = " + wCampo2);

            if (wCampo1 == "10") 
            {
               alert("Vou mover Test is OK para sMsg3");
               document.getElementById("sMsg3").innerHTML = "Test is OK";
            } 
            else 
            {
               document.getElementById("sMsg3").innerHTML = "Test is not OK";
            }
         }
      </script> 

<!----------------------- oMsg3 ------------------------------>
<! OK Receber dados pelo getElementById                       >
<! NOK alterar tag                                            >
<!------------------------------------------------------------>

      <script type="text/javascript">
         function oMsg3() 
         {
            alert("Iniciando oMsg3()");


            var wMsg3Campo = document.getElementById("pMsg3a").innerHTML;
            var wMsgpMsg3b = document.getElementById("pmsg3b").innerHTML;
//            alert("pMsg3a = " + wMsg3Campo + " pmsg3b = " + wMsgpMsg3b);
            alert("** Teste **");

            alert("Vou mover Test is OK para pMsg3b");
            document.getElementById("pmsg3b").innerHTML = "Paragraph changed!";
//              wMsgpMsg3b.innerHTML = "Test is OK";
         }
      </script> 

<!----------------------- oMsg4 ------------------------------>
<! OK Receber dados pela área de transferência e retornar com >
<! return.                                                    >
<!------------------------------------------------------------>
      <script>
         function oMsg4(wCampoA, wCampoB) 
         {
            alert("Iniciando oMsg4()");
            alert("wCampoA = " + wCampoA);
            alert("wCampoB = " + wCampoB);

            var wMsgMsg4 = "Teste oMsg4 OK";
            
            return wMsgMsg4;
         }
      </script> 
   </head>



   <body>
      <h2> Login Page2 </h2>

      <p>Please enter your username and password</p>

<!---------------------- Form Original ----------------------->
<! O oMsg() é chamado pelo onClick antes do Submit chamar o   >
<! Servlet;                                                   >
<!------------------------------------------------------------>
<!--
      <form method="GET" action="loginServlet2">
         <p id="test2"> Username <input type="text" name="userName" size="50"> </p>

         <p> Password <input type="password" name="password" size="20"> </p>

         <p> <input type="submit" value="Submit" name="B1" onclick="oMsg()"> </p> 
      </form>
-->


<!------------------- Form com onsubmit ---------------------->
<! Funciona igual ao Form Original                            >
<!------------------------------------------------------------>
<!--
      <form method="GET" action="loginServlet2" onsubmit="return oMsg();>
         <p id="test2"> Username <input type="text" name="userName" size="50"> </p>

         <p> Password <input type="password" name="password" size="20"> </p>

         <p> <input type="submit" value="Submit" name="B1"> </p> 
      </form>
-->


      <h2>MsgB : <span id="wMsg"><%=request.getAttribute("wMsg")%></span> </h2> 

<!-------------------------- oMsg2 --------------------------->
<! - Chama Método oMsg2() passando 2 strings. OK              >
<! - Método altera a tag id="sMsg3". NOK                      >
<!------------------------------------------------------------>
<!--
      <script> 
         alert("Vou chamar oMsg2");
         oMsg2("10", "20"); 
      </script>

      <script> 
         alert("Vou mostrar retorno oMsg2");
      </script>
      <p id="sMsg3"></p>
-->

<!-------------------------- oMsg3 --------------------------->
<! - Chama Método oMsg3() sem passar dados. O Método oMsg3    >
<!   pega o conteúdo da tag id="pMsg3a" deste String. OK      >
<! - Método altera a tag id="sMsg3". NOK                      >
<!------------------------------------------------------------>

      <p id="pMsg3a"> Teste o Msg3 </p>
      <script> 
         alert("Vou chamar oMsg3");
         oMsg3(); 
      </script>

      <script> 
        alert("Vou mostrar retorno oMsg3");
      </script>
      <p id="pmsg3b"> ... </p>


<!-------------------------- oMsg4 --------------------------->
<! - Chama Método oMsg4() passando 2 variáveis. OK            >
<! - Método retorna variável a este Script. OK                >
<!------------------------------------------------------------>
<!--
      <p id="pMsg4a"> Teste o Msg4 </p>
      <script> 
         var wCmp001Msg4 = "10";
         var wCmp002Msg4 = "20";
         alert("Vou chamar oMsg4");
         var wRetMsg4 = oMsg4(wCmp001Msg4, wCmp002Msg4); 
      </script>

      <script> 
        alert("Vou mostrar retorno oMsg4 = " + wRetMsg4);
      </script>
-->

<!------------------------------------------------------------>
      <p>MsgA : <span id="wMsgA"> </span> </p>
   </body>
</html>

No código acima está ativa a funcionalidade q chama o método oMsg3().

Grato.

Solucao aceita

javaflex 8 de fev. de 2018

A função oMsg3() está sendo chamada antes do elemento pmsg3b existir.

Faça dessa forma que fica menos arriscado:

<!DOCTYPE html>
<html>
<head>
  <script>
    function oMsg3() { document.getElementById("pmsg3b").innerHTML = "Paragraph changed!";
    }

    window.onload = function() {
      oMsg3();
    };
  </script>
</head>
<body>
  <p id="pmsg3b"> ... </p>
</body>
</html>

Fiz do jeito que está fazendo, mas o ideal é separar o js do HTML.

Lucio_Tepe_Jr 8 de fev. de 2018

javaflex, você resolveu o problema. HTML é uma linguagem interpretada e não compilada. Eu não consegui ver o que era obvio. Valeu mesmo.

Quanto ao uso do script externo no lugar do interno, vc tem razão. Como, neste momento, estou fazendo meus primeiros testes com HTMLxJSxServlet. Estou usando JS interno só para facilitar meus estudos. Em um desenvolvimento real usarei o externo. Já li, inclusive, sobre as forma de load dos scripts com “defer” e etc.

Vou tb estudar o Ajax.

Agradeço muito 'a você e tb ao Danielzilli e ao darlan.

Danielzilli 8 de fev. de 2018

Só adicionando mais um detalhe, os trechos de codigo:

eles fazem a mesma coisa.

javaflex 8 de fev. de 2018

Isso, estuda ajax pra não precisar dessas gambiarras.

Criado 5 de fevereiro de 2018

Ultima resposta 8 de fev. de 2018

Respostas 21

Participantes 4

21 Respostas

Topicos relacionados