JSF頁面內部的JavaScript沒有通過ID爲Canvas獲取元素

由於使用h5：標記在JSF中執行canvas似乎是不可能的（我發現了一個教程，但是它表示用於h5的xmlns地址在NetBeans中報告爲無效）我決定只使用良好的舊的HTML。問題是我的ctx1 = ct1.getContext（「2D」）報告它無法設置「null」屬性，這意味着我的第一行c1 = document.getElement ...返回null。我不明白爲什麼。JSF頁面內部的JavaScript沒有通過ID爲Canvas獲取元素

基本上我正在做的是在畫布上顯示點擊數（使用cookie）和用戶的IP地址以及服務器在頁面上的時間。我使用3種不同的畫布「，因爲它比試圖弄清楚如何做多線畫布更容易。

我知道BEAN的工作，因爲我可以將它們放在JavaScript和/或畫布代碼之外，並顯示正確的信息。所以它關於javascript的東西無法獲得不同畫布元素的ID。有什麼想法嗎？

的index.xhtml

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://xmlns.jcp.org/jsf/html"> 
    <h:head> 
     <title>User Info</title> 
    </h:head> 
    <h:body> 
     <br></br> 

     <canvas id="hitsCanvas" width="200px" height="50px"></canvas> 
     <br></br> 
     <canvas id="ipCanvas" width="200px" height="50px"></canvas> 
     <br></br> 
     <canvas id="timeCanvas" width="200px" height="50px"></canvas> 

     <script> 
       var c1 = document.getElementById("hitsCanvas"); 
       var c2 = document.getElementById("ipCanvas"); 
       var c3 = document.getElementById("timeCanvas"); 

       var ctx1 = c1.getContext("2D"); 
       var ctx2 = c2.getContext("2D"); 
       var ctx3 = c3.getContext("2D"); 

       ctx1.font = "30px Arial"; 
       ctx2.font = "30px Arial"; 
       ctx3.font = "30px Arial"; 

       ctx1.fillText("Hits:#{CookieBean.getCookie()}"); 
       ctx2.fillText("IP Address: ${CookieBean.getIP()}"); 
       ctx3.fillText("IP Address: ${CookieBean.getTime()}"); 
     </script> 

    </h:body> 
</html>

CookieBean.java

import java.io.Serializable; 
import java.text.SimpleDateFormat; 
import java.util.Calendar; 
import java.util.HashMap; 
import java.util.Map; 
import javax.enterprise.context.SessionScoped; 
import javax.faces.context.FacesContext; 
import javax.inject.Named; 
import javax.servlet.http.Cookie; 
import javax.servlet.http.HttpServletRequest; 

@Named(value = "CookieBean") 
@SessionScoped 
public class CookieBean implements Serializable { 

    int hits; 

    public int getHits() { 
     return hits; 
    } 


    public void setHits(int hits) { 
     this.hits = hits; 
    } 


    public String getCookie() { 
     Map<String, Object> requestCookieMap = FacesContext.getCurrentInstance().getExternalContext().getRequestCookieMap(); 
     Cookie hitsCookie = (Cookie)requestCookieMap.get("hits"); 

     Map<String,Object> properties = new HashMap<>(); 
     properties.put("maxAge", 31536000); 

     if (hitsCookie == null) { 
      FacesContext.getCurrentInstance().getExternalContext().addResponseCookie("hits", "1", properties); 
      return "1"; 
     } 
     else { 
      String newCookieHits = hitsCookie.getValue(); 
      int intCookie = Integer.parseInt(newCookieHits); 
      intCookie++; 
      String stringCookies = Integer.toString(intCookie); 
      FacesContext.getCurrentInstance().getExternalContext().addResponseCookie("hits", stringCookies, properties); 

      return stringCookies; 
     } 
    } 

    public String getIP() { 

     HttpServletRequest request = (HttpServletRequest) FacesContext.getCurrentInstance().getExternalContext().getRequest(); 
     String ipAddress = request.getHeader("X-FORWARDED-FOR"); 
     if (ipAddress == null) { 
     ipAddress = request.getRemoteAddr(); 
    } 

    return ipAddress; 
    } 

    public CookieBean() { 

    } 

    public String getTime() { 
     String timeStamp = new SimpleDateFormat("HH:mm:ss").format(Calendar.getInstance().getTime()); 
     return timeStamp; 
    } 

}

來源

2014-06-10 Richard Chase

所以在這裏我罵JSF和HTML5，不知道爲什麼這個愚蠢的代碼不工作後，我提出這個在這裏也是一個副本給我的導師（這是大學的作業），大約5分鐘內我就明白了。

怎麼樣？首先，我將沒有JSF的代碼寫入普通的HTML頁面，但它仍然沒有工作，所以在查看了一些w3c示例之後，我發現了問題所在。改變了下面的代碼行：

var ctx1 = c1.getContext("2D");

到

var ctx1 = c1.getContext("2d");

是啊......那是相當多了。我還必須添加x，y值來填充文本的位置。

來源

2014-06-10 03:58:55

JSF頁面內部的JavaScript沒有通過ID爲Canvas獲取元素

回答

相關問題