Javascript Node.js和Johnny Five“；“未定义文档”；错误

我正在使用Node.js和Johnny Five以及Arduino Uno微控制器。我的目标是，当按下连接到Arduino的按钮时，网页将以条形图的形式显示它被按下的次数

在console中，当我按下“document is not defined”（文档未定义）按钮并引用本应更改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'）。服务器（应用程序）；
var io=require（'socket.io'）。侦听（http）；
风险值五=要求（“强尼五”），
保险杠，led，计数器，开关状态；
toggleState=false；
5.Board（）.on（“就绪”，函数（））{
保险杠=新的五个按钮（7）；
发光二极管=新的五个发光二极管（13）；
计数器=200；
保险杠打开（“击中”，函数（）{
led.on（）；
控制台日志（“按钮已按下”）；
计数器+=10；//每次按下按钮时添加10
控制台日志（计数器）；
toggleState=true；
console.log（“on”）；
//函数增加BarSize（）{
如果（toggleState==true）{
io.on（'连接'，函数（套接字）{
socket.emit（'计数器'，计数器）；
});
}
}).on（“释放”，函数（）{
led.off（）；
控制台。注销（“注销”）；
});
});
app.get（'/'，函数（req，res）{
res.sendFile（_dirname+'/.html'）；//更改为客户端文档
});
http.listen（3000，函数（）{
console.log（'监听*：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>

变量套接字=io（'http://localhost:3000');
var bar1=document.getElementById（'bar1'）；
socket.on（'counter'，函数（counter）{
bar1.style.width=计数器；
});

---

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

您正在尝试在nodejs文件中运行DOM代码？DOM代码需要在网页（浏览器）的脚本标记中运行，而不是在您的nodejs程序中。看来您可能不太了解前端代码和后端代码之间的分离。我对javascript和总体编码相对较新，几个月前才开始，所以这都是学习过程的一部分。基于Arduino传感器输入操纵DOM是一项不可能的任务吗我收到了另一个建议，建议使用Socket.io来实现此功能。这可行吗？您需要了解的第一件事是，网页的前端是在浏览器中运行的HTML和javascript，后端是在您的服务器上运行的（我假设它是nodejs，可能正在您的Arduino设备上运行）。这是两段完全独立的代码，在不同的位置运行。服务器创建一个网页，该网页被传递到浏览器，然后该网页在浏览器中运行。DOM仅在浏览器中。您不在nodejs或Arduino中操纵DOM。您只在网页内通过javascript操纵DOM。

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