Node.js + JavaScript: Rückgabewert, nicht [Objekt HTMLDivElement]

Zuerst - ich bin kein Programmierer, ich bin hier zum ersten Mal posten. Ich habe ein paar Tage lang verschiedene Wege ausprobiert und kann das nicht zur Arbeit bringen.Node.js + JavaScript: Rückgabewert, nicht [Objekt HTMLDivElement]

Ich habe ein Problem beim Anzeigen der Temperatur, die von der seriellen Schnittstelle auf der Webseite empfangen wird.

Hier ist mein app.js Code:

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; 
     }); 
    }); 
});

Dann in index.html ich diese Funktion erstellt haben:

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

Und wenn in Datei index.html Ich benutze Dieser Code:

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

Ich bekomme diese:

Temperatur: [object HTMLDivElement]

Wenn ich meine Funktion als dies:

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; 
    }); 
}

Und dann in index.html dieser:

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

Dann funktioniert es und zeigt die Temperatur als 24.2 (zum Beispiel).

Die Hauptfrage ist also, wie man nur einen Wert zurückgibt? Ich brauche diesen Wert in einer anderen Funktion, um ein Messgerät für die Temperatur zu zeichnen, indem ich den Wert meiner Funktion verwende?

Quelle

2016-07-25 Furieux F

Sie können in einer solchen Situation keinen Wert zurückgeben.Die zweite Version Ihrer Funktion ist so, wie sie funktionieren sollte. – Pointy

Ich habe das geschafft, indem ich die Funktion getTemperatureA() entfernt habe. Das Problem war, dass Gauge geladen wurde, bevor Daten vom seriellen Port empfangen wurden. Also muss socket.on nach JustGage aufgerufen werden.

Hier ist meine index.html Datei:

<!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>

Trotzdem, vielen Dank für die Unterstützung!

Quelle

2016-07-27 07:40:41

Sie mischen Verantwortlichkeiten in getTemperatureA(). Sie sollten diese trennen und sie entsprechend verwenden. Um es zu brechen; Zuerst gibt es die Aufgabe, eine Verbindung zu einem Websocket herzustellen und einen Datenereignishandler zu registrieren. Dann gibt es die Aufgabe, etwas mit den eingehenden Daten zu tun (Speichern für die weitere Verwendung). Und schließlich müssen diese Daten referenziert werden.

anschließen und registriert einen Event-Handler nur einmal nach unten sein muss, so dass Sie nur eine Funktion wie erstellen:

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; 
    }); 
}

und es dann zu einem geeigneten Zeitpunkt nennen, wie bei document.ready. Dann werden in dem Code, in dem Sie die aktuelle Temperatur benötigen, können Sie tt1 direkt verweisen, oder wenn aus irgendeinem Grunde braucht es wirklich eine Funktion zu sein, die einen Wert zurückgibt Sie eine Funktion wie verwenden:

function getTemperatureA() { 
    return tt1; 
}

Quelle

2016-07-25 15:18:03 Will

Wenn ich die Funktion connectToHost() benutze, die Sie vorgeschlagen haben, und versuchen, mit '

' und 'document.getElementById ('TA') anzuzeigen. InnerHTML =" Temperature: "+ tt1;' dann bekomme ich ** undefined **. –

Entweder du machst diese 'innerHTML'-Zuweisung, bevor der Socket verbunden ist und Daten empfangen wurden, oder tt1 ist nicht im Bereich dieses Aufrufs. Vielleicht könnten Sie etwas mehr von dem Client-Code (index.html) teilen? – Will

Node.js + JavaScript: Rückgabewert, nicht [Objekt HTMLDivElement]

Antwort

Verwandte Themen