How Can I change header content with javascript-CodePudding

I am trying to make a very simple welcome page in my site, and I want to greet users with "good morning ....", Taking names is not a thing, but my javascript part is not working, or I can not call it out, so here is my code:

<body style="background-color:rgb(255, 255, 255)">
 

  <h3 style="color: green">
    <%=ServletUtility.getSuccessMessage(request)%>
  </h3>
  <br>
  <h3  id="greeting">
    "greet()"
  </h3>
 <script>
    function greet(){
      var date1=new Date();
      var hour=date1.getHours();
      alert(hour);
      var header = document.getElementById("greeting");
      if(hour>0 && hour <=12){
        header.innerHTML="Good Morning" " "  <%=session.getAttribute("user")%>;
      }
      else if (hour >12 && hour <= 18){
        header.innerHTML="Good Afternoon"   " "  <%=session.getAttribute("user")%>;   
      }else if (hour >18 && hour <=22){
        header.innerHTML="Good Evening" " "  <%=session.getAttribute("user")%>;
      }else{ 
        header.innerHTML="Good Night" " "  <%=session.getAttribute("user")%>;
      }  
  
    
 }
  </script>
</body>

can anyone help me?, I am new at javascript

CodePudding user response：

Javascript functions can only be executed in <script></script> tags.

your header:

  <h3  id="greeting">
    "greet()"
  </h3>

will thus not execute the greet function, but instead display "greet()".

You can solve this by calling the function inside the script tag, like this:

 <script>
    function greet(){
      var date1=new Date();
      var hour=date1.getHours();
      alert(hour);
      var header = document.getElementById("greeting");
      if(hour>0 && hour <=12){
        header.innerHTML="Good Morning" " "  "<%=session.getAttribute("user")%>";
      }
      else if (hour >12 && hour <= 18){
        header.innerHTML="Good Afternoon"   " "  "<%=session.getAttribute("user")%>";   
      }else if (hour >18 && hour <=22){
        header.innerHTML="Good Evening" " "  "<%=session.getAttribute("user")%>";
      }else{ 
        header.innerHTML="Good Night" " "  "<%=session.getAttribute("user")%>";
      }  

    
   }
  
   //add this line
   greet();
  </script>

You can also remove the 'greet()' from your <h3> tag.

Notice that i've placed your "<%=session.getAttribute("user")%>" between quotes. <%=session.getAttribute("user")%> is server generated. This means it will place its contents (e.g. "John") as raw text. If the quotes wouldn't be there, you'd get:

 header.innerHTML="Good Night" " "  john;

which would throw a reference error: john is treated as an uninitialized variable.

CodePudding user response：

I've never used JSP but I'd imagine that <%= is used to echo a string so with that in mind I'd use that to generate a javascript variable outside of the function Greet and supply that variable as an argument to the function. The method by which you have attempted to call your Greet function is not correct - the function should either be within the script or as an inline event handler, such as onclick=Greet() but that would not be applicable here.

const username='<%=session.getAttribute("user")%>';


const Greet=( user )=>{
  let now=new Date();
  let hour=now.getHours();
  let msg=`Good night ${user}`;
  
  if( hour > 0 && hour < 12 )msg=`Good morning ${user}`;
  else if( hour > 12 && hour < 17 )msg=`Good afternoon ${user}`;
  else if( hour > 17 && hour < 22 )msg=`Good evening ${user}`;

  document.querySelector('h3.greeting').textContent=msg;
};

Greet( username );

<h3  id="greeting"></h3>