CODEWITHSUNDEEP
javascriptif-statement
TiGreX
TiGreX

Reputation: 1816

Javascript If else is executing if and a part of the else

I have an issue that I cannot understand why is happening. I have a commune If else but is executing the if and a part of the else, and this happens only the first time that is executed.

HTML code:

<div class="span3 options-search">
  <select id="condition[0]" name="condition[0]" onchange="checkCriterial(this.value,0);">                                                     
    <option value="2">Id</option>
    <option value="3">private</option>
    <option value="11">author</option>
    <option value="1">Date</option>
    <option value="4">externalId</option>
    <option value="5">Email</option>
    <option value="9">string</option>
    <option value="10">Date</option>
    <option value="6">numeric</option>
    <option selected="selected" value="7">true-false</option>
    <option value="8">numeric</option>
  </select>
</div>
<div class="span1 criterial-search-0">
  <select class="span1" id="criterial[0]" name="criterial[0]">
    <option value="1">=</option>                     
  </select>
</div>
<div class="span3 condition-quicksearch-0">
  <select class="span2 search-value-0" id="valuevar[0]" name="valuevar[0]" ><option value="false">False</option> <option value="true">True</option></select>
</div>

JS code:

checkCriterial = function (condition, id) {
    if (condition == 1 || condition == 10) {
        $('.search-value-' + id).attr('placeholder', '31/12/2015').addClass("datepicker").attr("data-date-format", "dd/mm/yyyy").attr("data-link-format", "yyyy-mm-dd");
        $(".criterial-search-" + id).html('<select class="span1" id="criterial[' + id + ']" name="criterial[' + id + ']"><option value="1">=</option><option value="2">>=</option><option value="3"><=</option></select>');
    } else if (condition == 7) {
        $('.condition-quicksearch-' + id).html('<select class="span2 search-value-' + id + '" id="valuevar[' + id + ']" name="valuevar[' + id + ']" ><option value="false">False</option> <option value="true">True</option></select>');
        $(".criterial-search-" + id).html('<select class="span1" id="criterial[' + id + ']" name="criterial[' + id + ']"><option value="1">=</option></select>');
    } else {
        $('.condition-quicksearch-' + id).html('<input type="text" class="span3 search-value-' + id + ' search" id="valuevar[' + id + ']" name="valuevar[' + id + ']" />');
        $(".criterial-search-" + id).html('<select class="span1" id="criterial[' + id + ']" name="criterial[' + id + ']"><option value="1">=</option></select>'); //<- this is also executed
    }
};

I created a jsfiddle for that https://jsfiddle.net/wr5p4xf7/

if you select a date option it will execute the if statement and the second line of the else.

the first thing that i checked has been the brackets and looks fine.

Any Idea?

Thanks All.

Upvotes: 1

Views: 97

Answers (3)

John Slegers
John Slegers

Reputation: 47091

In my browser (Linux Ubuntu, Chrome 45), every loop is processed as expected :

  • checkCriterial() is triggered whenever the first select element is clicked :
    • The value of condition depends on which option is selected in the selection box.
    • It processes if (condition == 1 || condition == 10) { [...] } when condition is either 1 or 10.
    • It processes if (condition == 7) { [...] } when condition is 7.
    • It processes else { [...] } when condition is anything but 1, 7 or 10.

See this modified Fiddle, where I alert some debug info.

If you prefer console.log for debugging instead of window alert, try this Fiddle instead.

What appears to be the problem, is that your forgot to replace your select statement with an input box when your condition is 1 or 10.

You did this correctly for your else condition, but seemed to have forgotten to do it for if (condition == 1 || condition == 10) { [...] }.

Upvotes: 0

Diogo Moura
Diogo Moura

Reputation: 26

This isn't working because your search-value-0 field is initialized as a select element, you need to remove the current search-value-0, create a new element input and just after this insert datepicker classes to element.

I've changed your fiddle to create the input inside the first condition and now it's working.

 if (condition == 1 || condition == 10) {
        $('.condition-quicksearch-' + id).html('<input type="text" class="span3 search-value-' + id + ' search" id="valuevar[' + id + ']" name="valuevar[' + id + ']" />');
            $('.search-value-' + id).attr('placeholder', '31/12/2015').addClass("datepicker").attr("data-date-format", "dd/mm/yyyy").attr("data-link-format", "yyyy-mm-dd");
            $(".criterial-search-" + id).html('<select class="span1" id="criterial[' + id + ']" name="criterial[' + id + ']"><option value="1">=</option><option value="2">>=</option><option value="3"><=</option></select>');
        }

https://jsfiddle.net/wr5p4xf7/8/

Upvotes: 1

Ergwun
Ergwun

Reputation: 12978

In your jsfiddle, only the first block of your if/else construct is executing. To see this:

  1. Visit your jsfiddle in chrome.
  2. Hit F12 to open dev tools.
  3. In the dev tools menu bar select Source
  4. In the sources side bar that appears expand fiddle.jshell.net, then wr5p4xf7 and select index.
  5. Place a breakpoint on line 51 of the (index) source that has opened.
  6. Select Date in your fiddle.
  7. Use the debugger controls to step through the execution path (e.g. F10 to step).

Upvotes: 0

Related Questions