CODEWITHSUNDEEP
javascriptjqueryhtmldom
AndreaNobili
AndreaNobili

Reputation: 42967

How can I use JavaScript\JQuery to write some content into a div having a specific id?

I am pretty new in JavaScript and JQuery and I have the following situation.

Into a page I have something like this:

<map name="Map" id="Map">
    ..............................................
    ..............................................
    ..............................................
    <area data-reveal-id="SA" shape="poly" coords="63,210,74,246,64,290,38,298,30,272,33,218" 
          href="#" alt="Sardegna" onmouseover="RollMapOn('sardegna')" onmouseout="RollMapOff()" onclick="getRegioneSelezionata(this)" />
</map>

So this map simply represent a mapping on an immage represening a geographic map.

So when the user click on a specific geographical region represented by a region tag it is performed the getRegioneSelezionata(this) JavaScript function that take as input parameter the reference to the clicked tag (is it this reasoning correct?).

So this is the code of the getRegioneSelezionata() function:

function getRegioneSelezionata(regioneSelezionata) {
    var regione = regioneSelezionata.getAttribute("data-reveal-id");
    alert("Regione: " + regione);
}

This function simply extract the value of the data-reveal-id attribute (clicking on the previous example it is the SA value) and print it into an alert popup. It works fine.

Now my problem is that I don't want that this value is printend in the alert popup but do the following thing:

1) Into my page I also have this div having id="infoRegione":

<div id="infoRegione" class="jumbotron" style="height: 405px; padding-top: 5px;">
    INFO
</div>

So I want that the previous value have to be printed inside this div and not into the alert popup

How can I do this thing?

Another doubt is that the previous getRegioneSelezionata() is a standard JavaScript function, can I implement this behavior using JQuery?

Upvotes: 0

Views: 66

Answers (3)

ro͢binmckenzie
ro͢binmckenzie

Reputation: 325

Replace 

alert("Regione: " + regione);

With

$("#infoRegione").html(regione);

The "#" is used for IDs (the same as in CSS)

(You can use "." for classes).

See here for more information: https://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-item-using-class-or-id/

Btw, sorry, but I don't understand what you're asking in your last sentence.

Upvotes: 1

Chrillewoodz
Chrillewoodz

Reputation: 28338

Pure js:

document.getElementById('infoRegione').innerHTML = regione;

jQuery:

$("#infoRegione").html(regione);

or

$("#infoRegione").text(regione);

Upvotes: 1

Tushar
Tushar

Reputation: 616

you can do this using javascript or jquery as follow

function getRegioneSelezionata(regioneSelezionata) {
    var regione = regioneSelezionata.getAttribute("data-reveal-id");
    alert("Regione: " + regione);
    // Javascript
    document.getElementById("infoRegione").innerHTML = regione;

   //Jquery
     $("#infoRegione").html(regione);
}

Upvotes: 1

Related Questions