Javascript 按钮是否可以在不同事件中更改其onClick信息

我正在寻找一种javascript，它允许图像/字符显示不同的信息，具体取决于单击它们时所处的章节。例如，在第一章中，我希望字符A显示信息A。但在第二章中，我希望字符A显示信息B。以下是我的当前代码：

HTML:

}

---

我不确定确切的上下文/章节内容，但看起来您可以控制章节的更改，并显示onclick章节。因此，当更改章节时，设置一个变量，例如打开

chapter1（）

然后，当根据当前章节的值单击图像时，显示与该章节相关的信息

//Chapters/Events where characters move. Need info to change on chapter move
<a href="#" onclick= "chapter1();">1-prologue</a>
<a href="#" onclick= "chapter2();">2</a>
<a href="#" onclick= "chapter3();">3</a>

//Characters moving on map that are onClick buttons to show info
<a href="#">
<img id="tyrion-map" src="sm_tyrion.png" /></a>
<a href="#">
<img id="catelyn-map" src="purple-small.png" /></a>
<a href="#">
<img id="bran-map" src="yello-small.png" /></a>

//tyrion
var tyrion = null;

//catelyn
var catelyn = null;

//bran
var bran = null;

function init(){

    "use strict"; 

    tyrion = document.getElementById("tyrion-map");
    tyrion.style.position= 'relative'; 
    tyrion.style.left = '50px';
    tyrion.style.top = '50px';

    catelyn = document.getElementById("catelyn-map");
    catelyn.style.position= 'relative'; 
    catelyn.style.left = '50px'; 
    catelyn.style.top = '50px';

    bran = document.getElementById("bran-map");
    bran.style.position= 'relative'; 
    bran.style.left = '50px'; 
    bran.style.top = '50px';

//Chapter 1- prologue
function chapter1() {

    "use strict"; 

    tyrion1();
    catelyn1();
    prologue1();
    dany1();
    bran1();
    jon1();
    eddard1();
    arya1();
    sansa1();
}   


//Chapter 2
function chapter2() {

    "use strict"; 

    tyrion2();
    catelyn2();
    dany1();
    bran2();
    jon2();
    eddard2();
    arya1();
    sansa1();
    prologue2();
}


//Chapter 3
function chapter3() {

    "use strict"; 

    tyrion3();
    catelyn1();
    dany1();
    bran3();
    jon3();
    eddard3();
    arya1();
    sansa1();
    prologue2();
}

current_chapter = 1