Javascript 无法将json中的背景色值设置为HTML页面

我是JavaScript新手。我有一个html页面，它绑定了“Bind_script.js”。在

Bind_script.js

中，我正在通过函数

update_BG

设置span id的背景色，该函数将span id作为参数。我正在尝试从JSON文件解析sapn id

当我使用硬编码的值调用函数

update_BG（）

时，span id背景颜色会发生变化，但当我从解析的JSON传递相同的值时，它不会按预期工作

1个HTML页面

桌子
{
显示：表格；
}
标题
{
显示：表格标题；
文本对齐：居中；
字体大小：粗体；
字体大小：较大；
}
标题
{
显示：表格行；
字体大小：粗体；
文本对齐：居中；
}
一行
{
显示：表格行；
}
.细胞
{
显示：表格单元格；
边框：实心；
边界宽度：薄；
左侧填充：20px；
右边填充：20px；
}
“dns ip是：”
G

facebook.com

H

E

 

2 Json文件 3 javascript 预期： 我需要根据从json文件解析的值设置Span ID的背景色

实际： 背景颜色未根据json中的值进行设置

---

如果有人能在这方面提供帮助，我将不胜感激。

您将客户端JS与服务器端节点JS混为一谈

const fs=require（'fs'）

在浏览器中不起作用。这样访问用户的硬盘将是一个巨大的安全漏洞。您可以做的是a）让用户通过

选择文件，然后使用FileReader对象读取它。或者b）将JSON放在服务器上，通过

fetch（）

请求并读取它。不能在浏览器中执行文件系统读取。您需要执行XMLHttpRequest（或

fetch（）

）来加载HTML中未包含的数据。谢谢@ChrisG，正如您所说，我现在理解了这个问题。因此，脚本应该包含在HTML页面本身中，而不需要从外部绑定它。你能给我举个例子吗？谢谢你我不知道你真的明白了。。。您无法从浏览器读取JSON文件，因为它位于用户的机器上，而不是服务器上。您需要从服务器对JSON数据进行Ajax调用，然后在浏览器中进行处理。我鼓励您研究如何从浏览器到服务器进行Ajax调用。感谢@jakerella和所有其他成员的投入。当我通过AJAX调用解析值时，这就起到了作用

{

  "ABC.com":["h","e"],
  "BCD.com":["e","h"],
  "CDE.com":["h","e"]

}

const fs = require('fs')

function update_BG(col) {
  window.addEventListener('load', function() {
  console.log('All assets are loaded')
  document.getElementById(col).style.background = "green";
})
}
//update_BG("e")
let rawData= fs.readFileSync("C:/example.json");

let url = JSON.parse(rawData);
 //var value= url['ABC.com'][1]
 update_BG("e")