Annoying behaviour in JavaScript function

Question

In a web page I have 2 different galleries with several images. Each image has a button assigned in order to be deleted. I decided to use the same JavaScript function with a parameter to differentiate both galleries. These are the galleries:

        <div class="column col_12 gallery">
            {% for testrigimage in testrigimages %}
                <div id="testRigImage_{{testrigimage.id}}" class="image" align="center">
                    <a href="{{MEDIA_URL}}{{testrigimage.image}}"><img src="{{MEDIA_URL}}{{testrigimage.image}}" width="150" height="100" /></a>
                    <i id="deleteTestRigImage_{{testrigimage.id}}" class="icon-remove-sign icon-large" style="display:none;cursor:pointer;color:darkGrey;position:absolute;top:9px;left:129px;" onclick="javascript:deleteFile('{{testrigimage.id}}','0');"></i>
                    <br>
                    {{testrigimage.name}}
                </div>
            {% empty %}
                No images have been added.
            {% endfor %}
        </div>


    <div class="column col_12 gallery">
        {% for picture in pictures %}
            <div id="picture_{{picture.id}}" class="image" align="center">
                <a href="{{MEDIA_URL}}{{picture.image}}"><img src="{{MEDIA_URL}}{{picture.image}}" width="150" height="100" /></a>
                <i id="deletePicture_{{picture.id}}" class="icon-remove-sign icon-large" style="display:none;cursor:pointer;color:darkGrey;position:absolute;top:9px;left:129px;" onclick="javascript:deleteFile('{{picture.id}}','1');"></i>
                <br>
                {{picture.name}}
            </div>
        {% empty %}
            No pictures have been added.
        {% endfor %}
    </div>

As you could observe, both galleries are similar. The only difference is in the "onclick" attribute of the element. To differentiate both I pass to the function "deleteFile" an extra parameter: "0" or "1". This is the "deleteFile" function:

function deleteFile(model_id, type){

    var x = confirm('You are about to delete this picture. Are you sure?')

    if(type="0"){
        alert(type)
        url = "/tests/testSetUp/testrig/" + model_id + "/delete/"
    }else{
        alert(type)
        url = "/tests/testSetUp/pictures/" + model_id + "/delete/"
    }

    if (x) {

         $.ajax({
             type: "POST",
             url : url,
             data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
             dataType: 'text',
             success : function (data, textStatus, request) {
             data = eval("(" + data + ")");
             if (data.success) {
                var n = noty({
                    text: 'Picture successfully removed.',
                    type: 'success',
                    timeout: 750,
                    callback:{
                        afterClose: function(){location.reload()}
                    }
                });             
            }
             else {
                var n = noty({
                    text: 'Error. Please, contact with the administrator.',
                    type: 'error',
                    timeout: 3000
                });
             } 
             }
        });


    }

}

And the problems is that always print (alert) "0"! When I click in a image of the first gallery (the one with the "0" parameter), it alerts 0. When I click in a image of the second gallery, it alerts "0" too, despite having assigned "1".

Why this behaviour??

if(type="0") should be if(type=="0") or even if(type==="0"). a single "equals" sign is for assignment, and an assignment always returns true — Laurent S.
– Laurent S., Commented Jan 22, 2015 at 13:17
I still make this typo from time to time. As torazaburo mentioned, look into jshint. jshint.com will let you copy/paste or many code editors contain the functionality. — alloyking
– alloyking, Commented Jan 22, 2015 at 13:26

JLRishe · Accepted Answer · 2015-01-22 14:21:39Z

4

See this line in your code if (type="0").

To check for equality it needs to be if (type=="0") or if (type === "0").

Using a = will assign the value and evaluate to the value being assigned, while == or === will compare the two values.

edited Jan 22, 2015 at 14:21

JLRishe

102k19 gold badges138 silver badges171 bronze badges

answered Jan 22, 2015 at 13:14

alloyking

3513 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JLRishe Over a year ago

"Value assignment always returns true" This is not remotely correct. Value assignment returns the value being assigned.

alloyking Over a year ago

In the case of if(something=0) then that statement will pass or return true, it will not fail. Feel free to suggest an edit as that is how that that statement showed up in the first place.

JLRishe Over a year ago

Observe: jsfiddle.net/3ob9ekno I'll edit your post if that's what you want. The first edit should have been rejected as invalid.

Collectives™ on Stack Overflow

Annoying behaviour in JavaScript function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related