使用document.getElementById无法正常工作

Question

I have 2 html files and an external js file. 我有2个html文件和一个外部js文件。 The first html file prints out images and their names. 第一个html文件将打印出图像及其名称。 The images are clickable and their names are stored in 2 arrays in the external js file. 这些图像是可单击的，它们的名称存储在外部js文件中的2个数组中。 When the image is clicked, I want to get the name of the clicked image in the external js file and print that image in the second html file. 单击图像时，我想在外部js文件中获得单击图像的名称，然后在第二个html文件中打印该图像。

1st html file 第一个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>

External js file, assume that the arrays are not empty. 外部js文件，假定数组不为空。

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

2nd html, specify.html 第2个html，specify.html

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

The value of the image variable is undefined. image变量的值是不确定的。 I don't know what I'm doing wrong, please help. 我不知道自己在做什么错，请帮忙。

Answer 1

First of all, as pointed out by @Aziz-Saleh, you shouldn't repeat ids in your page. 首先，正如@ Aziz-Saleh所指出的那样，您不应在页面中重复ID。 Try adding a number to the id. 尝试在ID上添加一个数字。

Secondly, I'm not sure if I get what you're trying to do, but it seems you want to set a variable in one page, and print that variable in another page without storing it elsewhere. 其次，我不确定我是否知道要执行的操作，但是看来您想在一个页面中设置一个变量，然后在另一个页面中打印该变量而不将其存储在其他位置。

If I'm correct, you can do it the way you're doing. 如果我是对的，您可以按照自己的方式来做。 It seems you don't understand how HTML pages, or HTTP, works. 似乎您不了解HTML页面或HTTP如何工作。

Each HTML page is like a differente application. 每个HTML页面就像一个不同的应用程序。 Each time your page loads, the external js file is parsed and executed. 每次页面加载时，都会解析并执行外部js文件。 It doesn't matter how many times before you had loaded it, or what modificiatons you had made to the variables. 加载多少次或对变量进行何种修改都无所谓。 When a new page loads, e everything gets it's default value. 加载新页面时，所有内容都会恢复为默认值。 So, even if you set the image file in the first page, it is undefined in the second, until you assign a value to it. 因此，即使您在第一页中设置了图像文件，在第二页中也未定义图像文件，直到为其分配值为止。

Try this: 尝试这个：

<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>

In specify.html ... 在specify.html ...

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

What I'm doing, basically, is get the index of the image clicked and request the second page passing this index as part of the URL. 基本上，我正在做的是获取所单击图像的索引，并请求第二个页面将此索引作为URL的一部分传递。 In the second page, I get that index back fromt the hash part (the part in a url that it's placed after an # ) and then write the image that corresponds to the index. 在第二页中，我从哈希部分（位于#后面的url部分）中获取该索引，然后编写与该索引对应的图像。

As othe people has pointed, document.write() is very old. 正如其他人所指出的那样，document.write（）很老。 I suggest you to read about the DOM and the page lifecycle 我建议您阅读有关DOM和页面生命周期的信息

使用document.getElementById无法正常工作

问题描述

1 个解决方案

解决方案1
0 2014-03-06 22:06:28

使用document.getElementById无法正常工作

问题描述

1 个解决方案

解决方案1 0 2014-03-06 22:06:28

解决方案1
0 2014-03-06 22:06:28