Fatal编程技术网
  • javascript/
  • Javascript 在div标记中包装.addEventListener

Javascript 在div标记中包装.addEventListener

javascript jquery html css json

Javascript 在div标记中包装.addEventListener,javascript,jquery,html,css,json,Javascript,Jquery,Html,Css,Json,我对js完全是新手，我需要在行间使用html的帮助 我有这个活动： eventSource.addEventListener('Uptime', function(e) { var parsedData = JSON.parse(e.data); var tempSpan = document.getElementById("uptime"); var tsSpan = document.getElementById("tstamp");

我对js完全是新手，我需要在行间使用html的帮助

我有这个活动：

 eventSource.addEventListener('Uptime', function(e) {
        var parsedData = JSON.parse(e.data);
        var tempSpan = document.getElementById("uptime");
        var tsSpan   = document.getElementById("tstamp");
        tempSpan.innerHTML = parsedData.data;
        tempSpan.style.fontSize = "28px";
        tsSpan.innerHTML = "At timestamp " + parsedData.published_at;
        tsSpan.style.fontSize = "9px";
    }, false);
它侦听来自我的Spark Core的事件，并用状态更新我的网站

我想要的是在我的分区内显示的状态

<div id="on"> </div>
这可能吗

完整代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Spark.aspx.cs"     Inherits="Spark" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="/Content/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <span id="uptime"></span><br>
    <span id="tstamp"></span>

   <br><br>
<button onclick="start()">Connect</button>

<script type="text/javascript">
    function start() {


    document.getElementById("uptime").innerHTML = "Waiting for data...";
    var deviceID = "";
    var accessToken = "";
    var eventSource = new EventSource("https://api.spark.io/v1/devices/" + deviceID + "/events/?access_token=" + accessToken);

    eventSource.addEventListener('open', function(e) {
        console.log("Opened!"); },false);

    eventSource.addEventListener('error', function(e) {
        console.log("Errored!"); },false);

    <!--THIS IS THE METHOD I WANT INSIDE THE DIV-->
    eventSource.addEventListener('Uptime', function(e) {
        var parsedData = JSON.parse(e.data);
        var tempSpan = document.getElementById("uptime");
        var tsSpan   = document.getElementById("tstamp");
        tempSpan.innerHTML = parsedData.data;
        tempSpan.style.fontSize = "28px";
        tsSpan.innerHTML = "At timestamp " + parsedData.published_at;
        tsSpan.style.fontSize = "9px";
        var div = document.createElement("div")
        div.innerHTML = parsedData.status;

        document.body.appendChild(div);

        document.getElementById("on").innerHTML = parsedData.status;
    }, false);

}
</script>







连接
函数start（）{
document.getElementById（“正常运行时间”）.innerHTML=“等待数据…”；
var deviceID=“”；
var accessToken=“”；
var eventSource=新的eventSource（“https://api.spark.io/v1/devices/“+deviceID+”/events/？access_token=“+accessToken”）；
eventSource.addEventListener（'open'，函数（e）{
log（“Opened！”；}，false）；
eventSource.addEventListener（'error'，函数（e）{
log（“Errored！”；}，false）；
eventSource.addEventListener（'Uptime'，函数（e）{
var parsedData=JSON.parse（e.data）；
var tempSpan=document.getElementById（“正常运行时间”）；
var tsSpan=document.getElementById（“tstamp”）；
tempSpan.innerHTML=parsedData.data；
tempSpan.style.fontSize=“28px”；
tsSpan.innerHTML=“At timestamp”+parsedData.published\u At；
tsSpan.style.fontSize=“9px”；
var div=document.createElement（“div”）
div.innerHTML=parsedData.status；
文件.正文.附件（div）；
document.getElementById（“on”）.innerHTML=parsedData.status；
}，假）；
}

这是一张截图

更具体地说，我试图在事件结束时在div中显示文本“Borte”（假设
status
是
parsedData
中的一个值）：

假设页面上有
div
，如果没有，则必须先创建它：

var div = document.createElement("div")
div.innerHTML = parsedData.status;

document.body.appendChild(div);
这对我不起作用。看不到div出现在屏幕上site@user2927356你确定吗？您是否在dev工具中查看了div是否存在，但不立即可见？如果没有，请发布完整的HTML。您可能想创建一个div并放置内容，然后将其附加到dom中。@user2927356检查我的编辑，我不知道页面上没有
div
。啊哈。我应该把它放在addeventlistener（）之外，对吗？ 
var div = document.createElement("div")
div.innerHTML = parsedData.status;

document.body.appendChild(div);