访问 Marvel API 个名称

Question

我正在尝试创建一个允许我随机点击奇迹名称的功能。但是，我试图实现以下代码，但它只显示一个名称，不允许我单击不同的名称。请帮忙

 var arr = data.data.results[1].name;
      
      console.log(arr)


      function nextItem() {
        for (i = 0; i <arr.length; i++){
          i = i + 1;
          i = i % arr; 
      
      }   return arr}

      function prevItem () {
        if (i===0) {
          i = name;
        }
        i = i - 1;
        return name[i]
      }
      

      
        document.getElementById('character-name').textContent = arr;
        document.getElementById("next-btn").addEventListener('click', function (e){
        document.getElementById("character-name").textContent= nextItem();
      }

        )        });

我添加了 MARVEL API 对象的属性和相关值的图片 Marvel API Console.log

Answer 1

最重要的是，您必须从数组中提取所有名称。您目前只选择了元素1的名称。

var arr = data.data.results[1].name;

这应该更改为

var arr = data.data.results.map(_ => _.name);
// creates an array with only the names of the marvel heros

我会先使用此处的算法随机打乱名称数组：

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

对于你的例子，我会这样做：

var arr = data.data.results.map(_ => _.name);
shuffle(arr)

let index = 0;

function nextItem() {
   index++;
   index % arr.length;
   return arr[index];
}
function prevItem() {
   index--;
   if(index < 0) index = arr.length - 1;
   return arr[index];
}

document.getElementById('character-name').textContent = arr[index];
document.getElementById("next-btn").addEventListener('click', function (e){
    document.getElementById("character-name").textContent= nextItem();
)});

访问 Marvel API 个名称

Access Marvel API Names

javascript

api

click