Question 176506 in Html Question posted in
Some basic documentation can be found here.

How can I add a button when the array has >2 values in HTML?

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.

Tags:

2

Answers


  1. 0

    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);
  }
});
    Login or Signup to reply.
  2. 0

    I think the problem is that this script will be executed once per page loaded and you are checking the list just one time. You should check the length of the array each time the button clicked . So move the if condition inside AddStock click event listener . It works but may not be the best way . Because if you do this , a button may be added to the page more than one time . So It may be better to create a button first and add it to the page ( like other element ) but make it hidden first (for example display : none in css). And check to show or hide it based on array length each time the button clicked inside click event listener.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search