Javascript onclick更改变量值

Question

我是JavaScript新手，我需要一些帮助。我正在制作一个网站，我有几张团队成员的图片，如果点击(所以我猜是onclick事件)，就会改变对应于该团队成员的变量值。例如，如果我在一个单独的div中点击了一张比尔盖茨的照片，我需要有一个变量(比方说名字)将值更改为比尔盖茨。然后，如果我点击史蒂夫·乔布斯的图像，包含比尔·盖茨数据的变量将被史蒂夫·乔布斯的数据覆盖。我该怎么做呢？

谢谢。

Answer 1

假设标记如下：

<div id="gallery">
    <img class="people" data-subject="Steve Jobs" src="path/to/imageOfSteve.png" />
    <img class="people" data-subject="Bill Gates" src="path/to/imageOfBill.png" />
</div>
<span id="caption"></span>

然后是一种相对简单的JavaScript方法：

function identifySubject(image, targetEl) {
    if (!image) {
        return false;
    }
    else {
        var targetNode = document.getElementById(targetEl) || document.getElementById('caption'),
            person = image.getAttribute('data-subject');
            text = document.createTextNode(person);
        if (targetNode.firstChild.nodeType == 3) {
            targetNode.firstChild.nodeValue = person;
        }
        else {
            targetNode.appendChild(text);
        }
    }
}

var images = document.getElementsByClassName('people');
for (var i=0, len=images.length; i<len; i++) {
    images[i].onclick = function(e){
         identifySubject(this, 'caption');
    };
}

JS Fiddle demo。

Answer 2

Onclick属性是正确的。您需要将javascript函数的名称添加到图像的onclick属性中(例如<img src="" onclick="changeVariable()"...)。

如果您希望页面上的文本根据您所单击的人而变化，那么您将需要考虑使用getElementById()或类似的方法在Javascript中选择InnerHTML，并查看div属性。

请参阅：http://woork.blogspot.co.uk/2007/10/how-to-change-text-using-javascript.html

Answer 3

希望这能有所帮助

<img src="path/to/image1"  onclick="getValue('bill gates')" />
<img src="path/to/image2"  onclick="getValue('steve jobs')"/>
<div id="show_value"></div>

<script>
function getValue(val){
    document.getElementById('show_value').innerHTML = val
}
</script>