Javascript 创建可单击图像并对其应用单击事件侦听器

我正在尝试建立一个网站，其中有人的肖像，用户将能够点击肖像，以查看更多有关此人的信息。下面将有一个文本框，当单击每个配置文件时，该文本框将更改文本描述

我试图使图像成为一个排序按钮，然后通过java脚本应用一个单击事件来更改描述文本

以下代码是：

HTML5

我在正确的轨道上吗？我该怎么办？

---

如果您有任何帮助，我们将不胜感激。

您可以为您的图像指定一个id，如下所示：

<img id="myImage" src="Images/Logo.png" id="logoheader" class="logo" alt="CompTech Logo" />

document.getElementById("myImage").onclick = function() {
//your code here
}

编辑：

function changeDescription(description) {
document.getElementById('description').innerHTML = description;
}

<main>
        <div id="container">
            <article>
                <section id="personnel">
                    <h2>Personnel</h2>
                    <p>Find out more about the staff that you will be meeting at the event</p>
                    <a href="javascript:void(0)" onclick="changeDescription(jim)" id="jim" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(arcturus)" id="arcturus" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(sarah)" id="sarah" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(jaina)" id="jaina" class="profile"></a>
                    <div id="descriptioncontainer">
                        <p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
                    </div>
                </section>
            </article>
        </div>
    </main>

在您的例子中，您还可以使用图像源替换所有的

标记，并调用javascript函数直接在img标记属性的参数中发送描述来替换描述

例如：

在html中，对所有配置文件执行以下操作：

---

您可以按如下方式为图像分配id：

<img id="myImage" src="Images/Logo.png" id="logoheader" class="logo" alt="CompTech Logo" />

document.getElementById("myImage").onclick = function() {
//your code here
}

编辑：

function changeDescription(description) {
document.getElementById('description').innerHTML = description;
}

<main>
        <div id="container">
            <article>
                <section id="personnel">
                    <h2>Personnel</h2>
                    <p>Find out more about the staff that you will be meeting at the event</p>
                    <a href="javascript:void(0)" onclick="changeDescription(jim)" id="jim" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(arcturus)" id="arcturus" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(sarah)" id="sarah" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(jaina)" id="jaina" class="profile"></a>
                    <div id="descriptioncontainer">
                        <p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
                    </div>
                </section>
            </article>
        </div>
    </main>

在您的例子中，您还可以使用图像源替换所有的

标记，并调用javascript函数直接在img标记属性的参数中发送描述来替换描述

例如：

在html中，对所有配置文件执行以下操作：

---

首先，我认为在使用

按钮

标记时应该使用

类型

属性。其次，我认为您可以使用

标记，而不是按钮，并使用带有肖像名称的参数对其调用函数，以便您可以在函数中使用该参数作为条件，并更改描述文本。遵循以下步骤：

以下是HTML:

function changeDescription(description) {
document.getElementById('description').innerHTML = description;
}

<main>
        <div id="container">
            <article>
                <section id="personnel">
                    <h2>Personnel</h2>
                    <p>Find out more about the staff that you will be meeting at the event</p>
                    <a href="javascript:void(0)" onclick="changeDescription(jim)" id="jim" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(arcturus)" id="arcturus" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(sarah)" id="sarah" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(jaina)" id="jaina" class="profile"></a>
                    <div id="descriptioncontainer">
                        <p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
                    </div>
                </section>
            </article>
        </div>
    </main>

---

等等。。我希望你明白我的意思。

首先，我认为在使用

按钮

标记时，你应该使用

类型

属性。其次，我认为您可以使用

标记，而不是按钮，并使用带有肖像名称的参数对其调用函数，以便您可以在函数中使用该参数作为条件，并更改描述文本。遵循以下步骤：

以下是HTML:

function changeDescription(description) {
document.getElementById('description').innerHTML = description;
}

<main>
        <div id="container">
            <article>
                <section id="personnel">
                    <h2>Personnel</h2>
                    <p>Find out more about the staff that you will be meeting at the event</p>
                    <a href="javascript:void(0)" onclick="changeDescription(jim)" id="jim" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(arcturus)" id="arcturus" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(sarah)" id="sarah" class="profile"></a>
                    <a href="javascript:void(0)" onclick="changeDescription(jaina)" id="jaina" class="profile"></a>
                    <div id="descriptioncontainer">
                        <p id="description">Click on the portraits above to learn more about each member of the organisation. The description will appear here and replace this text.</p>
                    </div>
                </section>
            </article>
        </div>
    </main>

---

等等。。我希望你明白我的意思。

@Math谢谢你的帮助，你的解决方案非常有效。然而，我一直在玩它，并得出以下结论：

HTML5

全体人员
了解更多有关您将在活动中会见的员工的信息

单击上面的肖像，以了解有关组织每个成员的更多信息。说明将出现在此处并替换此文本

JS

（函数（）{
var profiles=document.getElementsByClassName（'profile'）；
var计数器；
var描述；
用于（计数器=0；计数器

@谢谢您的帮助，您的解决方案非常有效。然而，我一直在玩它，并得出以下结论：

HTML5

全体人员
了解更多有关您将在活动中会见的员工的信息

单击上面的肖像，以了解有关组织每个成员的更多信息。说明将出现在此处并替换此文本

JS

（函数（）{
var profiles=document.getElementsByClassName（'profile'）；
var计数器；
var描述；
用于（计数器=0；计数器

这还显示了通过单击事件将值应用于变量的方法这还显示了通过单击事件将值应用于变量的方法