0

我正在使用带有 Arduino Uno 微控制器的 Node.js 和 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");

    });

    });
4

1 回答 1

1

发生这种情况是因为服务器端没有 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 和 express 模块。

于 2015-06-27T14:22:55.847 回答