如何在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使用单个分配来分配值（颜色名称），而不用进行大量设置颜色名称。innerHTMLfunction myFunction() {&nbsp; var myArray = [&nbsp; &nbsp; { hex: '#4682B4', color: 'Steel Blue' },&nbsp; &nbsp; { hex: '#FFF5EE', color: 'Seashell' },&nbsp; &nbsp; { hex: '#000000', color: 'Black' },&nbsp; ];&nbsp; var randomItem = myArray[Math.floor(Math.random() * myArray.length)];&nbsp; console.log(randomItem);&nbsp; document.body.style.background = randomItem.hex;&nbsp; document.querySelector('#color').innerHTML = randomItem.color;}myFunction();body {&nbsp; color: #999;}<h1 id="color"></h1>