文章/答案/技术大牛

发布

社区首页 >问答首页 >innerHTML在控制台中工作，而不是在js文件中工作。

问innerHTML在控制台中工作，而不是在js文件中工作。
EN

Stack Overflow用户

提问于 2018-02-16 21:05:15

回答 1查看 764关注 0票数 0

我有这样的代码：

window.addEventListener("load", function() {
 console.log("s");
 var pres = document.querySelectorAll("pre[lang]");
 console.log(pres);
 for (var i = 0; i < pres.length; i++) {
  console.log("x")
  var lang = pres[i].getAttribute("lang");
  console.log(lang);
  console.log(pres[i].innerHTML);
  pres[i].innerHTML = highlight_c(pres[i].innerHTML);
  console.log(pres[i].innerHTML);
}
});

所有console.log的工作，除了console.log(pres[i].innerHTML);。pres[i].innerHTML = highlight_c(pres[i].innerHTML);也不起作用。不过，它确实可以在控制台上工作。当我在JavaScript控制台中运行这段代码时，一切都正常！但是当它从js文件中运行时，它就不能工作了。

顺便说一句:那些乱七八糟的console.log只是为了检查我的代码是否在运行。

编辑：highlight_c函数是在另一个文件中定义的，它完全可以工作。

以下是我的HTML：

<html>
<head>
  <title>Index - C: Local documentation</title>
  <link rel="stylesheet" type="text/css" href="styles/global.css">
  <link rel="stylesheet" type="text/css" href="syntax-highlighting/styles/c.css">
  <meta charset="utf-8">
</head>
<body>
  <div id="container">
    <div id="header">
      <h1>C: Local documentation</h1>
    </div>
    <div id="content">
      <div id="nav">
        <h3>Navigation</h3>
        <ul>
          <li><a href="reading-files.html" class="selected">Reading files</a></li>
          <li><a href="page02.html">Page 02</a></li>
          <li><a href="page03.html">Page 03</a></li>
        </ul>
      </div>
      <div id="main">
        <h2>Reading files</h2>
        <p>How to read files:</p>
        <pre lang="c" src="reading-files.c"></pre>
        <p>That's it.</p>
      </div>
    </div>
    <div id="footer">
      Copyright &copy; 2018 Quintus Rijpstra.
    </div>
  </div>
  <script type="text/javascript" src="scripts/pre-load.js"></script>
  <script type="text/javascript" src="syntax-highlighting/load.js"></script>
  <script type="text/javascript" src="syntax-highlighting/scripts/c.js"></script>
</body>

pre标记没有内容，只有一个src标记，另一个函数使用它将文本加载到其中：

window.addEventListener("load", function() {
var pres = document.querySelectorAll("pre[src]");
for (var i = 0; i < pres.length; i++) {
  var src = pres[i].getAttribute("src");
  loadfile(src, load);
}
});

function load(filecontent, filename) {
var pre = document.querySelectorAll("pre[src=\"" + filename + "\"]");
for (var i = 0; i < pre.length; i++) {
  pre[i].innerHTML = filecontent;
}
}

function loadfile(filename, handler) {
var xmlrequest = new XMLHttpRequest();
xmlrequest.open("GET", filename);
xmlrequest.onreadystatechange = function() {
  if (xmlrequest.readyState == 4) {
    if (xmlrequest.status == 200) {
      var content = xmlrequest.responseText;
      handler.call(null, content, filename);
    }
  }
};
xmlrequest.send(null);
}

有谁可以帮我？提前感谢！

html

console

innerhtml

pre

javascript

回答 1

Stack Overflow用户

发布于 2018-02-16 21:51:23

而不是

var pres = document.querySelectorAll("pre[lang]");

尝试通过标签名在JS中获取“pre”标记：

var pres = document.getElementsByTagName('pre')[lang].innerHTML;

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48834839

复制

相似问题

问innerHTML在控制台中工作，而不是在js文件中工作。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问innerHTML在控制台中工作，而不是在js文件中工作。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问innerHTML在控制台中工作，而不是在js文件中工作。
EN