How to call javascript function from inside a div?

Question

Please allow me to ask a silly question about javascript function. I wonder if there's a way to call javascript function from the div. Without giving an id nor class.

Function

function callTest(){
    name=$(this).attr('data-name');
    clr=$(this).attr('data-clr');

    $(this).html(name+'/'+clr);
}

Then I want to print the data from the parent div into its content. By doing something like this.

<div data-name="john" data-clr="red">
    <script>callTest()</script>
</div>

So I expect this div will filled with john/red. The reason is there will be a lot of div which is need to pass variable on it's own.

@TheOneWhoMade Of course you can access an element without an id. document.querySelector('[data-name="john"]')... — Heretic Monkey
– Heretic Monkey, Commented Jan 23, 2018 at 16:25
It should be noted that this <script> tag will activate when the page loads, not when the div is clicked or anything. And it won't use the div's scope, either. — Feathercrown
– Feathercrown, Commented Jan 23, 2018 at 16:25
what are you trying to do first of just to clear this up. @Wilf — user9107868
– user9107868, Commented Jan 23, 2018 at 16:27

Zakaria Acharki · Accepted Answer · 2018-01-23 16:25:34Z

3

It will be better to use data() when you want to get data-* attributes :

var name = $(this).data('name');
var clr  = $(this).data('clr');

Then you could use the attribute selector like $('div[data-name]'). Else it will be better to attach an identifier id or a class to your element(s).

$('div[data-name]').each(function() {
  var name = $(this).data('name');
  var clr = $(this).data('clr');

  $(this).html(name + '/' + clr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-name="john" data-clr="red">
</div>

answered Jan 23, 2018 at 16:25

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

7 Comments

mplungjan Over a year ago

Do read this though: stackoverflow.com/questions/7261619/jquery-data-vs-attr

denns Over a year ago

How is it better to use data()? The problem that i, personally, have with data() is, that if you change date at runtime, you wont be able to observe it in the elements panel.

Zakaria Acharki Over a year ago

The data() method made to set/get the data-* attributes, when attr() made for all kind of attributes, so it will be better in the specific case that uses data-* attributes to use the specific related method.. not sure what you men by elements panel @denns

Wilf Over a year ago

In some case data-* is not working. So I better specific the full name with attr.

Rory McCrossan Over a year ago

The only time data() won't work is if you update an existing value using attr(). If you use data() as getter and setter (which you should be) then it works fine.

|

Martijn · Accepted Answer · 2018-01-23 16:31:10Z

3

You can do something like this and select all elements with the data-name attribute:

$('[data-name]').each(function(){
    let name = $(this).attr('data-name');
    let clr  = $(this).attr('data-clr');
    $(this).html(name+'/'+clr);
});

N.B.: Adding a class and using that instead to select the elements is better for performance, as it can use better optimized functions.

edited Jan 23, 2018 at 16:31

answered Jan 23, 2018 at 16:25

Martijn

16.2k4 gold badges39 silver badges73 bronze badges

Comments

denns · Accepted Answer · 2018-01-23 16:27:19Z

2

This should do it:

$('[data-name]').each(function(){
  var name = $(this).attr('data-name');
  var color =$(this).attr('data-clr');
  $(this).text(name + '/' + color);
});

answered Jan 23, 2018 at 16:27

denns

1,1511 gold badge12 silver badges26 bronze badges

Comments

Rick Hitchcock · Accepted Answer · 2018-01-23 16:51:30Z

This accomplishes what you're trying to do:

function callTest() {
  var $div = $('div:last'),
      name = $div.data('name'),
      clr = $div.data('clr');

  document.write(name + '/' + clr);
}

As the browser parses through the HTML, the "last" div will be the one containing the current script element, even if there are multiple divs.

Example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  function callTest() {
    var $div = $('div:last'),
        name = $div.data('name'),
        clr = $div.data('clr');

    document.write(name + '/' + clr);
  }
</script>

<div data-name="john" data-clr="red">
  <script>callTest()</script>
</div>

<div data-name="mary" data-clr="green">
  <script>callTest()</script>
</div>

That is not, however, the best approach.

Instead, change the HTML of all the divs like this:

$('div[data-name]').html(function() {
  return $(this).data('name') + '/' + $(this).data('clr');
});

Example:

$('div[data-name]').html(function() {
  return $(this).data('name') + '/' + $(this).data('clr');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-name="john" data-clr="red"></div>

<div data-name="mary" data-clr="green"></div>

Collectives™ on Stack Overflow

How to call javascript function from inside a div?

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related