if-statements with && and || in JavaScript

Question

code:

// if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" || ".png")
if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" && image.substring(image.length-4) != ".png")
    {
            // do stuff
    }

context: Trying to do an if-statement in JavaScript which uses the && and || operators but it's not working out... Might be due to the fact of how JavaScript returns true-like and false-like values.

EDIT:
full code:

function validateContent(title, rating, link, image, desc)
{
    var flag = true;

    // add more if-statements
    if (title == "")
    {
        $("#inputTitle").css("background-color", "red");
        flag = false;
    }
    if (rating == 0)
    {
        $("#selectRating").css("background-color", "red");
        flag = false;
    }
    if (link.substring(0,26) != "http://www.imdb.com/title/")
    {
        $("#inputLink").css("background-color", "red");
        flag = false;
    }
    // if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" || ".png")
    //if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" && image.substring(image.length-4) != ".png")
    //if ((image.substring(0,7) != "http://") && (image.substring(image.length-4) != ".jpg") && (image.substring(image.length-4) != ".png"))
    //if (image.substring(0,7) != "http://" && (image.substring(image.length-4) != ".jpg" || image.substr(image.length-4) !=  ".png"))
    //if (/^http:\/\/.*\.(jpg|png)$/.test(image))
    if ((image.substring(0,7) != "http://") && ((image.substring(image.length-4) == true) != ".jpg") && ((image.substring(image.length-4) == true) != ".png"))
    {
            $("#inputImage").css("background-color", "red");
            flag = false;
    }
    return flag;
}

function addContent()
{
    var title = $("#inputTitle").val();
    var rating = $("#selectRating option:selected").index();
    var link = $("#inputLink").val();
    var image = $("#inputImage").val();
    var desc = $("#textareaDescription").val();

    if (validateContent(title, rating, link, image, desc))
    {
        document.forms.formFilmerPHP.submit();
    }
}

function disableOption(pos)
{
    $("#selectRating option:eq(" + pos + ")").prop("disabled", true);
}

function validateInputs(inputType)
{
    // add more cases
    switch(inputType)
    {
        case "title":
            var title = $("#inputTitle").val();
            if (title != "")
                $("#inputTitle").css("background-color", "white");
            break;
        case "rating":
            var rating = $("#selectRating option:selected").index();
            if (rating != 0)
                $("#selectRating").css("background-color", "white");
            break;
        case "link":
            var link = $("#inputLink").val();
            if (link.substring(0,26) == "http://www.imdb.com/title/")
                $("#inputLink").css("background-color", "white");
            break;
    }
}

function preventDefault()
{
    $("#btnAddContent").click(function(event) {event.preventDefault();});
}

function addEventListeners()    // QUESTION: when to use anonymous functions and when not to when adding eventlisteners in order to safely attach functions without invoking them?
{
    // misc eventlisteners
    $("#selectRating").on("focus", function() {disableOption(0);});

    // real-time polling of invalid input correction
    $("#inputTitle").on("input", function() {validateInputs("title");});                    // QUESTION:    takes some time before this fires, how to make it fire more quickly?
                                                                                                                            // ANSWER:      use the "oninput" event, previously used onkeydown
    $("#selectRating").on("change", function() {validateInputs("rating");});
    $("#inputLink").on("input", function() {validateInputs("link");});

    // main eventlisteners
    $("#btnAddContent").on("click", function() {addContent();});
}

function init()
{
    preventDefault();
    addEventListeners();
}

/* method used to test during development */
function devtest()
{

}

$(document).ready(init);

EDIT:

    var a = image.substring(0,7);
    var b = image.substring(image.length-4);
    alert(a);
    alert(b);
    if(a != "http://" && b != ".jpg" && b != ".png")
    {
            $("#inputImage").css("background-color", "red");    // <-- not being executed
            flag = false;
    }
    return flag;

can't get the $("#inputImage").css("background-color", "red"); statement to execute even though the condition should be evaluated to true.

At least, assign the value to the image variable so that we can help you understand why this is not working. Also, I don't see any || operator here. — Chandranshu
– Chandranshu, Commented Nov 16, 2013 at 22:46
You should make working the conditions one by one. And try to make compound conditions if they are working already. — Lajos Veres
– Lajos Veres, Commented Nov 16, 2013 at 22:48
Please explain what the code is supposed to do/which problem you are trying to solve. Also what exactly does not work out? What input do you have and what output do you expect? That it is an if statement I can see for myself. — Felix Kling
– Felix Kling, Commented Nov 16, 2013 at 22:50
I think you need to explain in more detail what you need. That regex will check for images that start with http:// and end in .jpg or .png. Isn't that what you want? — elclanrs
– elclanrs, Commented Nov 16, 2013 at 23:01
More important than your wall of code is an explanation of what you are trying to do. — Felix Kling
– Felix Kling, Commented Nov 16, 2013 at 23:02

Cyclonecode · Accepted Answer · 2013-11-16 23:07:25Z

2

The below code will be evaluated as true when the first part of the string isn't http:// and the strings last four characters are neither .jpg nor .png

if (image.substring(0,7) != "http://" && 
    image.substring(image.length-4) != ".jpg" && 
    image.substring(image.length-4) != ".png")

edited Nov 16, 2013 at 23:07

answered Nov 16, 2013 at 22:47

Cyclonecode

30.4k11 gold badges77 silver badges97 bronze badges

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

8 Comments

Cyclonecode Over a year ago

@DaggNabbit - The || operator

Cyclonecode Over a year ago

@DaggNabbit - I assumed (based on the question title) he meant the javascript that was commented out.

Petrus K. Over a year ago

didn't work, evaluates to true when (image.substring(0,7) != "http://") is satisfied.

Cyclonecode Over a year ago

@Ryuji - I think it strange that you ask a question about the || operator when you're not using one in the actual code? I updated my question though.

Petrus K. Over a year ago

@KristerAndersson I did have || originally but it didn't work as expected so I uncommented it, just because it's uncommented doesn't mean that the || operator is irrelevant to the question. I'll check your updated answer. EDIT: still doesn't work.

|

Petrus K. · Accepted Answer · 2013-11-17 12:12:44Z

0

Ok, after a night of good sleep, here's the proper solution:

    var imagebegin = image.substring(0,7);
    var imageend = image.substring(image.length-4);
    if(imagebegin != "http://" || (imageend != ".jpg" && imageend != ".png"))
    {
            $("#inputImage").css("background-color", "red");
            flag = false;
    }
    return flag;

The validation will occur only if the beginning of the string is "http://" and the end is either ".jpg" or ".png", if either of these conditions aren't met then the if-statement will evaluate to true and the statements within will be executed (including setting the flag to false).

answered Nov 17, 2013 at 12:12

Petrus K.

8408 gold badges30 silver badges57 bronze badges

Comments

john Smith · Accepted Answer · 2013-11-16 22:47:09Z

-1

sorry i didnt read your answer proper but i think i gave the right hint anyway

if (image.substring(0,7) != "http://" && image.substring(image.length-4) != ".jpg" && (image.substring(image.length-4) != ".png" || image.substring(image.length-4) != 'or'))

answered Nov 16, 2013 at 22:47

john Smith

18k12 gold badges80 silver badges124 bronze badges

1 Comment

Petrus K. Over a year ago

didn't work, evaluates to true when (image.substring(0,7) != "http://") is satisfied.

Collectives™ on Stack Overflow

if-statements with && and || in JavaScript

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related