gpt4 book ai didi

javascript - 使用 document.getElementById 不起作用

转载 作者:行者123 更新时间:2023-11-28 08:27:34 25 4
gpt4 key购买 nike

我有 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,指定.html

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

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

最佳答案

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

其次,我不确定我是否明白您想要做的事情,但您似乎想在一页中设置一个变量,然后在另一页中打印该变量而不将其存储在其他地方。

如果我是对的,你可以按照你的方式去做。您似乎不了解 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() 已经很古老了。我建议您阅读DOMpage lifecycle

关于javascript - 使用 document.getElementById 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22236599/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com