CODEWITHSUNDEEP
javascripthtmldynamic
Zain Khan
Zain Khan

Reputation: 1

i want to change the values of html div using javascript

Is it possible to change the values of HTML through a JavaScript-function?

Here's an example:

div class="fb-page" data-href="https://www.facebook.com/ConnectCommunications?fref=ts"
  data-width="450" data-hide-cover="false" data-show-facepile="true" data-small-header="false"
  data-show-posts="true"></div

Now I want to change data-show-facepile from true to false through a JavaScript onclick-event.

Thanks in advance!

Upvotes: 0

Views: 102

Answers (4)

Esso
Esso

Reputation: 764

With clean JavaScript in the browser:

document.getElementByClassName('fb-page').setAttribute('data-show-facepile', false), see here for more information on that. It can be smart to give the element an id, and then use document.getElementById() instead.

Now, if you have a button <button id="clickme"> Click me! </button> you can add a handler:

document.getElementById('clickme').addEventListener('click', function(){
    document.getElementByClassName('fb-page')[0].setAttribute('data-show-facepile', false)
});

Note that if there are more than one element of the fb-page-class, the element you want to change may not be the first element of the returned list.

With jQuery: $('.fb-page').attr('data-show-facepile', false). Docs. If you give the element an id, you use $('#id') instead.

So if you have a button: <button id="fb-show-button">Click me! </button> you add a handler: 

$('#fb-show-button').click(function(){
    $('.fb-page')[0].attr('data-show-facepile', false)
})

The note from above also affects this example.

Why do I mention the use of id instead of class? Because when there's a specific element you want to handle, the ID will identify it uniquely, as only one element can have a specific id. More than one element can have the class fb-page. That's why the methods getting elements of a class returns an array.

Upvotes: 1

cgee
cgee

Reputation: 1897

Use jquery.data()

<button>Go</button>
<div class="fb-page" data-href="https://www.facebook.com/ConnectCommunications?fref=ts" data-width="450" data-hide-cover="false" data-show-facepile="true" data-small-header="false" data-show-posts="true">Test</div>

jQuery:

alert(jQuery('.fb-page').data('show-facepile'));
jQuery('button').on('click', function(){
    jQuery('div').data('show-facepile', false);
    alert(jQuery('.fb-page').data('show-facepile'));
});

http://jsfiddle.net/2taxxnwn/

Upvotes: 0

Rene Koch
Rene Koch

Reputation: 337

Very simple:

1) Give your Div an ID
2) 

function YourEvent() {
   $('IdOfYourDiv').prop('data-show-facepile', true)
 }

Upvotes: 0

BhavO
BhavO

Reputation: 2399

Assuming you want to click on the div, like this:

 $('.fb-page').on('click', function(){
     $(this).data('show-facepile', false);
 });

Upvotes: 0

Related Questions