Вызов двух функций - просто вопрос использования точки с запятой для их разделения. Например:
function myFunction() {
setImage();
setCaption();
}
В вашем случае это немного сложнее, так как вы обновляете изображение и вам нужно где-то сохранить URI и заголовок образа src.
В идеале вы хотите начатьдумать о разделении вашего встроенного JS и HTML. Разделение задач полезно, поскольку оно значительно облегчает написание, понимание и сопровождение кода.
В этом примере я отделил JS от HTML, чтобы сделать разметку проще для чтения. Существует контейнер (куда пойдут обновленное изображение и подпись) и пара кнопок, идентифицируемых идентификатором в атрибуте данных (я назвал их «компьютер» и «член» для удобства).
Информация об изображении и подписи теперь хранится в объекте JS с именем dict. Он содержит два объекта, идентифицируемых по ключу («компьютер» и «член»), которые содержат соответствующие данные.
Элементы кэшируются, а кнопки получают прослушиватели щелчков. При щелчке они вызывают функцию swap.
swap получает идентификатор с нажатой кнопки и вызывает getHTML, чтобы получить нужный HTML-контейнер из объекта словаря. HTML возвращается в виде строки, а контейнер HTML обновляется вместе с ним.
// The dictionary is an object that contains
// objects for each img/caption type
const dict = {
member: {
img: 'https://2.bp.blogspot.com/-lsb_v-7rE5c/XaSceQO2x9I/AAAAAAAAO5w/W-3M-Ccg6RYq73bBV7ihp7OdYzkNrIPmwCLcBGAsYHQ/s320/images%2B%25281%2529.png',
caption: 'kkkkkkkkk'
},
computer: {
img: 'https://1.bp.blogspot.com/-XvSuPCgIHrc/Xb67ueOGjeI/AAAAAAAAPL8/T4F2rs5nIkA1A_UIi7oBCvevmIl0g5pVQCLcBGAsYHQ/s1600/download.jpg',
caption: 'yyyyyyyyy'
}
};
// Cache the container and buttons
const container = document.querySelector('.container');
const buttons = document.querySelectorAll('.button');
// Add click listeners to the buttons
buttons.forEach(button => button.addEventListener('click', swap, false));
// Grabs the img and caption information from the
// dictionary using the id, and return a template literal
// describing the HTML you want to display
function getHTML(id) {
const { [id]: { img, caption } } = dict;
return `<img src="${img}" /><h3>SDMC ${caption}</h3>`;
}
// Grab the id from the element and set the container
// HTML to the returned HTML string from `getHTML`
function swap() {
const { dataset: { id } } = this;
container.innerHTML = getHTML(id);
}
.container { margin-top: 1em; }
<html>
<body>
<button class="button" data-id="member">Member</button>
<button class="button" data-id="computer">Computer</button>
<div class="container"></div>
</body>
</html>
Дополнительная литература