Why would I get different results from a function due to the position of number 1 in an array?

Question

I have a few problems that are stopping me from proceeding on my blackjack 21 game. First when I open the site in a browser my aceCard function is invoked which is only supposed to be called if you deal a 1 (an ace card). Below I have written some problems I noticed with my aceCard function.

When You get number 1 in the userArray then you will need to call aceCard(); in the console. Or at least I haven't got this to call automatically.

1.when number 1 is in position 0 in array javascript don't recognize the 1.

2.when number 1 is in position 1 in array aceCard function will work and change value to 1 to 11

3.when number 1 is in position 2 in array it see's value 1 in the array, but it won't change value 1 to 11. if array position 0 = 1 then it won't see position 2 in the array.

Any help would be great, I have no idea why this works differently depending where number 1 is positioned in the userArray.

var userArray = [];
var computerArray = [];
var a = userArray.indexOf(1);

function random_number() {
  var randNum = Math.floor(Math.random() * 10 + 1);
  return randNum;
}
document.getElementById('dealButton').onclick = function() {
  userArray.push(random_number(), random_number());
  computerDeal();
  computerDeal();
  calcTotal(userArray);
  showMe(calcComputerTotal(userArray));
  //cardMaker ();
  //cardMaker ();
  //inputMyCardValue ();
  //inputMyCardValue ();
  cardMaker(random_number());
  cardMaker(random_number());
  //inputMyCardValueComputer ();
  //inputMyCardValueComputer ();

  return userArray;
}
document.getElementById('hitButton').onclick = function() {
  userArray.push(random_number());
  //computerHit();
  calcTotal(userArray);
  showMe(calcComputerTotal(userArray));
  cardMaker(random_number());
  //inputMyCardValue ();
  //cardMakerComputer ();
  //inputMyCardValueComputer ();
  return userArray;
}
if (userArray.indexOf(1)) {
  aceCard();
}

function aceCard() {
  if (userArray.indexOf(1)) {
    var numberDesired = parseInt(prompt('You got an Ace card! Do you want it to equal 1 or 11?'));
    if (numberDesired === 11) {
      var a = userArray.indexOf(1);
      userArray[a] = 11;
      inputMyCardValue();
      calcTotal(userArray);
    };
  };
}

function stay() {
  //have computer try to get closest to 21 as posible
}

/*function cardMaker (number) {
		var id = 'card' + ($('#cardTable').children().length + 1);
  			$("#cardTable").append('<div id="' + id + '" class="cardLook">' + number + '</div>');
  		

	}*/



function cardMakerComputer() {
  var id = 'cardComputer' + ($('#computerCardValues').children().length + 1);
  $("#cardTable").append('<div id="' + id + '" class="cardLook"></div>');
}

function inputMyCardValue() {
  card1.innerHTML = userArray[0];
  card2.innerHTML = userArray[1];
  card3.innerHTML = userArray[2];
  card4.innerHTML = userArray[3];
  card5.innerHTML = userArray[4];
  card6.innerHTML = userArray[5];


}

function cardMaker() {
  var id = 'card' + ($('#cardTable').children().length + 1);
  $("#cardTable").append('<div id="' + id + '" class="cardLook">' + userArray[$('#cardTable').children().length] + '</div>');

}
inputMyCardValue()
inputMyCardValue()



function inputMyCardValueComputer() {
  card10.innerHTML = computerArray[0];
  card20.innerHTML = computerArray[1];
  card30.innerHTML = computerArray[2];
  card40.innerHTML = computerArray[3];
  card50.innerHTML = computerArray[4];
  card60.innerHTML = computerArray[5];
  aceCard();
}

function calcTotal(userArray) {
  var total = 0;
  for (var i = 0; i < userArray.length; i++) {
    total += userArray[i];
  }
}

function calcComputerTotal(computerArray) {
  var total = 0;
  for (var i = 0; i < computerArray.length; i++) {
    total += computerArray[i];
  }
  return total;
}

function showMe(VAL) {
  var total = calcComputerTotal(userArray);
  total = document.getElementById('out2');
  parent = total;
  parent.innerHTML = VAL;
}


//Cumputer logic
function computerDeal() {
    computerArray.push(random_number(), random_number());
  }
  /*function computerHit () {
		if (calcComputerTotal(computerArray) <= 17) {
			computerArray.push(random_number());
		} 
	}*/
  //when 1 is in position 0 in array javascript don't reconise the 1.
  //when 1 is in position 1 in array aceCard function will work and change value to 1 to 11
  //when 1 is in position 2 in array it see's value 1 in the array, but won't change value 1 to 11. if array position 0 = 1 then it won't see position 2 in the array.

body {
  background-color: lightgrey;
}
#mainContainer {
  margin: 0 auto;
  padding: 15px;
}
#cardTable {
  height: 240px;
  width: 95%;
  background-color: green;
  border-radius: 5px;
  margin: 15px 0 15px 0;
}
#computerCardValues {
  height: 240px;
  width: 95%;
  background-color: green;
  border-radius: 5px;
  margin: 15px 0 15px 0;
}
#out2 {
  margin-bottom: 5px;
}
.cardLook {
  border: 1px solid black;
  width: 120px;
  height: 190px;
  border-radius: 5px;
  float: left;
  margin: 20px;
  padding: 5px;
  background-color: #fff;
}
#card1,
#card2,
#card3,
#card4,
#card5 {
  transform: rotate(180deg);
  transform: rotate(0deg);
}
#cardComputer10,
#cardComputer20,
#cardComputer30,
#cardComputer40,
#cardComputer50 {
  transform: rotate(180deg);
  transform: rotate(0deg);
}

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<div id="mainContainer">
  <div id="wrapper">
    <div id="out2">My total</div>
    <button id="dealButton">Deal</button>
    <button id="hitButton">Hit</button>
    <button id="stayButton">Stay</button>
    <div id="cardTable"></div>
  </div>
  <div id="computerWrapper">
    <div id="computerTotal">Computer Total</div>
    <div id="computerCardValues"></div>
  </div>
</div>

Heading

Answer 1

You're not using indexOf correctly to test whether an element is in an array. It returns the index if the element is in the array, or -1 if it's not in the array. You can't use it as a boolean, because -1 is truthy -- the only falsey value it returns is when the element is in the first array element, because then it returns the index 0.

So if (userArray.indexof(1)) should be if (userArray.indexOf(1) != -1).

There's also no point in putting

if (userArray.indexOf(1)) {
  aceCard();
}

in the top-level of the script. Nothing gets put into userArray until the user starts dealing cards. So you should only do that test in the code that runs when dealing a card.