Вытягивание обоих значений из массива 2d, но только отображение одного

Question

Привет Я пытаюсь вытащить только первое слово в массиве, который я построил, а затем щелкнуть «flip» - показать антоним, с которым он сопряжен. т. е. вытащить 0 и 1 , но показывать только 0 до тех пор, пока не будет нажата кнопка (после этого выведите 0 для 1). Код ниже работает отлично, но по состоянию на данный момент он тянет и добавляет оба слова в #input.

Вот мой JS:

var words = []; 
words[0] = ['Budding','Accomplished']; 
words[1] = ['Curious','Certain']; 
words[2] = ['Realistic','Idealistic']; 
words[3] = ['Practicle','Imaginative']; 

function random_sort() { 
     return (0.5 - Math.random()); 
} 

words.sort(random_sort); 

var i = 0, 
    n = words.length; 

$("#forward").data('dir', 1); 
$("#back").data('dir', -1); 

$("#forward, #back").on('click', function() { 
    i = (i + $(this).data('dir') + n) % n; 
    $("#input").hide().html(words[i]).fadeIn(100); 
    $(words[i][1]).hide(); 
}); 

$("#back").trigger('click'); 

и мой HTML:

<object id="back" type="image/svg+xml" data="images/arrow.svg"></object> 
<p id="input"></p> 
<object id="forward" type="image/svg+xml" data="images/arrow.svg"></object> 

<img id="flip" src="images/fliptext.svg"> 

Любая помощь очень ценится. Благодаря!

Answer 1

Ваша проблема $("#input2").hide().html(words[i]).fadeIn(100); конкретно html(words[i]), которая равна html(['Budding','Accomplished']) и будет конкатенация массива перед добавлением его в html.

Измените это на $("#input2").hide().html(words[i][0]).fadeIn(100);, где words[i][0] конкретно выбирает слово в первом индексе в массиве.

var words = []; 
 
words[0] = ['Budding','Accomplished']; 
 
words[1] = ['Curious','Certain']; 
 
words[2] = ['Realistic','Idealistic']; 
 
words[3] = ['Practicle','Imaginative']; 
 
    
 
var i=0; 
 
$("#input").hide().html(words[i]).fadeIn(100); 
 
$("#input2").hide().html(words[i][0]).fadeIn(100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<strong>Wrong</strong><div id="input"> </div><br> 
 
<strong>Right</strong><div id="input2"> </div>