Search code examples
javascriptjquerymathfor-loopoperation

Arithmetic operation inside for loop declaration statement

Why is this working?

index++;
for (var z=index ; z < 11; z++) {
    $( "#div"+z ).hide();
}

and this is not?

for (var z=index+1 ; z < 11; z++) {
    $( "#div"+z ).hide();
}

I really really don't understand why... I'll also give you the full code of the webpage I'm working on. What I'm trying to do is make the dropdown selector choose how many textboxes appear on the page. If I'm doing this the wrong way, please let me know.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Settings</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
.hidden {
    display: none;
}
</style>
</head>

<body>
<p align="center">IP address
  <label for="textfield3">:</label>
  <input type="text" name="textfield3" id="textfield3" />
  <label for="textfield4">Port:</label>
  <input type="text" name="textfield4" id="textfield4" />
</p>
<p align="center">
  <label for="select">Number of variables:</label>
  <select name="select" id="select">
    <option value="-" selected="selected">-</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
</p>
<div class="hidden" id="div1">
  <p align="center">
    <label for="textfield">Variable1:</label>
    <input type="text" name="textfield" id="textfield" />
    <label for="textfield2">    Display name:</label>
    <input type="text" name="textfield2" id="textfield2" />
  </p>
</div>
<div class="hidden" id="div2">
  <p align="center">
    <label for="textfield21">Variable2:</label>
    <input type="text" name="textfield3" id="textfield21" />
    <label for="textfield22">Display name:</label>
    <input type="text" name="textfield3" id="textfield22" />
  </p>
</div>
<div class="hidden" id="div3">
  <p align="center">
    <label for="textfield23">Variable3:</label>
    <input type="text" name="textfield4" id="textfield23" />
    <label for="textfield24">Display name:</label>
    <input type="text" name="textfield4" id="textfield24" />
  </p>
</div>
<div class="hidden" id="div4">
  <p align="center">
    <label for="textfield25">Variable4:</label>
    <input type="text" name="textfield4" id="textfield25" />
    <label for="textfield26">Display name:</label>
    <input type="text" name="textfield4" id="textfield26" />
  </p>
</div>
<div class="hidden" id="div5">
  <p align="center">
    <label for="textfield27">Variable5:</label>
    <input type="text" name="textfield5" id="textfield27" />
    <label for="textfield28">Display name:</label>
    <input type="text" name="textfield5" id="textfield28" />
  </p>
</div>
<div class="hidden" id="div6">
  <p align="center">
    <label for="textfield29">Variable6:</label>
    <input type="text" name="textfield5" id="textfield29" />
    <label for="textfield30">Display name:</label>
    <input type="text" name="textfield5" id="textfield30" />
  </p>
</div>
<div class="hidden" id="div7">
  <p align="center">
    <label for="textfield31">Variable7:</label>
    <input type="text" name="textfield6" id="textfield31" />
    <label for="textfield32">Display name:</label>
    <input type="text" name="textfield6" id="textfield32" />
  </p>
</div>
<div class="hidden" id="div8">
  <p align="center">
    <label for="textfield33">Variable8:</label>
    <input type="text" name="textfield6" id="textfield33" />
    <label for="textfield34">Display name:</label>
    <input type="text" name="textfield6" id="textfield34" />
  </p>
</div>
<div class="hidden" id="div9">
  <p align="center">
    <label for="textfield35">Variable9:</label>
    <input type="text" name="textfield7" id="textfield35" />
    <label for="textfield36">Display name:</label>
    <input type="text" name="textfield7" id="textfield36" />
  </p>
</div>
<div class="hidden" id="div10">
  <p align="center">
    <label for="textfield37">Variable10:</label>
    <input type="text" name="textfield7" id="textfield37" />
    <label for="textfield38">Display name:</label>
    <input type="text" name="textfield7" id="textfield38" />
  </p>
</div>
<script>
$("select").change(function () {
    var index=0;
    index=$( "select" ).val();
    for (var i=index; i > 0; i--) {
        $( "#div"+i ).show();
    }
    index++;
    for (var z=index ; z < 11; z++) {
        $( "#div"+z ).hide();
    }
  })
</script>

</body>
</html>
Solution

  • The reason your getting the different behavior is because the value you are getting from

    index=$( "select" ).val();

    is a string. The increment (++) and decrement (--) operators convert it to a number so the loops work. But when you write

    index+1

    you are concatenating 1 to the index string (e.g., "5"+1) and you get the string "51".

    Try stepping through your code in a debugger like Firebug and you'll see what is happening.