Hey there, I'm trying to extract the first word from an array I've created and then display its antonym upon clicking a "flip" button. Basically, I want to fetch the 0th and 1st elements but only reveal the 0th one initially until the user clicks the button (which should switch 0 with 1). The current code is functional, but it currently appends both words to #input.
Below is my JavaScript code:
var words = [];
words[0] = ['Budding','Accomplished'];
words[1] = ['Curious','Certain'];
words[2] = ['Realistic','Idealistic'];
words[3] = ['Practical','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');
Here's the corresponding HTML code:
<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">
I would greatly appreciate any assistance. Thank you!