Change global variables by js function

Question

I wanna change a group of scrolling images by clicking on button. question here is how to change the global variables by these function please see the attached codes,

I wanna initiate the stack() function when onload and change the scrolling images set by onclick;

Should I add an onload event and seperately call the stack() funtions, only using the local var? thanks, Joe

var images = imagest;

function softtissue(){

    var images = imagest;
}

function bone(){

    var images = imagebone;

}
function lung(){
    var images = imagelung;
}
var stack = new ImageStack({
  images: images,
  height: '512px',
  width: '512px'
});
document.querySelector('.example').appendChild(stack);

 // how to use the funciton on line 94 // for questions email felix@demont.is var images10 = [ "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg" ]; var imagesbone = [ "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg", "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg" ]; var imageslung = [ "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg", "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg", "https://igu3ss.files.wordpress.com/2012/09/chess_king_4.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Chess_piece_-_Black_queen.JPG/130px-Chess_piece_-_Black_queen.JPG", "https://asmoodle.asmadrid.org/blog/s16240/wp-content/uploads/sites/56/2014/12/protourney_knight_black_400.jpg", "https://thumbs.dreamstime.com/x/chess-knight-white-background-29811348.jpg", "http://cdn.craftsy.com/upload/3703789/pattern/115774/full_7439_115774_ChessKnightMachineEmbroideryDesign_1.jpg" ]; function ImageStack(options) { var self = this; self.img_array = options.images; self.stack = document.createElement('div'); self.stack.style.overflow = 'auto'; self.stack.style.maxWidth = '100%'; self.stack.style.height = options.height; self.stack.style.width = options.width; self.stack.style.backgroundSize = 'cover' self.stack.style.position = 'relative'; var typeRegex = /(\\D+)/ var sizeType = options.height.match(typeRegex)[0] var numberRegex = /(\\d+)/ self.height_number = Number(options.height.match(numberRegex)[0]) self.wrapper = document.createElement('div'); for (var i = 0; i < self.img_array.length; i++) { var image = document.createElement('img'); image.src = self.img_array[i]; image.style.display = 'none'; image.style.position = 'absolute'; image.style.width = options.width; image.style.height = options.height; image.style.top = 0; image.style.left = 0; image.dataset.iid = i; self.wrapper.appendChild(image); } self.image_elements = self.wrapper.querySelectorAll('img'); self.scrollobject = document.createElement('div'); self.scrollobject.style.width = '100%'; self.scrollobject.style.position = 'absolute'; self.scrollobject.style.zIndex = '2'; self.img_count = (self.img_array.length > 15) ? self.img_array.length : 15; self.scrollobject_height = Math.floor(0.1 * self.img_count * self.height_number); self.scrollobject.style.height = self.scrollobject_height + sizeType; self.scrollUpdate = function(e) { self.height_number = self.stack.getBoundingClientRect().height self.scrollobject_height = Math.floor(0.1 * self.img_count * self.height_number); var sT = self.stack.scrollTop var hn05 = self.img_array.length - 1 var hh = (self.scrollobject_height - self.height_number) / hn05 scrollval = Math.floor(sT / (hh)) self.currentimg = self.image_elements[scrollval].src self.stack.style.backgroundImage = 'url(' + self.currentimg + ')'; } self.stack.addEventListener('scroll', self.scrollUpdate); self.currentimg = self.image_elements[0].src self.stack.style.backgroundImage = 'url(' + self.currentimg + ')'; window.addEventListener('resize', function() { var stackRect = self.stack.getBoundingClientRect() console.log(stackRect) self.height_number = stackRect.height self.scrollobject_height = Math.floor(0.1 * self.img_array.length * self.height_number); self.stack.style.width = stackRect.width + 'px' self.stack.style.eight = stackRect.width + 'px' }) self.stack.appendChild(self.wrapper); self.stack.appendChild(self.scrollobject); return self.stack; } /*problems here*/ /*global var*/ var images = images10; /*local var*/ function softtissue() { var images = images10; } function bone() { var images = imagesbone; } function lung() { var images = imageslung; } /*how to switch the local var in global function*/ var stack = new ImageStack({ images: images, height: '512px', width: '512px' }); document.querySelector('.example').appendChild(stack); 

 <div> <button id="softtissue" type="button" onclick="softtissue();return false" class="button"> Soft Tissue</button> <button id="bone" type="button" onclick="bone(); return false;" class="button"> Bone</button> <button id="lung" type="button" onclick="lung(); return false" class="button"> Lung</button> </div> <div class="example"> </div> 

Answer 1

var images = imagebone; never changes the global but it initializes a local variable. It creates a local variable images inside the function. You shouldn't use var inside functions

function softtissue(){
    images = imagest;
}
function bone(){
    images = imagebone;
}
function lung(){
    images = imagelung;
}

Answer 2

A better approach would be to use images as a parameter to a general function instead of a separate function specific to the image. That way you can add unlimited amounts of images without the need to write an extra function for each image.

So inside the change_image() function, the correct image string just gets taken from the button clicked, instead of there being a function to set some global variable.

 // 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> 

EDIT:

Since the question text got updated and no longer includes the line Or is there a better approach? , this answer might seem weird.

Answer 3

One approach is changing the varibility of the image

adding variability ="hidden" in the imagestack and after creating these three boxes, onclickfunction onlick choose which one to show