javascript - 访问 Marvel API 名称
问题描述
我正在尝试创建一个允许我随机单击奇迹名称的功能。但是,我尝试实现以下代码,但它只显示一个名称,不允许我单击不同的名称。请帮忙。
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的关联值
解决方案
最重要的是,您必须从数组中提取所有名称。您当前仅选择元素 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
我会先使用这里的算法随机打乱名称数组:https ://stackoverflow.com/a/2450976/13050816
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();
)});
推荐阅读
- reality-composer - Reality Composer - 将平面添加到相机
- c++ - 在模板类中声明与朋友相同的模板类?
- spring - 如何在springboot应用程序yaml中注入部署yaml env变量
- c# - 如何选择 C# 数据表中的前 n 行?
- parent-child - REST API 删除父/子关系与删除子对象
- r - 将向量拆分为R中等长的非重叠子向量
- java - 找不到 Spring Framework Webclasses
- c++ - c++中的时间函数引用
- java - 将第一项滚动出屏幕后,水平 Recyclerview 跳回起始位置
- sql-server - 在 SSIS 中将 CSV 导入 SQL 时,我丢失了我的区域字母(波兰语)