Node.js + JavaScript：返回值，而不是[object HTMLDivElement]

首先 - 我不是编码员，我在这里第一次发布。我尝试了几天不同的方式，但无法使其工作。Node.js + JavaScript：返回值，而不是[object HTMLDivElement]

我有一个问题，显示从串口接收到的网页温度。

这里是我的app.js代码：

var http = require('http'); 
var express = require('express'); 
var app = express(); 
var SerialPort = require("serialport"); 
var server = http.createServer(app).listen(8080); 
var io = require('socket.io').listen(server); 

app.use(express.static(__dirname + '/public')); 

var serialport = new SerialPort("/dev/cu.wchusbserialfd1210", { 
    baudrate: 9600, 
    parser: SerialPort.parsers.readline("\r\n") 
}); 
serialport.on('open', function(){ 
    // Now server is connected to Arduino 
    console.log('Serial Port Opened'); 

    var lastValue; 
    io.sockets.on('connection', function (socket) { 
     //Connecting to client 
     console.log('Socket connected'); 
     socket.emit('connected'); 
     var lastValue; 

     serialport.on('data', function(data){ 
      console.log(`Serial got: ${data}`); 
      var temperature1 = data.trim(); 
      if(lastValue !== temperature1){ 
       socket.emit('data', temperature1); 
      } 
      lastValue = temperature1; 
     }); 
    }); 
});

然后在的index.html我创造了这个功能：

function getTemperatureA() { 
    var socket = io.connect('http://localhost:8080'); 
    var temperature1 = 0; 
    socket.on('data', function (data) { 
     tt1 = data; 
    }); 
    return tt1; 
}

而当我使用的index.html文件此代码：

document.getElementById('tt1').innerHTML = "Temperature: " + getTemperatureA();

我得到这个：

温度：[对象HTMLDivElement]

如果我用我的功能，因为这：

function getTemperatureA(id) { 
    var socket = io.connect('http://localhost:8080'); 
    var temperature1 = 0; 
    var box = document.getElementById(id); 
    socket.on('data', function (data) { 
     box.innerHTML = data; 
    }); 
}

然后在index.html的这个：

<div id="tt1"></div> 
getTemperatureA('tt1');

然后它工作并显示温度为24.2（例如）。

所以主要问题是如何返回一个值？我需要另一个函数中的这个值来使用我的函数中的值来绘制温度的标尺？

来源

2016-07-25 Furieux F

在这种情况下，您无法返回值。你的功能的第二个版本是它应该工作的方式。 – Pointy

我管理这个工作，通过删除getTemperatureA（）函数。问题在于Gauge在从串口收到数据之前被加载。所以socket.on必须在JustGage之后调用。

这里是我的的index.html文件：

<!doctype html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <title>Temperature</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <style> 
    @font-face { 
     font-family: 'OpenSans'; 
     src: url('fonts/OpenSans-Regular.ttf') format('truetype'); 
    } 

    body { 
     font-family: 'OpenSans'; 
     background-color: black; 
     text-align: center; 
     color: grey; 
    } 

    #t1 { 
     width:120px; height:100px; 
     display: inline-block; 
     margin: 0.5px; 
    } 

    </style> 
    <script src="/js/socket.io.min.js"></script> 
    <script src="/js/raphael-2.1.4.min.js"></script> 
    <script src="/js/justgage.js"></script> 

</head> 
<body> 
    <div id="t1"></div> 
    <script> 
     document.addEventListener("DOMContentLoaded", function(event) { 
      var tt1; 
      var socket = io.connect('http://localhost:8080'); 

      var t1 = new JustGage({ 
       title: "", 
       label: "Temperature", 
       id: "t1", 
       value: tt1, 
       min: -50, 
       decimals: true, 
       decimals: 1, 
       max: 50, 
       symbol: '\xB0C', 
       gaugeWidthScale: 0.5, 
       customSectors: [{ 
        color: "#0000ff", 
        lo: -50.0, 
        hi: -20.0 
       }, { 
        color: "#33ceff", 
        lo: -19.9, 
        hi: -10.0 
       }, { 
        color: "#33ffff", 
        lo: -9.9, 
        hi: 0 
       }, { 
        color: "#33ffda", 
        lo: 0.1, 
        hi: 17.9 
       }, { 
        color: "#00ff00", 
        lo: 18.0, 
        hi: 22.9 
       }, { 
        color: "#ffff00", 
        lo: 23.0, 
        hi: 25.9 
       }, { 
        color: "#ffa500", 
        lo: 26.0, 
        hi: 29.9 
       }, { 
        color: "#ff0000", 
        lo: 30.0, 
        hi: 50.0 
       }], 
       counter: true, 
       pointer: true, 
       titleFontColor: "grey", 
       titleFontFamily: "OpenSans", 
       valueFontColor: "grey", 
       valueFontFamily: "OpenSans", 
       formatNumber: false 
      }); 

      socket.on('data', function (data) { 
       //tt1 = parseFloat(data); 
       t1.refresh(tt1); 
      }); 
     }); 

    </script> 
</body> 

</html>

无论如何，感谢支持！

来源

2016-07-27 07:40:41

你在混合责任getTemperatureA()。你会想分开这些并适当地使用它们。分解它;首先，需要连接并注册一个websocket的数据事件处理程序。然后有一些工作要处理传入的数据（将其存储以供进一步使用）。最后，需要引用这些数据。

连接和注册的事件处理程序仅需要一次下来，所以你可以创建类似的功能：

var tt1; 
function connectToHost() { 
    // concern 1: connect and register callback 
    var socket = io.connect('http://localhost:8080'); 
    socket.on('data', function (data) { 
     // concern 2: save the data 
     tt1 = data; 
    }); 
}

，然后把它在适当的时间，例如在document.ready。然后，在代码中，你需要当前的温度，就可以直接引用tt1，或者出于某种原因，它确实需要是返回您可以使用功能，如值的函数：

function getTemperatureA() { 
    return tt1; 
}

来源

2016-07-25 15:18:03 Will

当我使用你建议的函数connectToHost（），并尝试使用'

'和'document.getElementById（'TA'）显示。innerHTML =“Temperature：”+ tt1;'然后我得到** undefined **。 –

要么在套接字连接并接收数据之前执行'innerHTML'赋值，要么tt1不在该范围内。也许你可以分享更多的客户端代码（index.html）？ – Will

Node.js + JavaScript：返回值，而不是[object HTMLDivElement]

回答

相关问题