如何在javascript中根据数组对象打印特定文本？

Question

我在尝试用普通 JavaScript 编写此代码时遇到困难。根据选择的随机数组元素，我想输出一个h1包含相关信息的信息。例如，如果#000000选择 ，我想要一个h1元素显示“黑色”一词。这是我的代码：function myFunction() {  var myArray = [    '#4682B4', '#FFF5EE', '#000000'  ];  var randomItem = myArray[Math.floor(Math.random() * myArray.length)];  console.log(randomItem)  document.body.style.background = randomItem;  if (randomItem == myArray[2]) {    // Display text "black"  }}myFunction();

Answer 1

我建议将字符串数组更改为包含两个属性的对象数组：

• hex：十六进制颜色

• color: 颜色名称

这样，if-else您就可以只在数组中分配所需的值，并通过在所需的 HTML 元素上color使用单个分配来分配值（颜色名称），而不用进行大量设置颜色名称。innerHTML

function myFunction() {

  var myArray = [

    { hex: '#4682B4', color: 'Steel Blue' },

    { hex: '#FFF5EE', color: 'Seashell' },

    { hex: '#000000', color: 'Black' },

  ];

  var randomItem = myArray[Math.floor(Math.random() * myArray.length)];

  console.log(randomItem);

  document.body.style.background = randomItem.hex;

  document.querySelector('#color').innerHTML = randomItem.color;

}

myFunction();

body {

  color: #999;

}

<h1 id="color"></h1>