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, Jan 23 '18 at 16:25
that is accesing it with info about the element or using a query selector. @MikeMcCaughan — , Jan 23 '18 at 16:26
what if i give a div an id an access from function with `$(this).parent('div').html(...)` ??? — Wilf, Jan 23 '18 at 16:26
Take a look at [dynamic patterns](http://web.archive.org/web/20150820074329/http://ajaxpatterns.org/On-Demand_Javascript#Changing_the_src_property) — RicardoVallejo, Jan 23 '18 at 16:26
what are you trying to do first of just to clear this up. @Wilf — , Jan 23 '18 at 16:27
when the document is ready ` $(document).ready(function(){...` — Wilf, Jan 23 '18 at 16:45

score 3 · Answer 1 · answered Jan 23 '18 at 16:25

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 '18 at 16:25

Zakaria Acharki

66,747
15
75
101

1

Do read this though: https://stackoverflow.com/questions/7261619/jquery-data-vs-attr – mplungjan Jan 23 '18 at 16:28
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. – denns Jan 23 '18 at 16:29
2

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 – Zakaria Acharki Jan 23 '18 at 16:32
In some case `data-*` is not working. So I better specific the full name with `attr`. – Wilf Jan 23 '18 at 16:33
1

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. – Rory McCrossan Jan 23 '18 at 16:34
i meant the chrome dev tools elements panel. every browser has its own variant but its essentially the same... you can see changes to the dom at runtime. @ZakariaAcharki – denns Jan 23 '18 at 16:36
@mplungjan link explains in detail what i meant – denns Jan 23 '18 at 16:36

Martijn · Answer 2 · 2018-01-23T16:31:10.433

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 '18 at 16:31

answered Jan 23 '18 at 16:25

Martijn

15,791
4
36
68

score 2 · Answer 3 · answered Jan 23 '18 at 16:27

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 '18 at 16:27

denns

1,105
1
11
24

score 1 · Answer 4 · answered Jan 23 '18 at 16:51

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>

How to call javascript function from inside a div?

4 Answers4