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

Answer 1

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.