JSF页面中的JavaScript没有通过Canvas的ID获取元素

由于使用h5:标签似乎不可能在JSF中做画布(我找到了一个教程，但它说用于h5的xmlns地址在netbeans中被报告为无效)，我决定只使用好的旧html。问题是，我的ctx1 = ct1.getContext("2D")报告说，它不能设置"null"的属性，这意味着我的第一行，c1 = document.getElement…返回null。我不明白为什么。

基本上我正在做的是显示点击次数(使用cookie)和用户的ip地址和服务器的时间在画布上的页面。我使用3种不同的画布，因为它比试图弄清楚如何做多线画布更容易。

我知道BEAN的工作，因为我可以把它们放在javascript和/或画布代码之外，它显示正确的信息。javascript无法获取不同canvas元素的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;
    }
}

所以我在这里诅咒JSF和HTML5，想知道为什么这个愚蠢的代码不能工作，在我提交了这个，也给我的导师一份副本(这是大学的作业)后，在大约5分钟内我就明白了。

如何?首先，我在没有使用JSF的情况下将相同的代码编写到一个普通的HTML页面中，但它仍然不起作用，所以在查看了一些w3c示例后，我发现了问题所在。更改了以下代码行:

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

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

是的…差不多就是这样了。我还必须添加x,y值的filltext位置

相关内容

最新更新

热门标签：