Pulling HTML value through jQuery
<p>I have these data-attributes</p>

<pre><code>&lt;li data-audio="" data-pic="images/one.png" data-word="one" data-hint="What?"&gt;&lt;/li&gt;
</code></pre>

<p>I pull them through using this function</p>

<pre><code>$(wordsData).each(function () {
    var elm = $(this);
    listOfWords.push({
        "name": elm.data("word"),
        "pic": elm.data("pic"),
        "hint": elm.data("hint"),
        "audio": elm.data("audio")
    });
});
</code></pre>

<p>My problem is that when I pull the picture through I would like to display the hint in the same div. But for some reason when I check in the console it says value="", when it should say "What?"</p>

<pre><code>&lt;div class="hint-img-wrapper"&gt;
&lt;img src="" value="" id="hintPic" class="pic-hint" alt="Hint" /&gt;
</code></pre>

<p>I display it it like this</p>

<pre><code> $("#hintPic").attr('src', listOfWords[rndWord].pic).attr('value', listOfWords[rndWord].hint);
        $(hintPic).show();
</code></pre>

<p>Can someone tell me what I am doing wrong?</p>
