时间戳

首页 > 解决方案 > 网络服务器上的按钮单击的 addEventListener 问题

javascript - 网络服务器上的按钮单击的 addEventListener 问题

问题描述

我正在使用我的节点网络服务器，并且无法通过单击我的网站的按钮使 addEventListener 工作。我已经在 J​​S fiddle 上模拟了它，它工作得非常好！

https://jsfiddle.net/dxfqj4ys/2/

我现在正在尝试为我在 Raspberry PI 节点上运行的实际网站实现完全相同的东西。

我的 index.html


<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect('/');
    socket.on('stats', function(data) {
        console.log('Connected clients:', data.numClients);
    });


document.addEventListener('click', function(){
  document.getElementById("demo").innerHTML = "Hello World!";
});


var button = document.getElementById("button1");
    button.addEventListener("click", function(event){
    document.getElementById('number1').textContent = 50;
});


</script>



<!DOCTYPE html>
<html>


<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>


<div>
  <input id="button1" type="button" value="Add">
</div>

<br>

<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select operation:</option>
    <option value="1">RUT240</option>
    <option value="2">FMB920</option>
  </select>
</div>

<br>



<table id="t1">
<caption>Operation table</caption>
    <thead>
        <tr>
            <th>Operation code</th>
            <th>To Do</th>
            <th>Done</th>
            <th>Left</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>RUT240</td>
            <td>1000</td>
            <td>50</td>
            <td>
            </td>
        </tr>
        <tr>
            <td>FMB920</td>
            <td>555</td>
            <td>50</td>
            <td id ="number1">  
            </td>
        </tr>
    </tbody>
</table>
<p id="demo"></p>
</html>

还有我的 webserver.js

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var request = require('request');

//handles get request and serves index.html
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/public/index.html');
});

server.listen(8080);




//THE FOLLOWING WILL COUNT THE NUMBERE OF CLIENTS
var numClients = 0;
io.on('connection', function(socket) 
{
    numClients++;
    io.emit('stats', { numClients: numClients });
    console.log('Connected clients:', numClients);
    socket.on('disconnect', function()
    {
        numClients--;
        io.emit('stats', { numClients: numClients });
        console.log('Connected clients:', numClients);
    });

});

从我的 .html 中可以看出，我有 2 个事件侦听器，一个正在修改名为“demo”的元素，另一个应该修改 ID 为“number1”的元素。

带有“demo”的元素工作正常，但是，“number1”不起作用。

当我作为客户端从另一台计算机连接到服务器时，打开开发人员菜单，我可以看到以下错误： 在此处输入图像描述

Uncaught TypeError: Cannot read property 'addEventListener' of null

标签： javascripthtmlnode.js

解决方案

根据这个答案：Javascript 元素为空

Javascript 在遇到时由浏览器执行，这意味着如果您的代码片段存在于 HTML 元素之前的页面中，那么在那个时间点，该 HTML 元素还不存在。

您可以重新排列代码并将脚本部分放在 HTML 代码之后，如下所示：

<!DOCTYPE html>
<html>
<head>
<script src="/socket.io/socket.io.js"></script>

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>


<div>
  <input id="button1" type="button" value="Add">
</div>

<br>

<div class="custom-select" style="width:200px;">
  <select>
    <option value="0">Select operation:</option>
    <option value="1">RUT240</option>
    <option value="2">FMB920</option>
  </select>
</div>

<br>



<table id="t1">
<caption>Operation table</caption>
    <thead>
        <tr>
            <th>Operation code</th>
            <th>To Do</th>
            <th>Done</th>
            <th>Left</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>RUT240</td>
            <td>1000</td>
            <td>50</td>
            <td>
            </td>
        </tr>
        <tr>
            <td>FMB920</td>
            <td>555</td>
            <td>50</td>
            <td id ="number1">  
            </td>
        </tr>
    </tbody>
</table>
<p id="demo"></p>
<script>
    var socket = io.connect('/');
    socket.on('stats', function(data) {
        console.log('Connected clients:', data.numClients);
    });


document.addEventListener('click', function(){
  document.getElementById("demo").innerHTML = "Hello World!";
});


var button = document.getElementById("button1");
    button.addEventListener("click", function(event){
    document.getElementById('number1').textContent = 50;
});


</script>
</html>

推荐阅读