Javascript无限下一个在洗牌JSON

Question

我有两种语言的JSON，在开始时进行洗牌。我想让它重新开始如果JSON的index等于最大索引，按下按钮。但我被困在这里，因为我不太熟悉JavaScript。请帮助使它，以便点击WINE按钮返回到洗牌JSON的开头。

// Detect language into variable and log it
var userLang = navigator.language || navigator.userLanguage; 
console.log("The browser language is: " + userLang);
var alcoscroll = {
"wine": [{
"en": "Wine Drink 1",
"es": "Vino 1",
}, {
"en": "Drink 2",
"es": "Vino 2",
}, {
"en": "Drink 3",
"es": "Vino 3",
}, {
"en": "Drink 4",
"es": "Vino",
}]
};
alcoscroll.wine.sort(function (alcoscroll) {return Math.random() - 0.5;}); // Sort alcoscroll
console.log(alcoscroll);
var index = 0; // Starting index of JSON object
var maxx  = alcoscroll.wine.length-1; // Max ID number (JSON index number)
var item = alcoscroll.wine[index]; // Current index sniffer
var next = document.getElementById('refbtn'); // Button to move to next one
displayItem(item);
next.addEventListener('click', function() {
displayItem(alcoscroll.wine[++index]);
});
console.log("MAXIndex is: " + maxx)
function displayItem(item) {
// Catch item number into function ERROR HERE
intitem = alcoscroll.wine[index];
console.log("INT item is: " + intitem);
// English or Spanish radical choice
if (userLang === "en-US") {
title.innerText = item.en;
} else {
title.innerText = item.es;
}
console.log("Index is: " + index)

if (intitem == maxx) { // If it's the last index of JSON object ERROR HERE
console.log("LAST")
next.addEventListener('click', function() {
intitem = 0; // Current index sniffer ERROR HERE
});
} else
{console.log("NOT last")}
}

<div class="container">
<div>
<div id="title"></div>
</div>
<button id="refbtn">WINE</button>
</div>

Answer 1

问题出在这段代码中:

if (intitem == maxx) { // If it's the last index of JSON object ERROR HERE
console.log("LAST")
next.addEventListener('click', function() {
intitem = 0; // Current index sniffer ERROR HERE
});
} 

你在比较intitem和maxx时，你应该比较index和maxx。此外，您不需要添加另一个事件侦听器，只需重置index值即可。改为:

if (index == maxx) { // If it's the last index of JSON object ERROR HERE
console.log("LAST");
index = -1; // Index should be -1 because it's incremented before getting
// the item.
} 

下面是更新后的代码片段:

// Detect language into variable and log it
var userLang = navigator.language || navigator.userLanguage; 
console.log("The browser language is: " + userLang);
var alcoscroll = {
"wine": [{
"en": "Wine Drink 1",
"es": "Vino 1",
}, {
"en": "Drink 2",
"es": "Vino 2",
}, {
"en": "Drink 3",
"es": "Vino 3",
}, {
"en": "Drink 4",
"es": "Vino",
}]
};
alcoscroll.wine.sort(function (alcoscroll) {return Math.random() - 0.5;}); // Sort alcoscroll
console.log(alcoscroll);
var index = 0; // Starting index of JSON object
var maxx  = alcoscroll.wine.length-1; // Max ID number (JSON index number)
var item = alcoscroll.wine[index]; // Current index sniffer
var next = document.getElementById('refbtn'); // Button to move to next one
displayItem(item);
next.addEventListener('click', function() {
displayItem(alcoscroll.wine[++index]);
});
console.log("MAXIndex is: " + maxx)
function displayItem(item) {
// Catch item number into function ERROR HERE
intitem = alcoscroll.wine[index];
console.log("INT item is: " + intitem);
// English or Spanish radical choice
if (userLang === "en-US") {
title.innerText = item.en;
} else {
title.innerText = item.es;
}
console.log("Index is: " + index)

if (index == maxx) { // If it's the last index of JSON object ERROR HERE
console.log("LAST");
index = -1; // Current index sniffer ERROR HERE
} else
{console.log("NOT last")}
}

<div class="container">
<div>
<div id="title"></div>
</div>
<button id="refbtn">WINE</button>
</div>