CODEWITHSUNDEEP
javascripthtmlobjectvariablesproperties
Peter
Peter

Reputation: 624

How to store a JavaScript variable inside of an object as a property

I am trying to dynamically grab the width of an image in the DOM and then store/overwrite the existing property in a previously declared JavaScript object. I am able to get the width of an image on the page and it appears that it is being stored correctly in my object defControls but the width of my #showcase remains at 600px. Any assistance on this would be much appreciated!

// USER EDITABLE CONTROLS
    var defControls = {
        content : 'img',
        showControls : true,
        prevText : '« Previous', // previous button text
        nextText : 'Next »', // next button text
        containerWidth : 600 // property to be determined by image in the DOM
    };

    // VARIABLE DECLARATIONS
    var controls = {};

    // CHECKS FOR userControls
    if (typeof userControls !== 'undefined') {
        var controls = Object.assign({}, defControls, userControls);
    } else {
        controls = defControls;
    }
    
    var contentType = $(controls.content);
    var $el = $('#showcase');
    var $leftArrow = '#left_arrow';
    var $rightArrow = '#right_arrow';
    var $load = $el.find(contentType)[0];
    
    // PRELOADS CAROUSEL WITH CORRECT SETTINGS
    $el.css('width', controls.containerWidth);
    $load.className = 'active';

    $(window).on('load', function () {
        if (controls.content == 'img') {
            controls.containerWidth = $el.children().width();
            console.log($el.children().width()); // fetches the width of the DOM img
            console.log(controls.containerWidth); // shows the width is being updated but the #showcase div remains at 600px
        }
    })
    
    // ADD CAROUSEL CONTROLS TO PAGE
    if (controls.showControls === true) {
        $('<div id="controls"><a href="#" id="' + $leftArrow.replace('#', '') + '">' + controls.prevText + '</a> <a href="#" id="' + $rightArrow.replace('#', '') + '">' + controls.nextText + '</a></div>').insertAfter('#showcase');
        $('#controls').find('#left_arrow').addClass('disabled');
    }
* {
	margin: 0px;
	padding: 0px;
}

#showcase {
	overflow: hidden;
	background: green;
}

img {
	width: 268px; /* Temporary - image width will be adjusted in the JS */
}

a {
	color: blue;
}

.disabled {
	color: red !important;
}

.slide {
	display: none;
	opacity: 0;
	position: relative;
	left: 0px;
	right: 0px;
}

.active {
	display: inline-block;
	opacity: 1;
	position: relative;
	left: 0px;
	right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
	<img class="slide" src="https://picsum.photos/458/354/?image=306" />
	<img class="slide" src="https://picsum.photos/458/354/?image=626" />
	<img class="slide" src="https://picsum.photos/458/354/?image=806" />
</div>

Upvotes: 1

Views: 2007

Answers (1)

Bergi
Bergi

Reputation: 665487

but the width of my #showcase remains at 600px

Yes, you didn't update it again. There is no way to make a property (or variable) become a magic reference so that when you update it the width of the showcase changes as well.

Just explicitly change the css after getting the width:

$(window).on('load', function () {
    if (controls.content == 'img') {
        controls.containerWidth = $el.children().width(); // fetches the width of the DOM img
        console.log(controls.containerWidth); // shows the updated width
        $el.css('width', controls.containerWidth); // updates the #showcase div with the new value
//      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    }
})

Upvotes: 1

Related Questions