Node.js和Johnny-Five「文檔未定義」錯誤

我使用Node.js和Johnny-Five以及Arduino Uno微控制器。我的目標是在按下連接到Arduino的按鈕時，網頁將顯示一個條形的按下次數。Node.js和Johnny-Five「文檔未定義」錯誤

在控制檯我得到一個錯誤，當我按下，說：「文件沒有定義」，並引用我的變量是應該改變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"); 

    }); 

    });

來源

2014-11-21 deevolution

你想在nodejs文件裏面運行DOM代碼嗎？ DOM代碼需要在網頁（在瀏覽器中）的腳本標記中運行，而不是在nodejs程序中運行。看起來，也許你不太瞭解前端代碼和後端代碼之間的區別。 – jfriend00 2014-11-21 04:37:48

我對JavaScript和編程一般都比較陌生 - 剛開始幾個月前，所以它是學習過程的一部分。操縱基於Arduino傳感器輸入的DOM是不可能完成的任務嗎？我已收到另一個建議，以使用Socket.io來實現此功能。這是可行的嗎？ – deevolution 2014-11-22 04:46:57

你需要了解的第一件事是一個網頁有一個前端部分，它是在瀏覽器中運行的HTML和javascript以及在你的服務器上運行的後端部分（我假設它是nodejs，可能正在運行在你的Arduino設備上）。這些是在不同地方運行的兩個完全獨立的代碼片段。服務器創建一個傳送到瀏覽器的網頁，然後網頁在瀏覽器中運行。 DOM僅在瀏覽器中使用。您不要在nodejs或Arduino中操作DOM。您只能從網頁中的JavaScript處理DOM。 – jfriend00 2014-11-22 05:57:47

這是因爲在服務器端沒有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'); 
});

客戶端

注意：假設你已經安裝了Socket.io並且表達了模塊。

來源

2015-06-27 14:22:55

Node.js和Johnny-Five「文檔未定義」錯誤

回答

相關問題