How do I change a JavaScript variable value, inserted in a HTML document, using jQuery

Question

My objective is that when the mouse pointer is on an image (we'll call it "IMAGEN"), a text would appear at some other part of the screen.

I'm trying to do this by using in the HTML (Assume that the CSS has the right code, making the div (we'll call it "DESCRIPCION") faded away from the start)

<div id="DESCRIPCION"> <script> document.write(des); </script></div>

meanwhile in the .js file, IF I write:

var coop = "lalala this is some text";
var des = coop;

// jQuery here. If I put the mouse over IMAGEN, DESCRIPCION fades in. 

$(document).ready(function(){
$("#IMAGEN").mouseenter(function(){
    $("#DESCRIPCION").fadeTo('fast',1.0); 
}); 
$("#IMAGEN").mouseleave(function(){
    $("#DESCRIPCION").fadeTo('fast',0);
});
});

That works just fine. and on the browsers appears the "lalala this is some text" text. But obviously I want to use more images and more descriptions BUT the same DIV.

So I tried putting the "var des = coop" inside the jQuery function (so I can repeat the code each time of each image), but this is not working.

var coop = "lalala this is some text";

// jQuery here. If I put the mouse over IMAGEN, DESCRIPCION fades in. 

$(document).ready(function(){
$("#IMAGEN").mouseenter(function(){
    var des = coop;
$("#DESCRIPCION").fadeTo('fast',1.0); 
}); 
$("#IMAGEN").mouseleave(function(){
    $("#DESCRIPCION").fadeTo('fast',0);
});
});

Can you please help me with this? I assumed the jQuery var value change is made some different way. I tried to look into that but I have found nothing. :/

Brad Christie · Accepted Answer · 2013-09-04 14:33:55Z

3

Once document.write executes that code is finished. It isn't going to update based on des having a new value.

What you can do is reassign it using $('#DESCRIPCION').text(). The first description will be populated, but any new data should be written using .text() (referencing the div to target)

Changes around a bit to be more dynamic:

<img src="http://placehold.it/100&text=Image1" data-desc="Image 1 description" />
<img src="http://placehold.it/100&text=Image2" data-desc="Image 2 description" />
<img src="http://placehold.it/100&text=Image3" data-desc="Image 3 description" />
<img src="http://placehold.it/100&text=Image4" data-desc="Image 4 description" />
<div id="DESCRIPCION"></div>

And the JS:

$(function(){
    var $DESCRIPCION = $('#DESCRIPCION');
    $('img').hover(function(){
        var desc = $(this).data('desc');
        $DESCRIPCION.text(desc).fadeTo('fast', 1.0);
    },function(){
        $DESCRIPCION.fadeTo('fast', 0);
    });
});

Exmaple

answered Sep 4, 2013 at 14:33

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

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

1 Comment

Giorgio D. Baradit Toledo Over a year ago

Thanks Brad, your answer was really helpful :)

Lance · Accepted Answer · 2013-09-04 14:36:59Z

0

No need for the

document.write(des);

Just use this jQuery.

 $(document).ready(function(){
   $("#IMAGEN").hover(function(){
      $("#DESCRIPCION").fadeTo('fast',1.0); 
      $("#DESCRIPCION").text('what you want to be displayed'); 
   }); 
   $("#IMAGEN").mouseout(function(){
      $("#DESCRIPCION").fadeTo('fast',0);
      $("#DESCRIPCION").text(''); 
  });
});

answered Sep 4, 2013 at 14:36

Lance

4,83016 gold badges56 silver badges91 bronze badges

2 Comments

Giorgio D. Baradit Toledo Over a year ago

Thanks, this was the most simple solution of all :) I'd vote you up, but this was my first question and I have not enough reputation yet.

Lance Over a year ago

No prob. All you've gotta do is click the green checkmark below the arrow next to my question :)

Krzysiek · Accepted Answer · 2013-09-04 14:41:45Z

0

HTML:

<img class="IMAGEN" src="whatever" data-description="lalala this is some text" />
<img class="IMAGEN" src="whatever" data-description="some other text" />
<div id="DESCRIPCION"></div>

JS:

jQuery(function($){
    $(".IMAGEN").mouseenter(function(){
        $("#DESCRIPCION")
            .text( //change description
                $(this).data('description') //get value of data-description attribute
            )
            .stop(true,false) //stop current animation
            .fadeTo('fast',1.0);
    }).mouseleave(function(){
        $("#DESCRIPCION")
            .stop(true,false)
            .fadeTo('fast',0);
    });
});

answered Sep 4, 2013 at 14:41

Krzysiek

2,51419 silver badges21 bronze badges

3 Comments

Brad Christie Over a year ago

only off by 7 minutes... ;-)

Krzysiek Over a year ago

You were faster than me :P

Giorgio D. Baradit Toledo Over a year ago

Also, the Stop current animation was a must. THANKS.

Robert · Accepted Answer · 2013-09-04 14:43:49Z

0

Another way to do this, since you have jQuery would be the tooltip widget in the jQuery UI library

http://jqueryui.com/tooltip/

then

<img src="http://placehold.it/100&text=Image1" title="Image 1 description" />
<img src="http://placehold.it/100&text=Image2" title="Image 2 description" />
<img src="http://placehold.it/100&text=Image3" title="Image 3 description" />
<img src="http://placehold.it/100&text=Image4" title="Image 4 description" />

And your js is simply

$(document).tooltip();

answered Sep 4, 2013 at 14:43

Robert

3861 silver badge8 bronze badges

Collectives™ on Stack Overflow

How do I change a JavaScript variable value, inserted in a HTML document, using jQuery

4 Answers 4

1 Comment

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related