Question

我有2个html文件和一个外部js文件。第一个html文件打印出图像及其名称。图像是可点击的，它们的名称存储在外部js文件中的2个数组中。单击图像时，我想获取外部js文件中单击图像的名称，并在第二个html文件中打印该图像。

第一个html文件

<body>
   <p>
   <script type = "text/javascript">
      for (var i = 0; i < pic.length; i++) {
          document.write("<a href=\"specify.html\"><img id=\"image\" src = \" " + pics[i] + "\"></a>" + "<br>");
          document.write(name[i] + "<br>");
      }
  </script>
  <p>
</body>

外部js文件，假设数组不为空。

var pic = new Array();
var name = new Array();
var image = document.getElementById("image").src;

第二个html，指定了

document.write("<img src = \" " + image + "\">" + "<br>");

图像变量的值未定义。我不知道我做错了什么，请帮忙。

Answer 1

首先，正如@Aziz-Saleh所指出的，你不应该在你的页面中重复id。尝试在ID中添加一个数字。

其次，我不确定我是否得到你要做的事情，但似乎你想在一个页面中设置一个变量，并将该变量打印在另一个页面而不将其存储在其他地方。 / em>

如果我是对的，你可以按照自己的方式去做。您似乎无法理解HTML页面或HTTP的工作方式。

每个HTML页面都像一个不同的应用程序。每次加载页面时，都会解析并执行外部js文件。加载它之前没多少次，或者你对变量做了什么修改。加载新页面时，所有内容都会获得默认值。因此，即使您在第一页中设置了图像文件，它也会在第二页中未定义，直到您为其指定值。

试试这个：

<body> <p> <script type = "text/javascript"> for (var i = 0; i < pic.length; i++) { document.write('<a class="images" href="specify.html"><img src="' + pics[i] + '\" data-index="' + i + '"></a><br>' + name[i] + '<br>'); } document.addEventListener('click', function(e) { var index = this.getAttribute('data-index'); if (index !== undefined) { document.location = 'specify.html#' + index; e.preventDefault(); } }, false); </script> <p> </body>

在specify.html ...

var index = document.location.hash.substr(1); document.write("<img src = \" " + pics[index] + "\">" + "<br>");

我正在做的，基本上是获取点击图像的索引，并请求第二页将此索引作为URL的一部分传递。在第二页中，我从哈希部分（在#之后放置的URL中的部分）返回该索引，然后写入与索引对应的图像。

正如人们所指出的那样，document.write（）已经很老了。我建议您阅读DOM和page lifecycle

使用document.getElementById不起作用

1 个答案: