Append on change not appending correct items

This works correctly for single, double treble. However it wont do the same for fourfold it only displays 3 fields. I have actually got this all the way up to 8fold which is 8 input fields but again only displays 3 inputs.

$("#bettype").change(function() {
  var bettype = $(this).children("option:selected").val();
  if (bettype == "single") {
    $(".removethis").remove();
    $("#selections").append($("<input type='text' value='Single' class='removethis'/>"));
  } else if (bettype == "double") {
    $(".removethis").remove();
    $("#selections").append($("<input type='text' value='Selection 1' class='removethis'/>"));
    $("#selections").append($("<input type='text' value='Selection 2' class='removethis'/>"));
  } else if (bettype == "treble" || "trixie" || "patent") {
    $(".removethis").remove();
    $("#selections").append($("<input type='text' value='Selection 1' class='removethis'/>"));
    $("#selections").append($("<input type='text' value='Selection 2' class='removethis'/>"));
    $("#selections").append($("<input type='text' value='Selection 3' class='removethis'/>"));
  } else if (bettype == "fourfold" || "yankee" || "lucky15") {
    $(".removethis").remove();
    $("#selections").append($("<input type='text' value='Selection 1' class='removethis'/>"));
    $("#selections").append($("<input type='text' value='Selection 2' class='removethis'/>"));
    $("#selections").append($("<input type='text' value='Selection 3' class='removethis'/>"));
    $("#selections").append($("<input type='text' value='Selection 4' class='removethis'/>"));
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <select id="bettype" name="bettype">
    <option disabled>Bet Type</option>
    <option value="single">single</option>
    <option value="double">double</option>
    <option value="treble">Treble</option>
    <option disabled>Accumulators</option>
    <option value="fourfold">FourFold</option>
    <option value="fivefold">FiveFold</option>
    <option value="sixfold">SixFold</option>
    <option value="sevenfold">SevenFold</option>
    <option value="eightfold">EightFold</option>
    <option value="trixie">Trixie</option>
  </select>
  <div id="selections">
  </div>
</form>

jsFiddle demo

It’s sort of working because its displaying the correct bettype value in the console.

>Solution :

The if (bettype == "treble" || "trixie" || "patent") does not check for three values.

You need to do

if (bettype == "treble" || bettype == "trixie" || bettype == "patent")

or to avoid the repetition

if (["treble","trixie","patent"].includes(bettype))

Leave a Reply