html javascript_Javascript_Html - Fatal编程技术网

html javascript

javascript html

html javascript,javascript,html,Javascript,Html,我对javascript有问题。我需要为页面中的所有img标记添加onclick监听器，所以单击图像应该调用imageClicked并将元素传递给函数。但此代码始终将img src=“../images/3.jpg”传递给函数 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htm

我对javascript有问题。我需要为页面中的所有img标记添加onclick监听器，所以单击图像应该调用imageClicked并将元素传递给函数。但此代码始终将img src=“../images/3.jpg”传递给函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Page</title>
</head>

<body onload="start()">
<script type="text/javascript">
    function start(){
        var images = document.getElementsByTagName("img");
        for ( var i = 0; i < images.length; i++) {
            var image=images[i];
            image.addEventListener('click', function(){
                imageClicked(image);
            });
        }
    }
    function imageClicked(image){
        alert(image.src)
    }
</script>
<div id="main">
    <div id="center">
        <button>نمایش اسلایدی</button>
    </div>
    <div id="gallery">
        <div id="img1" class="image">
            <img src="../images/1.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img2" class="image">
            <img src="../images/2.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img" class="image">
            <img src="../images/3.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
    </div>
</div>

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', function(){
            imageClicked(this);
        });
    }
}

// Or even better

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', imageClicked);
    }
}
function imageClicked(){
    alert(this.src); // this refers to the image
}


样本页
函数start（）{
var images=document.getElementsByTagName（“img”）；
对于（var i=0；i



这是因为范围。每次循环时，图像值都会再次设置。因此，它将始终传递循环中的最后一个图像
你可以做两件事。使用如下所示的此
。或者创建一个匿名函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Page</title>
</head>

<body onload="start()">
<script type="text/javascript">
    function start(){
        var images = document.getElementsByTagName("img");
        for ( var i = 0; i < images.length; i++) {
            var image=images[i];
            image.addEventListener('click', function(){
                imageClicked(image);
            });
        }
    }
    function imageClicked(image){
        alert(image.src)
    }
</script>
<div id="main">
    <div id="center">
        <button>نمایش اسلایدی</button>
    </div>
    <div id="gallery">
        <div id="img1" class="image">
            <img src="../images/1.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img2" class="image">
            <img src="../images/2.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img" class="image">
            <img src="../images/3.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
    </div>
</div>

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', function(){
            imageClicked(this);
        });
    }
}

// Or even better

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', imageClicked);
    }
}
function imageClicked(){
    alert(this.src); // this refers to the image
}

函数开始（）{
var images=document.getElementsByTagName（“img”）；
对于（var i=0；i

匿名功能：
function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        (function(image){
            image.addEventListener('click', function(){
                imageClicked(image); // Use the element clicked object (this)
            });
        })(images[i]);
    }
}

函数开始（）{
var images=document.getElementsByTagName（“img”）；
对于（var i=0；i
这是因为范围。每次循环时，图像值都会再次设置。因此，它将始终传递循环中的最后一个图像
你可以做两件事。使用如下所示的此
。或者创建一个匿名函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Page</title>
</head>

<body onload="start()">
<script type="text/javascript">
    function start(){
        var images = document.getElementsByTagName("img");
        for ( var i = 0; i < images.length; i++) {
            var image=images[i];
            image.addEventListener('click', function(){
                imageClicked(image);
            });
        }
    }
    function imageClicked(image){
        alert(image.src)
    }
</script>
<div id="main">
    <div id="center">
        <button>نمایش اسلایدی</button>
    </div>
    <div id="gallery">
        <div id="img1" class="image">
            <img src="../images/1.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img2" class="image">
            <img src="../images/2.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img" class="image">
            <img src="../images/3.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
    </div>
</div>

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', function(){
            imageClicked(this);
        });
    }
}

// Or even better

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', imageClicked);
    }
}
function imageClicked(){
    alert(this.src); // this refers to the image
}

函数开始（）{
var images=document.getElementsByTagName（“img”）；
对于（var i=0；i

匿名功能：
function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        (function(image){
            image.addEventListener('click', function(){
                imageClicked(image); // Use the element clicked object (this)
            });
        })(images[i]);
    }
}

函数开始（）{
var images=document.getElementsByTagName（“img”）；
对于（var i=0；i
您想要的是这样的：
function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', function(){
            imageClicked(this);
        });
    }
}
function imageClicked(image){
    alert(image.src)
}

函数开始（）{
var images=document.getElementsByTagName（“img”）；
对于（var i=0；i

在编写的代码中，您复制了image元素，然后将eventListener分配给对象的副本。因为此副本被多次重写，imageClicked被唯一一个没有被重写的引用，即最后一个图像。此
是指回调函数中的实际图像元素。
您需要的是如下内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Page</title>
</head>

<body onload="start()">
<script type="text/javascript">
    function start(){
        var images = document.getElementsByTagName("img");
        for ( var i = 0; i < images.length; i++) {
            var image=images[i];
            image.addEventListener('click', function(){
                imageClicked(image);
            });
        }
    }
    function imageClicked(image){
        alert(image.src)
    }
</script>
<div id="main">
    <div id="center">
        <button>نمایش اسلایدی</button>
    </div>
    <div id="gallery">
        <div id="img1" class="image">
            <img src="../images/1.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img2" class="image">
            <img src="../images/2.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img" class="image">
            <img src="../images/3.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
    </div>
</div>

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', function(){
            imageClicked(this);
        });
    }
}

// Or even better

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', imageClicked);
    }
}
function imageClicked(){
    alert(this.src); // this refers to the image
}

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', function(){
            imageClicked(this);
        });
    }
}
function imageClicked(image){
    alert(image.src)
}

函数开始（）{
var images=document.getElementsByTagName（“img”）；
对于（var i=0；i

在编写的代码中，您复制了image元素，然后将eventListener分配给对象的副本。因为此副本被多次重写，imageClicked被唯一一个没有被重写的引用，即最后一个图像。此
是指回调函数中的实际图像元素。标题与标记不同stitle与标记不同
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Page</title>
</head>

<body onload="start()">
<script type="text/javascript">
    function start(){
        var images = document.getElementsByTagName("img");
        for ( var i = 0; i < images.length; i++) {
            var image=images[i];
            image.addEventListener('click', function(){
                imageClicked(image);
            });
        }
    }
    function imageClicked(image){
        alert(image.src)
    }
</script>
<div id="main">
    <div id="center">
        <button>نمایش اسلایدی</button>
    </div>
    <div id="gallery">
        <div id="img1" class="image">
            <img src="../images/1.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img2" class="image">
            <img src="../images/2.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
        <div id="img" class="image">
            <img src="../images/3.jpg"></img>
            <div id="title">
                <label>عکس</label>
            </div>
        </div>
    </div>
</div>

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', function(){
            imageClicked(this);
        });
    }
}

// Or even better

function start(){
    var images = document.getElementsByTagName("img");
    for ( var i = 0; i < images.length; i++) {
        images[i].addEventListener('click', imageClicked);
    }
}
function imageClicked(){
    alert(this.src); // this refers to the image
}