节点.js和约翰尼-五“文档未定义”错误

Node.js and Johnny-Five "document is not defined" error

本文关键字：未定义 文档 文档未定义 错误 js 约翰尼 节点      更新时间：2023-09-26

我正在使用Node.js和带有Arduino Uno微控制器的Johnny-Five。我的目标是，在按下连接到Arduino的按钮后，网页将以条形显示按下次数的计数。

在控制台中，当我按下"未定义文档"的按钮并引用应该更改 css 样式的变量时，我收到错误： 

var bar1 = document.getElementById('bar1');

不知道为什么会给出错误。有什么想法吗？下面是我的JavaScript：

var five = require("johnny-five"),
  bumper, led, counter, toggleState;
  toggleState = false;
five.Board().on("ready", function() {
  bumper = new five.Button(7);
  led = new five.Led(13);
  counter = 200;
  bumper.on("hit", function() {
    led.on();
    console.log( "Button has been pressed" );
            counter += 10; //add 10 everytime the button is pressed
            console.log(counter);
            toggleState = true;
            console.log("on");
    //function increaseBarSize () {
    if(toggleState == true) {
        var bar1 = document.getElementById('bar1');
        bar1.style.width = counter;
        console.log(bar1);
    }
    }).on("release", function() {
        led.off();
        console.log("off");
    });
    });

发生这种情况是因为服务器端没有 DOM，您需要发送此值并在客户端管理 DOM。

试试这个：

服务器端 

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io').listen(http);
var five = require("johnny-five"),
bumper, led, counter, toggleState;
toggleState = false;
five.Board().on("ready", function() {
    bumper = new five.Button(7);
    led = new five.Led(13);
    counter = 200;
    bumper.on("hit", function() {
        led.on();
        console.log( "Button has been pressed" );
        counter += 10; //add 10 everytime the button is pressed
        console.log(counter);
        toggleState = true;
        console.log("on");
        //function increaseBarSize () {
        if(toggleState == true) {
            io.on('connection', function(socket){
              socket.emit('counter', counter);
            });
        }
    }).on("release", function() {
        led.off();
        console.log("off");
    });
});
app.get('/', function(req, res){
    res.sendFile(__dirname + '/<client page>.html'); //change <client page> to the client document
});
http.listen(3000, function(){
    console.log('listening on *:3000');
});

客户端

 <script src="/socket.io/socket.io.js"></script>
 <script>
 var socket = io('http://localhost:3000');
 var bar1 = document.getElementById('bar1');
 socket.on('counter', function(counter){
     bar1.style.width = counter;
 });
 <script>

注意：假设您已经安装了 Socket.io 和快速模块。

相关文章：