Change object value jquery

Question

I have a problem in my jQuery. Can someone help me fix it? I have my code on jsfiddle here:

My problem is, I want to change image source_image_width and height to other size. Is it possible on my code?

This is my jQuery:

$(function () {
    var value = {};

    value = {
        "zoom_element": '#zoom',
        "magnifier_opacity": 1,
        "source_image_width": 200,
        "source_image_height": 200,
    };

    $(".klik").click(function () {
        console.log("Klik");
        value = {
            zoom_element: '#zoom',
            magnifier_opacity: 1,
            source_image_width: 2,
            source_image_height: 100,
        };
    });

    $('#etalage').etalage(value);

    console.log(value);
});

**Possibly** a duplicate of [*How to return the response from an asynchronous call?*](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call), but I'll leave it to others to make the call (if I voted, Mjolnir would kick in). — T.J. Crowder, Nov 04 '15 at 14:43
I understand, you want that: http://jsfiddle.net/tbk5tuj9/9/ ??? — A. Wolff, Nov 04 '15 at 14:44
thanks for comment A.Wolff , but when i click "klik", it make some picture again sir @A.Wolff — arickanjass, Nov 04 '15 at 14:57

T.J. Crowder · Answer 1 · 2015-11-04T14:48:02.710

Your code is completely replacing the value object, successfully. The only (real) issue is that your console.log is outside your click handler. If you want to see value as it is after clicking it, you need to move that into your click handler.

Lesser issues are that you're creating an object here:

var value = {};

...that you then throw away entirely and replace here:

value = {
    "zoom_element": '#zoom',
        "magnifier_opacity": 1,
        "source_image_width": 200,
        "source_image_height": 200,
};

Those could be combined, or just leave the = {} off the var line.

Also, if you just want to modify your object, you can just assign to its properties, e.g.:

value.magnifier_opacity = 1;

Example that just moves the console.log but still replaces the entire object:

$(function() {
  var value = {};

  value = {
    "zoom_element": '#zoom',
    "magnifier_opacity": 1,
    "source_image_width": 200,
    "source_image_height": 200,
  };

  $(".klik").click(function() {
    snippet.log("Klik");
    value = {
      zoom_element: '#zoom',
      magnifier_opacity: 1,
      source_image_width: 2,
      source_image_height: 100,
    };
    snippet.log(JSON.stringify(value)); // <========= Moved and
                                        // adjusted for demo
  });

  // $('#etalage').etalage(value); Commented out for demo
});

<input type="button" class="klik" value="Click me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

thanks for your answer and solution sir. i try it but still no changes at my source image width and height. my problem is when i click, it changes source image width and height and reload $('#etalage') with new object — arickanjass, Nov 04 '15 at 15:20

Change object value jquery

1 Answers1