Javascript getElementsByClassName不'；不能在div元素中工作_Javascript_Html

Javascript getElementsByClassName不'；不能在div元素中工作

javascript html

Javascript getElementsByClassName不'；不能在div元素中工作,javascript,html,Javascript,Html,我有两个HTML文件Home.HTML和test.HTML。我正在使用javascript将test.html加载到Home.html中的一个DIV中。当我尝试使用getElementsByClassName获取Test.html中的元素时，它不会返回任何内容。我做错了什么？当我点击Home.html页面中的URL时，它应该加载如下右键？为什么不呢 1.jpg 2.jpg 我看了贴在这里的其他问题，但没有找到问题所在。我在Windows7的chrome上运行了这个我是新的HTML设计，请温

我有两个HTML文件Home.HTML和test.HTML。我正在使用javascript将test.html加载到Home.html中的一个DIV中。当我尝试使用getElementsByClassName获取Test.html中的元素时，它不会返回任何内容。我做错了什么？当我点击Home.html页面中的URL时，它应该加载如下右键？为什么不呢

1.jpg
2.jpg

我看了贴在这里的其他问题，但没有找到问题所在。我在Windows7的chrome上运行了这个

我是新的HTML设计，请温柔

Home.html

<html>
<head></head>
<body>

<script type="text/javascript">
var x;
var i;
var txt;
function foo()
{
    x = document.getElementsByClassName("gallery");
    for (i = 0; i < x.length; i++) {
            txt = txt + x.elements[i].src + "<br>";
    }
    document.getElementById("txt").innerHTML='<object type="text/html" data=txt ></object>';
}
function load_test(){
        document.getElementById("content").innerHTML='<object type="text/html" data="test.html" ></object>';
}
</script>

<div id="topBar"> 
    <a href ="#" onclick="load_test()"> HOME </a> 
    <a href ="#" onclick="foo()"> URLs </a>
</div>

<div id="content"> </div>

<div id="txt"> </div>

<div id="test"> 
    <img class="gallery" id="gallery" src="1.jpg" border="0" />
    <img class="gallery" src="2.jpg" border="0" /> 
</div>

</body>
</html>


var x；
var i；
var-txt；
函数foo（）
{
x=document.getElementsByClassName（“图库”）；
对于（i=0；i”；
}
document.getElementById（“txt”）.innerHTML=''；
}
功能负载测试（）{
document.getElementById（“内容”）.innerHTML=''；
}

Test.html

aaaaaaaaaaaaaaaaaaaaaaaaaa
</br><img class="gallery" id="gallery" src="1.jpg" border="0" />
</br><img class="gallery" src="2.jpg" border="0" />

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

由于JavaScript的作用域规则，它找不到您的foo函数

如果您希望foo在全球范围内可访问，请按以下方式定义：

document.foo = function()
{
//...etc

有几件事不对

txt

需要初始化为空字符串，因为您要附加到它

没有名为

元素的属性

；相反，它是由

getElementsByClassName（）

返回的元素数组，在本例中，它们是

属性
我不确定为什么要使用
标记，因为您正在循环中构建一个HTML字符串。试一试：
    var x;
    var i;
    var txt = "";
    function foo() {
        x = document.getElementsByClassName("gallery");
        for (i = 0; i < x.length; i++) {
            //txt = txt + x.elements[i].src + "<br>";
            txt = txt + x[i].src.replace(/^.*[\\\/]/, '') + "<br/>";    // use this regex to get only the filename as in your example
        }
        //document.getElementById("txt").innerHTML = '<object type="text/html" data=txt ></object>';
        document.getElementById("txt").innerHTML = txt;
    }
    function load_test() {
        document.getElementById("content").innerHTML = '<object type="text/html" data="test.html" ></object>';
    }

varx；
var i；
var txt=“”；
函数foo（）{
x=document.getElementsByClassName（“图库”）；
对于（i=0；i”；
txt=txt+x[i].src.replace（//^.[\\/]/，''）+“
”；//使用此正则表达式仅获取示例中的文件名
}
//document.getElementById（“txt”）.innerHTML=''；
document.getElementById（“txt”）.innerHTML=txt；
}
功能负载测试（）{
document.getElementById（“内容”）.innerHTML=''；
}
在数组x
中没有名为元素的属性。在迭代元素时，设置vartxt
的行需要如下所示：
txt = txt + x[i].src + "<br>";

