Check if user selects correct Spanish word article
Message for moderators

As the OP already noticed, there is a strange issue when executing this in the context of the SO snippet:


  uncaught exception: unknown (can't convert to string)


I experienced the same with my totally refactored version, while it works without error in the usual context of my browser.

I can't see a good way to inquire about that, so TIA if one of the SO developers could look at it and explain it!



Now the review

This is properly written, and I see no big flaws.
But the code might be significantly reduced, by merely avoiding useless parts and repetition.

Useless parts consist of preparing data for both "la" and "el" cases, while each execution will only use one of those two articles.
So I suggest to prepare data for the involved one only, as soon as it was chosen.

Repetition appears in the click events handling, where you precisely define what must happen for each button, and in both cases depending it's the right one or not.
There too, we can compact this by acting for the two buttons at once, and evaluating if it's right during the flow.

Here is a working snippet based on yours, where I included these suggestions:



function setWord() {
  
    // Return random int between min (included) and max (excluded)
    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min;
    }
    
    const words = [
        ["casa", "comida", "chica"],
        ["perro", "amigo", "muchacho"]
    ];
    const articles = ['la', 'el'];
    
    var $buttons = $('.btn');
    var elOrLa = Math.round(Math.random());
    var article = articles[elOrLa];
    var $goodBtn = $('#' + article + '-btn');
    
    var $word = $('#test-word');
    var word = words[elOrLa][getRandomInt(0, words[elOrLa].length)];
    $word.text(word);
    
    $buttons.click(function() {
        if (this.id == $goodBtn[0].id) {
            location.reload(true);
        } else {
            alert('TOMA NOTA: ' + article + ' ' + word);
            $buttons.not($goodBtn).fadeOut();
            $goodBtn.css({'background': 'limegreen'});
            $word.addClass('bg-danger').removeClass('bg-warning');
        }
    });
}

setWord();
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;h1 class="text-center"&gt;&lt;span class="bg-warning" id="test-word"&gt;&lt;/span&gt;&lt;/h1&gt;
&lt;br&gt;
&lt;div class="container"&gt;
  &lt;button type="button" class="btn btn-primary btn-lg" id="el-btn"&gt;EL&lt;/button&gt;
  &lt;button type="button" class="btn btn-primary pull-right btn-lg" id="la-btn"&gt;LA&lt;/button&gt;
&lt;/div&gt;




Apart from the changes exposed above, you can see that:


I dropped the $(document).ready() wrapper: in most cases (and sure here) it's not needed, as soon as the script appears after the HTML description part
I also moved the getRandomInt() function, which is now the 1st thing encountered in the setWord() function: this is a good habit to take now, since it becomes mandatory if you're using "use strict"; (see this page)