CODEWITHSUNDEEP
jquery
George Howell
George Howell

Reputation: 47

in an if/else statement, e.preventDefault() is not performing 100% to the conditions

This function (using option:selected) changes the CSS and HTML of <div class="item">0</div> to simulate a kind of progress bar app. The problem is that it exceeds 100%. So the if statements are not correct or something here is wrong? Any clues?

$(function(){
    $('#selectChoice').change(function() {
        $('option:selected', this).each(function() {
            var id = $('#selectChoice option:selected').attr('id');
            $('#' + id + 'Item').css("color", "#f00").css("font-weight", "bold");
        });
    });

    $('#plus25').on('click', function() {
        var id = $('#selectChoice option:selected').attr('id');
        $('#' + id + 'Item').html(function(i, value) {
            var newWidth = parseInt(value * 1 + 25);
            var e = window.event;
            $('#' + id + 'Item').css('width', newWidth + '%');
            if (value <= 75){
                return newWidth;
            } else { 
                e.PreventDefault();}
            });
        });
    });

The following condition is also doing strange things at 0

if (value >= 25) {
    return newWidth;
}

A complete version can be seen here

Upvotes: 1

Views: 817

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337627

You should use the event object passed in to the click handler, not the global window.event. Also, the method is preventDefault() in lowercase. Try this:

$('#plus25').on('click', function(e) { // Note the 'e' parameter here
    var id = $('#selectChoice option:selected').attr('id');
    $('#' + id + 'Item').html(function(i, value) {
        var newWidth = parseInt(value * 1 + 25);
        $('#' + id + 'Item').css('width', newWidth + '%');
        if (value <= 75) {
            return newWidth;
        } else {
            e.preventDefault();
        }
    });
});

Upvotes: 3

Related Questions