How to add a new button to display when the array has more than 2 values?

I’m learning JS and I’m facing a problem, I’ve written my code below.

var AddStock = document.createElement('button'); //Button for adding the ticker to the list
var Ticker = document.createElement('input'); //Input of the tickers that the user is going to use
var TickerChosenContainer = document.createElement('div'); //Container for all the tickers that the user is going to use
var TickerChosenList = []; //This array lets me store all the generated values

//Button Add Stock
AddStock.textContent = 'Add stock';
AddStock.id = 'AddStockBtn';

//Ticker input
Ticker.setAttribute('placeholder', 'Enter stock symbol')
Ticker.id = 'Ticker';

//Print on display
document.body.appendChild(Ticker);
document.body.appendChild(AddStock);
document.body.appendChild(TickerChosenContainer);

//If 'Add Stock' gets clicked then create a new paragraph with the ticker name just added
AddStock.addEventListener('click', function (){
  var tickerChosen = document.createElement('p'); 
  tickerChosen.textContent = Ticker.value; 
  TickerChosenContainer.appendChild(tickerChosen);
  tickerChosenList.push(tickerChosen); 
});

if (tickerChosenList.length > 2) {
  var testout = document.createElement('button');
  document.body.appendChild(testout);
} else {

}

This JS script basically prints the ticker name on display.
I wanted to give the user an option where if the array TickerChosenList contained more than two values he could press another button, in this case called testout.
Both button ‘testout’ and ‘AddStock’ must be shown.

if (tickerChosenList.length > 2) {
  var testout = document.createElement('button');
  document.body.appendChild(testout);
} else {

}

That’s the IF that I’ve written, can someone show me what I’m doing wrong? Because I can’t see the new button appearing.

Unfortunately my knowledge only brought me to this results and I couldn’t figure out any different way to do this.

>Solution :

This is the corrected code.
I recommend you always use const or let instead of var.
Note that the variable is called TickerChosenList, And you called tickerChosenList.
In addition, note that in the condition you specified TickerChosenList.length > 2, if TickerChosenList is greater than 2.
Every time you click on AddStock, This will create a button for you.
So the condition should be TickerChosenList.length === 2 For it to create the button once.

var AddStock = document.createElement("button"); //Button for adding the ticker to the list
var Ticker = document.createElement("input"); //Input of the tickers that the user is going to use
var TickerChosenContainer = document.createElement("div"); //Container for all the tickers that the user is going to use
var TickerChosenList = []; //This array lets me store all the generated values

//Button Add Stock
AddStock.textContent = "Add stock";
AddStock.id = "AddStockBtn";

//Ticker input
Ticker.setAttribute("placeholder", "Enter stock symbol");
Ticker.id = "Ticker";

//Print on display
document.body.appendChild(Ticker);
document.body.appendChild(AddStock);
document.body.appendChild(TickerChosenContainer);

//If 'Add Stock' gets clicked then create a new paragraph with the ticker name just added
AddStock.addEventListener("click", function () {
  var tickerChosen = document.createElement("p");
  tickerChosen.textContent = Ticker.value;
  TickerChosenContainer.appendChild(tickerChosen);
  TickerChosenList.push(tickerChosen);

  if (TickerChosenList.length === 2) {
    var testout = document.createElement("button");
    document.body.appendChild(testout);
  }
});

Leave a Reply