可以't将属性src设置为null,即使DOM已准备就绪
Can't set property src of a null even though DOM is ready
所以基本上我有这个表,里面有六个图像,作为一个不错的图像库。在底部的导航栏上,我有一个javascript函数,当用户单击时,它应该使用一组图像文件源来更改表中图像元素的各个标签。所有的javascript都应该在DOM准备就绪时执行。问题是,当我试图点击底部的导航栏时,我会得到"无法设置null的src值",这让我觉得数组工作不正常,或者它没有按照预期的方式调用元素。
这是创建表、提取图像并在DOM准备好时将其粘贴到javascript数组中的PHP脚本。我私下怀疑,问题的一部分是,除非在应该创建javascript数组的部分后面包含两个</script>
,否则代码不会执行。
<?php
$directory = 'images/gallery/';
$files1 = scandir($directory);
$length = count($files1);
echo "<script $( document ).ready(function() {";
$y = 2;
for ($x = 0; $x < $length-2; $x++) {
echo "images[$x] = 'Images/gallery/$files1[$y]';";
$y= $y + 1;
}
echo "});";
echo"</script>";
echo"</script>";
echo "<table><tr>";
for ($i = 2; $i <= 7; $i++) {
if ($i == 5) {
echo "</tr><tr>";
}
echo "<td class='galleryImageWrapper'><a href='images/gallery/$files1[$i]' data-lightbox='Gallery'><img id='$i' src='images/gallery/$files1[$i]'></a></td>";
}
echo "</tr></table>";
echo "<div id='galleryNavWrapper'><div onclick='advanceLeft()' id='leftbutton'>⇐ </div><ul id='galleryNav'>";
for ($i = 1; $i <= ($length / 6); $i++) {
echo "<li onclick='galleryNavButton(this.value)'>$i</li>";
}
echo '</ul><div id="rightButton" onclick = "advanceRight()">⇒</div>';
?>
这是HTML代码
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Perspective by Daniel Streich</title>
<link rel="stylesheet" type="text/css" href="scripts/css.css">
<link href="css/lightbox.css" rel="stylesheet">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
</head>
<body>
<script>
var i = 0;
var images = new Array();
/*
$( document ).ready(function() {
document.write("well this be working");
});*/
function advanceLeft() {
if (i == 0) {
return false;
} else {
i = i - 6;
for (var x = i; x <= 5; x++) {
document.getElementById(x).src = images[x];
return true;
}
}
}
function advanceRight() {
if (i == images.length - 1) {
return false;
} else {
i = i + 6;
for (var x = i; x <= 5; x++) {
document.getElementById(x).src = images[x];
return true;
}
}
}
function galleryNavButton(newId) {
i = i - ((i - newId) * 6);
for (var x = i; i <= 5; x++) {
document.getElementById(x).src = images[x];
return true;
}
}
</script>
<?php
$active = "Art";
include ('menu.php');
?>
<div class="wrapperRegular">
<p class="bigTitle">
Perspective by Daniel
</p>
<p class='actualText'>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</p>
<?php
include ('gallery.php');
?>
<br>
<div id="footer">
Copyright © Perspective by Daniel
</div>
</div>
</body>
如果有人能弄清楚这一点,我将非常感激,因为我一辈子都无法得到它
用以下内容替换<script>
内容:
$( document ).ready(function() {
var i = 0;
var images = new Array();
/*
$( document ).ready(function() {
document.write("well this be working");
});*/
function advanceLeft() {
if (i == 0) {
return false;
} else {
i = i - 6;
for (var x = i; x <= 5; x++) {
document.getElementById(x).src = images[x];
return true;
}
}
}
function advanceRight() {
if (i == images.length - 1) {
return false;
} else {
i = i + 6;
for (var x = i; x <= 5; x++) {
document.getElementById(x).src = images[x];
return true;
}
}
}
function galleryNavButton(newId) {
i = i - ((i - newId) * 6);
for (var x = i; i <= 5; x++) {
document.getElementById(x).src = images[x];
return true;
}
}
});
使用jQuery处理点击的示例:echo'⇒;';成为:echo'⇒;';
在JQuery脚本中,您只需执行以下操作:
$( document ).ready(function() {
var i = 0;
var images = new Array();
/* This is how you would handle the click */
$('#rightButton').click(function(){
advanceRight();
});
function advanceLeft() {
if (i == 0) {
return false;
} else {
i = i - 6;
for (var x = i; x <= 5; x++) {
document.getElementById(x).src = images[x];
return true;
}
}
}
function advanceRight() {
if (i == images.length - 1) {
return false;
} else {
i = i + 6;
for (var x = i; x <= 5; x++) {
document.getElementById(x).src = images[x];
return true;
}
}
}
function galleryNavButton(newId) {
i = i - ((i - newId) * 6);
for (var x = i; i <= 5; x++) {
document.getElementById(x).src = images[x];
return true;
}
}
});
希望对有所帮助
相关文章:
- 数组在递归方法中设置为null
- 字符串在将其传递给另一个活动Android JavaScript时读取Null
- 无法获取属性'selectedIndex'的未定义引用或null引用
- if(foo!==null)的计算结果为true,即使foo为null
- Javascript Float32数组抛出无法读取属性'0'即使数组定义良好,也为null
- 即使在 DOM 加载后也无法设置 null 的 .innerHTML
- 可以't将属性src设置为null,即使DOM已准备就绪
- Auth$getUser返回null,即使用户已登录(AngularFire,Firebase)
- 我得到未捕获的类型错误:无法读取属性'选项'即使定义了元素id,也为null
- 为什么我的所有父函数都返回null,即使有父函数
- 即使使用jQuery DOM就绪事件,也无法调用null的方法addEventListener()
- ResponseText 为 null,即使它应该设置为 JavaScript
- 为什么即使我已经订阅了该集合(Meteor),文档仍返回 null
- Javascript:即使给定值,参数也设置为null
- 为什么当获得nodeValue时,即使它显示正确,null也会回来
- getEval在Selenium上返回null,即使javascript在控制台中返回值
- Javascript错误:无法获取值,即使它不是null
- 即使声明并初始化了变量,xpagegetComponent也总是返回null
- 数组表示null,即使正在设置索引
- document.getElementById null 和/或不起作用,即使它在那里并且加载后也是如此