txt=txt+x[i].src+“
”；
不确定load\u test（）函数应该做什么，但我对html做了一些更改，以实现我认为您正在尝试的功能
<html>
<head></head>
<body>

<script type="text/javascript">
var x;
var i;
var txt = "";
function foo()
{
    x = document.getElementsByClassName("gallery");
    for (i = 0; i < x.length; i++) {
            txt = txt + x[i].src + "<br>";
    }
    document.getElementById("txt").innerHTML=txt;
}
function load_test(){
        document.getElementById("content").innerHTML='<object type="text/html" data="test.html" >      </object>';
}
</script>

<div id="topBar"> 
<a href ="#" onclick="load_test()"> HOME </a> 
<a href ="#" onclick="foo()"> URLs </a>
</div>

<div id="content"> </div>

<div id="txt"> </div>

<div id="test"> 
    <img class="gallery" id="gallery" src="1.jpg" border="0" />
    <img class="gallery" src="2.jpg" border="0" /> 
</div>

</body>
</html>


var x；
var i；
var txt=“”；
函数foo（）
{
x=document.getElementsByClassName（“图库”）；
对于（i=0；i”；
}
document.getElementById（“txt”）.innerHTML=txt；
}
功能负载测试（）{
document.getElementById（“内容”）.innerHTML=''；
}

我基本上改变的是，您的txt变量没有初始化，您在一个数组上使用了一个不存在的“elements”属性，您只需要使用索引来访问它。
有几个问题：
变量“txt”需要在函数“foo（）”中定义；您试图在函数外部定义它，但实际上您在这里定义它：txt=txt+x.elements[i].src+“
”txt=txt+…
），因此它将包含单词“undefined”。（希望这是有道理的。）

用于获取图像源的代码不正确；使用x[i].src来代替x.elements[i].src

第二个HTML文件中的内容需要使用ajax获取。为此，我将创建一个隐藏的div，这样您就可以将第二个HTML文件中的内容加载到其中，然后在脚本中使用它。（在下面的示例中，我为隐藏的div指定了id=“ajaxContent”。）
以下是我将如何更改您的脚本：
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        xmlhttp.responseText;
        document.getElementById("ajaxContent").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET","test.html",true);
xmlhttp.send();

function foo()
{
    x = document.getElementsByClassName("gallery");
    txt = '';
    for (i = 0; i < x.length; i++) {
        txt = txt + x[i].src + "<br>";
    }
    document.getElementById("txt").innerHTML = txt;
}

var-xmlhttp；
xmlhttp=新的XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
xmlhttp.responseText；
document.getElementById（“ajaxContent”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”，“test.html”，true）；
xmlhttp.send（）；
函数foo（）
{
x=document.getElementsByClassName（“图库”）；
txt=''；
对于（i=0；i”；
}
document.getElementById（“txt”）.innerHTML=txt；
}

以及Home.HTML的“新”HTML（仅底部隐藏的div）：


这里有一个小问题（没有ajax部分——我认为您无法使用JSFIDLE实现ajax）：
（我不知道你在用“object”这个东西做什么，所以在我的脚本中我把它改成只输出文本…
那么它也应该找不到load_test（），对吗？但该函数运行良好！编辑：尝试了上面的语法，但无效。当我尝试运行“document.getElementsByClassName（“gallery”）；”时在chrome控制台中，我没有从Test.html获取元素，但是DIV（id=“Test”）中的元素返回良好。奇怪…可能是重复的谢谢！问题出在这些元素上。我从W3Schools网站上得到了这种语法，但我没有意识到这是错误的。编辑：该死，我以为这就解决了。没有，Test.html中的img元素仍然不可访问。该死，我以为解决了。事实并非如此，Test.html页面（加载到Home.html的DIV中）中的img元素仍然无法访问。请参阅Dave对原始问题的评论。您需要做的是加载对象
，然后运行类似document.getElementById（'content'）.getElementsByClassName（'gallery'）在里面搜索（这确实不起作用，但这就是想法）。该死，我以为这解决了问题。没有，
<div id="topBar"> 
    <a href ="#" onclick="load_test()"> HOME </a> 
    <a href ="#" onclick="foo()"> URLs </a>
</div>

<div id="content"> </div>

<div id="txt"> </div>

<div id="test"> 
    <img class="gallery" id="gallery" src="1.jpg" border="0" />
    <img class="gallery" src="2.jpg" border="0" /> 
</div>

<div id="ajaxContent" style="display: none;"></div>