為什么我在最后一個元素中未定義

為什么我undefined在元素中分配顏色時會進入最后一個元素？

1. 代碼在行中混合顏色的作業
2. 我嘗試在圓圈中設定命名顏色而不重復相同的顏色并且不是相同的圓圈顏色

問題：我得到undefined而不是得到所需的顏色

let ar = document.getElementsByClassName('row');
let classNameArray = [];
let withoutItem = [],
  arrayWithoutCurrentColor,
  currentColor;
let shuffle = array => {
  let arr = [];
  for (let ii = 0; ii < array.length; ii  ) {
    arr.push(array[ii])
  }
  let len = arr.length,
    random, temp;
  while (len > 0) {
    random = Math.floor(Math.random() * len);
    len--;
    temp = arr[len]; // save temp value to don't take new value bcz we change it to random index
    arr[len] = arr[random];
    arr[random] = temp;
  }
  return arr;
}
let search_by_name = (name, array) => {
  let numx;
  array.forEach((el, key) => el == name ? numx = key : '')
  return numx;
};
let remove_item = (name, array) => {
  let array1 = [];
  for (let ii = 0; ii < array.length; ii  ) {
    array1.push(array[ii])
  }
  withoutItem = array1;
  withoutItem.splice(search_by_name(name, array1), 1); // remove first element
  console.log("i remove "   name);
  return array1;
}

for (let i = 0; i < ar.length; i  ) {
  // [1] select bg color
  const element = document.getElementsByClassName('row')[i];
  let elelmentClassName = document.getElementsByClassName('row')[i].className;
  let firstClassName = elelmentClassName.split(' ')[1];
  element.style.backgroundColor = firstClassName;

  // [2] add color from class element to array
  classNameArray.push(elelmentClassName.split(' ')[1]); // array with colors

}
// [3] shuffle color arrary
let shuffledArray = shuffle(classNameArray)
for (let indexColor = 0; indexColor < classNameArray.length; indexColor  ) { // turn 9
  const element = document.getElementsByClassName('row')[indexColor];
  const color = classNameArray[indexColor];
  // [4] remove same bgcolor 
  arrayWithoutCurrentColor = remove_item(color, shuffledArray);
  currentColor = arrayWithoutCurrentColor[(8 - 1) - indexColor]; // lentgh - 1 for index & (-1) removed element 
  // [5] append name color in element
  element.innerHTML = `<span style="color : ${currentColor}"> ${currentColor} </span>`;
  // [6] remove thee added color to don't repeat same color
  shuffledArray.splice(search_by_name(currentColor, shuffledArray), 1);
}

body {
  background-color: #eeeeee;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.con {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.row {
  margin: 20px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row span {
  font-size: 23px;
}

<div class="con">
  <div class="row yellow"></div>
  <div class="row red"></div>
  <div class="row black"></div>
</div>
<div class="con">
  <div class="row white"></div>
  <div class="row green"></div>
  <div class="row brown"></div>
</div>
<div class="con">
  <div class="row lightpink"></div>
  <div class="row orange"></div>
  <div class="row orchid"></div>
</div>

uj5u.com熱心網友回復：

您可以將代碼簡化為以下內容：

1. 定義一個隨機播放函式
2. 抓取所有圓形元素
3. 根據他們的資料為所有圈子設定背景顏色
4. 洗牌
5. 抓取一個不是背景的隨機顏色，然后將其移除
6. 應用顏色文本

注意：不要濫用類名，將資料放入資料屬性中。

const shuffle = (arr) => arr.sort(() => Math.random() - 0.5);
const remove = (arr, e, amt = 1) => arr.splice(arr.findIndex((x) => x !== e), amt);
const getColor = (el) => el.getAttribute('data-color');

const circles = document.querySelectorAll('.row');

// Set colors
circles.forEach((el) => el.style.backgroundColor = getColor(el));

// Random color
let randColors = shuffle([...circles].map((el) => getColor(el)));

// Apply random color text to circles
circles.forEach((circle) => {
  const [color] = remove(randColors, circle);
  circle.innerHTML = `<span style="color:${color}">${color}</span>`;
});

body {
  background-color: #eeeeee;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.con {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.row {
  margin: 20px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.row span {
  font-size: 23px;
}

<div class="con">
  <div class="row" data-color="yellow"></div>
  <div class="row" data-color="red"></div>
  <div class="row" data-color="black"></div>
</div>
<div class="con">
  <div class="row" data-color="white"></div>
  <div class="row" data-color="green"></div>
  <div class="row" data-color="brown"></div>
</div>
<div class="con">
  <div class="row" data-color="lightpink"></div>
  <div class="row" data-color="orange"></div>
  <div class="row" data-color="orchid"></div>
</div>

標籤：javascript数组for循环调试随机的

上一篇：設計模式之禪01單一職責原則

下一篇：為什么從utilsimpostfs_data_dir不起作用？