指定要在其中执行Javascript函数的html文件

jw5wzhpr 于 2023-05-05 发布在 Java

关注(0)|答案(1)|浏览(187)

我有两个HTML文件：A.html和B.html。目的是统计A.html中特定DIV的数量，并在打开B.html时显示此数量。
A.html包含：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script type="text/javascript" src="style/js/scripts.js"></script>
</head>
<body>
<div class="elem1"></div>
<div class="elem2"></div>
<div class="elem2"></div>
<div class="elem2"></div>
<div class="elem1"></div>
<div class="elem2"></div>
</body>
</html>

B.html包含：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<script type="text/javascript" src="style/js/scripts.js"></script>
</head>
<body onload="CntrElem2()">
The number of elem2 in A.html is: <span id="myNum"></span>.
</body>
</html>

javascript（在style/js/scripts.js中）函数是：

function CntrElem2() {
      var NumOfElem2 = document.querySelectorAll(".elem2");
          document.getElementById("myNum").innerHTML = NumOfElem2.length;
    }

所以，这个想法是-当我打开B.html时，它从scripts.js调用CntrElem 2函数，反过来应该去计数A.html中class=“elem 2”的数量（在我的例子中= 4）并显示它。我显然得到的是= 0（因为CntrElem 2在HTML文件中对elem 2计数，它是从HTML文件中调用的，即B.html而不是A.html）。如何指定要应用querySelectorAll的HTML文件？谢谢！

JavaScript

来源：https://stackoverflow.com/questions/76165120/specifiyng-html-file-to-execute-the-javascript-function-in

1条答案

按热度按时间

ars1skjm1#

使用fetch读取A.html文档，将html放入div中并使用querySelectorAll查询div，将函数更改为以下内容：

async function CntrElem2() {
  let aHtml = await (await fetch('A.html')).text();
  let div = document.createElement('div');
  div.innerHTML = aHtml;
  let numOfElem2 = div.querySelectorAll(".elem2");
  document.getElementById("myNum").innerHTML = numOfElem2.length;
}

赞(0）回复(0）举报 2023-05-05

我来回答

指定要在其中执行Javascript函数的html文件

1条答案

相关问题

热门标签

最新问答