Лучше всего было бы использовать images в качестве параметра для общей функции вместо отдельной функции, специфичной для изображения.Таким образом, вы можете добавлять неограниченное количество изображений без необходимости писать дополнительную функцию для каждого изображения.
Таким образом, внутри функции change_image() правильная строка изображения просто берется из нажатой кнопки, а не из нее.будучи функцией для установки некоторой глобальной переменной.
// ImageStack mockup
function ImageStack( config ) {
this.images = config.images;
this.height = config.height;
this.width = config.width;
}
ImageStack.prototype.node = function() {
return document.createElement( 'div' ).appendChild( document.createTextNode( this.images ));
};
// click event for all the buttons
function change_image( event ) {
var image_type = event.target.getAttribute( 'data-type' );
var stack = new ImageStack({
images: `image${ image_type }`,
height: '512px',
width: '512px'
});
render( stack.node() );
}
// render function.
// Could be inside the click event, but I would prefer seperate functions.
function render( image ) {
document.querySelector('.example').appendChild( image );
}
Array.from( document.querySelectorAll( 'button' )).forEach(function( button ) {
button.addEventListener( 'click', change_image );
});
<nav>
<button data-type="st">ST</button>
<button data-type="bone">BONE</button>
<button data-type="lung">LUNG</button>
</nav>
<section class="example"></section>
РЕДАКТИРОВАТЬ:
Поскольку текст вопроса обновился и больше не содержит строку Or is there a better approach?, этот ответможет показаться странным.