配列ごとの動的テキストはどのように表示できますか？

Question

Next-Buttonを押すと、テキストが動的に変化するはずです。私はそれのための配列を使用します。今注文は正しくありません。

次の例では、配列ごとのテキストを表示しようとしていますが、これはまだ間違っています。テキストは次のようになります。

Argument arr1,1 Argument arr1,2 Argument arr1,3

をロードする必要がありNext-Button次のアレイを押した後。それは、次のようになります。

Argument arr2,1 Argument arr2,2 Argument arr2,3

誰もがそのためのソリューションを持っていますか？ありがとうございました。

//////////Text Array1////////// 
 
\t 
 
var arr1 = [ 
 
\t "Argument arr1,1", 
 
\t "Argument arr1,2", 
 
\t "Argument arr1,3", 
 
\t "Argument arr1,4", 
 
]; 
 

 
var i1 = -1; 
 
\t 
 
function nextItem1() { \t \t 
 
\t i1 = i1 + 1; \t 
 
\t i1 = i1 % arr1.length 
 
\t \t 
 
    return arr1[i1] \t 
 
} 
 

 
function prevItem1() { 
 
\t if (i1 === 0) { 
 
\t \t i1 = arr1.length \t \t 
 
} 
 
\t 
 
\t i1 = i1 - 1; 
 
\t return arr1[i1]; \t 
 
} 
 

 
window.addEventListener('load', function() { \t \t 
 
\t document.getElementById.textContent = arr1[0]; \t 
 
\t document.getElementById('prev_button').addEventListener(\t 
 
\t \t 'click', \t \t 
 
\t \t function (e) { 
 
\t \t \t document.getElementById('arr1').textContent = prevItem1(); \t \t \t \t 
 
\t } \t \t \t 
 
); 
 
    
 
\t document.getElementById('next_button').addEventListener(
 
\t \t 'click', 
 
\t \t function (e) { 
 
\t \t \t document.getElementById('arr1').textContent = nextItem1();  
 
\t \t } 
 
\t); 
 
}); 
 
\t 
 
//////////Text Array2////////// 
 

 
var arr2 = [ 
 
\t "Argument arr2,1", 
 
\t "Argument arr2,2", 
 
\t "Argument arr2,3", 
 
\t "Argument arr2,4", 
 
]; 
 
\t 
 
var i2 = -1; 
 

 
function nextItem2() {  
 
\t i2 = i2 + 1;  
 
\t i2 = i2 % arr2.length 
 
\t \t 
 
    return arr2[i2]; \t 
 
} 
 

 
function prevItem2() { 
 
    if (i2 === 0) { 
 
    i2 = arr2.length \t \t 
 
} 
 
    i2 = i2 - 1; 
 
    return arr2[i2]; \t 
 
} 
 

 
window.addEventListener('load', function() { \t 
 
\t document.getElementById.textContent = arr2[0]; 
 
\t document.getElementById('prev_button').addEventListener(\t 
 
\t \t 'click', 
 
\t \t function (e) { 
 
\t \t \t document.getElementById('arr2').textContent = prevItem2(); \t \t \t 
 
\t } 
 
); 
 
    
 
document.getElementById('next_button').addEventListener(
 
\t \t 'click', 
 
\t \t function (e) { 
 
\t \t \t document.getElementById('arr2').textContent = nextItem2(); \t \t \t \t 
 
\t \t } 
 
\t); 
 
}); 
 
\t 
 
//////////Text Array3////////// 
 
\t 
 
var arr3 = [ 
 
\t "Argument arr3,1", 
 
\t "Argument arr3,2", 
 
\t "Argument arr3,3", 
 
\t "Argument arr3,4", 
 
]; 
 
\t 
 
