Javascript 为什么我需要按两下才能显示元素0？

我想按一次以显示所有元素

为什么要按两次以显示0元素

我试着对if语句进行排序，但我没有弄明白

这里是链接

var words=[“彩虹”、“心”、“紫色”、“友谊”、“爱”]；
函数设置（）{
createCanvas（400400）；
}
函数绘图（）{
背景（0）；
文本大小（32）；
文本（字[i]）；
}
函数mousePressed（）{
for（设i=0；i因为在第一个
text（）
之前没有调用
fill（）
。顺便说一下，绘图代码应该位于
draw（）
中

const words=[“彩虹”、“心”、“紫色”、“友谊”、“爱情”]，
颜色=[
[255, 0, 0],
[0, 50, 100, 300],
[0, 165, 300, 200],
[0, 50, 100, 300],
[0, 50, 100, 300],
];
让isMousePressed=false；
函数设置（）{
createCanvas（400400）；
}
函数绘图（）{
背景（0）；
文本大小（32）；
如果（按下按钮）
words.forEach（（w，i）=>{
fill.call（null，colors[i]）；
文本（w，100，（i+1）*50）；
});
}
函数mousePressed（）{
isMousePressed=true；
}
解决问题的积分归@timwong，我只是解释一下我的评论

const words = [
  {
    word: 'rainbow',
    colors: [255, 0, 0],
  },
  {
    word: 'heart',
    colors: [0, 50, 100, 300],
  },
  {
    word: 'purple',
    colors: [0, 165, 300, 200],
  },
  {
    word: 'friendship',
    colors: [0, 50, 100, 300],
  },
  {
    word: 'love',
    colors: [0, 50, 100, 300],
  }
];
let isMousePressed = false;
function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(0);
  textSize(32);
  if (isMousePressed) {
    words.forEach(({ word, color }, i) => {
      fill.call(null, color);
      text(word, 100, (i + 1) * 50);
    });
  }
}
function mousePressed() {
  isMousePressed = true;
}

由于您使用的是==，因此将所有ifs测试==1的“if”改为“else if”，或在每次fill（）调用后插入一个“return；”。我建议将单词数组改为对象数组。每个对象将包含单词和填充选项。通过这种方式，在列表中添加单词和保持所有内容井然有序会容易得多。@Akxe你能给我一个例子，说明我如何在代码中做到这一点吗？@splaten我会使用switch case。@TimTimWong，为什么switch case比if语句更好？你是说，我们应该首先调用textColor，在我们的例子中是fill（），然后我们实现文本的颜色，我想这是有道理的，对吧？@HamzaSAMI默认填充是透明黑色的，所以您在绘制时没有颜色。但是想象一下，如果fill（）用于着色，我的假设是正确的？@HamzaSAMI它不像绘制文本然后填充，但是设置当前填充颜色，然后使用当前填充颜色绘制文本。
const words = [
  {
    word: 'rainbow',
    colors: [255, 0, 0],
  },
  {
    word: 'heart',
    colors: [0, 50, 100, 300],
  },
  {
    word: 'purple',
    colors: [0, 165, 300, 200],
  },
  {
    word: 'friendship',
    colors: [0, 50, 100, 300],
  },
  {
    word: 'love',
    colors: [0, 50, 100, 300],
  }
];
let isMousePressed = false;
function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(0);
  textSize(32);
  if (isMousePressed) {
    words.forEach(({ word, color }, i) => {
      fill.call(null, color);
      text(word, 100, (i + 1) * 50);
    });
  }
}
function mousePressed() {
  isMousePressed = true;
}