如何在数组包含超过2个值时添加一个新按钮?

huangapple go评论56阅读模式
英文:

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

问题

这是你提供的代码片段,你想要知道你有什么地方出错,因为新按钮没有显示出来。以下是你的代码中可能出现问题的地方:

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

}

在你的代码中,你检查了 tickerChosenList 数组的长度是否大于2,如果是,就创建一个名为 testout 的按钮并将其附加到文档主体。但是,你需要确保 tickerChosenList 在此时的长度确实大于2。根据你提供的代码片段,tickerChosenList 数组是在 "Add Stock" 按钮点击时才添加新元素的,这意味着它的长度只有在按钮被点击后才会增加。因此,你需要确保在这个条件检查之前已经点击了足够多次 "Add Stock" 按钮,以使 tickerChosenList 的长度大于2。

如果你想要在页面加载时就显示 "testout" 按钮,你可以将这个条件检查移到 AddStock 按钮的点击事件处理程序中,以确保在按钮点击时进行检查:

AddStock.addEventListener('click', function (){
  var tickerChosen = document.createElement('p'); 
  tickerChosen.textContent = Ticker.value; 
  TickerChosenContainer.appendChild(tickerChosen);
  tickerChosenList.push(tickerChosen); 

  // 检查是否需要显示 testout 按钮
  if (tickerChosenList.length > 2) {
    var testout = document.createElement('button');
    document.body.appendChild(testout);
  }
});

这样,每当用户点击 "Add Stock" 按钮并且 tickerChosenList 的长度大于2时,都会创建并显示 "testout" 按钮。

希望这有助于解决你的问题。

英文:

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.

答案1

得分: 0

这是已经更正的代码。
我建议您始终使用const或let,而不是var。
请注意,变量名为TickerChosenList,而您使用的是tickerChosenList。
此外,请注意,在您指定的条件中,TickerChosenList.length > 2,如果TickerChosenList大于2。
每次单击AddStock时,都会为您创建一个按钮。
因此,条件应该是TickerChosenList.length === 2,以便它仅创建按钮一次。

const AddStock = document.createElement("button"); // 用于将股票代码添加到列表的按钮
const Ticker = document.createElement("input"); // 用户要使用的股票代码的输入框
const TickerChosenContainer = document.createElement("div"); // 包含用户要使用的所有股票代码的容器
const TickerChosenList = []; // 此数组用于存储生成的所有值

// 添加股票按钮
AddStock.textContent = "添加股票";
AddStock.id = "AddStockBtn";

// 股票代码输入
Ticker.setAttribute("placeholder", "输入股票代码");
Ticker.id = "Ticker";

// 将元素显示在页面上
document.body.appendChild(Ticker);
document.body.appendChild(AddStock);
document.body.appendChild(TickerChosenContainer);

// 如果单击“添加股票”按钮,则创建一个新段落,其中包含刚刚添加的股票代码
AddStock.addEventListener("click", function () {
  const tickerChosen = document.createElement("p");
  tickerChosen.textContent = Ticker.value;
  TickerChosenContainer.appendChild(tickerChosen);
  TickerChosenList.push(tickerChosen);

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

请注意,我已将代码中的变量声明从var更改为constlet,以提高代码的可维护性和可读性。

英文:

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);
  }
});

答案2

得分: 0

我认为问题在于此脚本将在每次加载页面时执行一次,并且您只检查了一次列表。您应该在每次单击按钮时检查数组的长度。因此,将if条件移到AddStock点击事件侦听器内部。这样可以工作,但可能不是最好的方法。因为如果这样做,一个按钮可能会多次添加到页面。因此,最好先创建一个按钮并将其添加到页面上(就像其他元素一样),但首先将其隐藏起来(例如在css中设置display:none)。然后根据数组长度在每次按钮点击时检查以显示或隐藏它,这可以在点击事件侦听器内部完成。

英文:

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.

huangapple
  • 本文由 发表于 2023年5月28日 05:22:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/76349100.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定