var i3 = -1; 
 

 
function nextItem3() {  
 
\t i3 = i3 + 1;  
 
\t i3 = i3 % arr3.length 
 
\t \t 
 
    return arr3[i3]; \t 
 
} 
 

 
function prevItem3() { 
 
    if (i3 === 0) { 
 
    i3 = arr3.length \t \t 
 
} 
 
    i3 = i3 - 1; 
 
    return arr3[i3]; \t 
 
} 
 

 
window.addEventListener('load', function() { \t 
 
\t document.getElementById.textContent = arr3[0]; \t 
 
\t document.getElementById('prev_button').addEventListener(\t 
 
\t \t 'click', 
 
\t \t function (e) { 
 
\t \t \t document.getElementById('arr3').textContent = prevItem3(); \t \t \t 
 
\t } 
 
); 
 
    
 
document.getElementById('next_button').addEventListener(
 
\t \t 'click', 
 
\t \t function (e) { 
 
\t \t \t document.getElementById('arr3').textContent = nextItem3(); \t \t \t 
 
\t \t } 
 
\t); 
 
}); 
 

#arr1 { 
 
\t font-family:Arial,sans-serif; 
 
\t font-size: 1em; 
 
\t color:black; 
 
\t margin-top: 5px; 
 
\t margin-left: 10px; 
 
} 
 

 
#arr2 { 
 
\t font-family:Arial,sans-serif; 
 
\t font-size: 1em; 
 
\t color:black; 
 
\t margin-top: 5px; 
 
\t margin-left: 10px; 
 
\t } 
 

 
#arr3 { 
 
\t font-family:Arial,sans-serif; 
 
\t font-size: 1em; 
 
\t color:black; 
 
\t margin-top: 5px; 
 
\t margin-left: 10px; 
 
\t }

<p id="arr1">Test Text</p> 
 
<p id="arr2">Test Text</p> 
 
<p id="arr3">Test Text</p> 
 

 
<input type="button" id="prev_button" value="<< Prev" onclick="prev_button"> 
 
<input type="button" id="next_button" value="Next >>" onclick="next_button">

Answer 1

私はちょっとコードを再構築しなければなりませんでした。私は好意を持って、チュートリアルを読んで、ビデオを見ながら、あなたは学びます。インデックスを使用する代わりにi3 = i3 + 1; i3 = i3 % arr3.lengthのようなものは、私には奇妙に見えます。代わりに、独自の配列で、各アップデートのフィールド3つの別々のクリックイベントを持つの

// You can simplify this code alot, since basically you have exactly the same event multiple times. 
 
// a single variable to hold the index of our active array. 
 
var currentArray = 0; 
 
// We can put all our arrays into an array as well, so that we can add or remove arrays without actually having to write `var arr4 = [];` 
 
var arrays = [ 
 
\t [ "Argument arr1,1", "Argument arr1,2", "Argument arr1,3", "Argument arr1,4", ], 
 
\t [ "Argument arr2,1", "Argument arr2,2", "Argument arr2,3", "Argument arr2,4", ], 
 
\t [ "Argument arr3,1", "Argument arr3,2", "Argument arr3,3", "Argument arr3,4", ] 
 
]; 
 
// TO change the text, we need the text from 1 array to fill up all 3 of the fields. 
 
var renderArray = function renderArray(ary) { 
 
\t document.querySelector('#arr1').textContent = ary[ 0 ]; 
 
\t document.querySelector('#arr2').textContent = ary[ 1 ]; 
 
\t document.querySelector('#arr3').textContent = ary[ 2 ]; 
 
}; 
 
// Since our active array is just an index, add or subtract 1 from the index, resetting it if the new number doesn't have an array. 
 
var previous = function previous(event) { 
 
\t currentArray -= 1; 
 
\t if (currentArray < 0) currentArray = arrays.length - 1; 
 
\t renderArray(arrays[ currentArray ]); 
 
}; 
 
// The reverse of previous 
 
var next = function next(event) { 
 
\t currentArray += 1; 
 
\t if (currentArray > arrays.length - 1) currentArray = 0; 
 
\t renderArray(arrays[ currentArray ]); 
 
}; 
 
document.querySelector('#prev_button').addEventListener('click', previous); 
 
document.querySelector('#next_button').addEventListener('click', next);

<p id="arr1">Test Text</p> 
 
<p id="arr2">Test Text</p> 
 
<p id="arr3">Test Text</p> 
 
<input type="button" id="prev_button" value="<< Prev"> 
 
<input type="button" id="next_button" value="Next >>">