Pulling HTML value through jQuery

Question

I have these data-attributes

<li data-audio="" data-pic="images/one.png" data-word="one" data-hint="What?"></li>

I pull them through using this function

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

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?"

<div class="hint-img-wrapper">
<img src="" value="" id="hintPic" class="pic-hint" alt="Hint" />

I display it it like this

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

Can someone tell me what I am doing wrong?

value is not a valid attribute on an <img> tag. Use an HTML5 data- attribute like your other code. What are you trying to accomplish with the value attribute there anyway? — LoveAndCoding
– LoveAndCoding, Commented Nov 7, 2012 at 14:49
So I have changed value for title, will this work? If so what do I cange in the markup? — Milo-J
– Milo-J, Commented Nov 7, 2012 at 14:55
If you inspect value attribute from console and get nothing, it must be a problem with code and not markup or anything else, try to step-by-step debug this code, to see if rndWord is a correct number value that could retrieve a valid data object from listOfWords? — otakustay
– otakustay, Commented Nov 7, 2012 at 15:00
@Milo-J It's better you post the answer yourself since I don't know what exactly the problem is and how you finally solved it :) — otakustay
– otakustay, Commented Nov 8, 2012 at 3:14

That White Eyebrow Guy · Accepted Answer · 2012-11-07 14:51:10Z

1

What you really want to set instead of .attr('value', listOfWords[rndWord].hint); is .attr('title', listOfWords[rndWord].hint);

The title property is what's normally displayed if you hover over an image. If no title is specified it will use the alt property.

answered Nov 7, 2012 at 14:51

That White Eyebrow Guy

5696 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Milo-J Over a year ago

what would I change in the Html @Sargo Darya

That White Eyebrow Guy Over a year ago

You don't need to change anything in the HTML. The last snippet of code is just a bit wrong. You're setting value (which is not even a valid property for the img tag) instead of the title property.

Milo-J Over a year ago

well it still doesn't work. Where else would it say title? @Sargo Darya

Milo-J Over a year ago

what would <div class="hint-img-wrapper"> <img src="" value="" id="hintPic" class="pic-hint" alt="Hint" /> change to

That White Eyebrow Guy Over a year ago

If you want to display the text directly you should change the markup to

<div class="hint-img-wrapper"> <img src="" value="" id="hintPic" class="pic-hint" alt="Hint" /><span class="hintText"></span></div>

and in the javascript code you put $('.hint-img-wrapper').find('.hindText').text(listOfWords[rndWord].hint)'

Collectives™ on Stack Overflow

Pulling HTML value through jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related