Is it possible to Call object methods using html tag inline event attributes?

Question

I am trying to understand the concepts of core javascript. As we all know, We can call functions which are in global context for some event like this.

Html

<span class="name" onclick="clicked()">Name</span>

JavaScript

function clicked(){
   alert("span clicked");
}

But why we cannot call function i.e object method like following:

Html

<span class="name" onclick="nameobject.clicked()">Name</span>

javaScript

var nameobject = {
   clicked: function(){
     alert("Clicked");
   }
}

Is there something I am missing? Can someone help me on this?

You can call it but your js code should bind before html

Super User
– Super User

2017-01-23 11:26:37 +00:00
Commented Jan 23, 2017 at 11:26 — Super User
– Super User, Commented Jan 23, 2017 at 11:26
can you reproduce the problem in stacksnippet ???

Pranav C Balan
– Pranav C Balan

2017-01-23 11:27:29 +00:00
Commented Jan 23, 2017 at 11:27 — Pranav C Balan
– Pranav C Balan, Commented Jan 23, 2017 at 11:27

Meer · Accepted Answer · 2017-01-23 12:06:24Z

1

You can call it but your js code should bind before html code You can check fiddle

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var nameobject = {
   clicked: function(){
     alert("Clicked");
   }
}
</script>
<span class="name" onclick="nameobject.clicked()">Name</span>

edited Jan 23, 2017 at 12:06

Meer

2,8612 gold badges21 silver badges28 bronze badges

answered Jan 23, 2017 at 11:28

Super User

9,6623 gold badges34 silver badges48 bronze badges

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

1 Comment

SsNewbie Over a year ago

Sorry my bad, Without going through some minor error I posted my question here. We can call JS even after Html code, as object will be available globally. Thanks for helping out.

Ritik Saxena · Accepted Answer · 2017-01-23 11:43:00Z

0

As far as I know, no such condition exists. It would work either way.

<span class="name" onclick="nameobject.click()">Name</span>
<span onclick="clicked()">Name2</span>
<script>
var nameobject = {
   click: function(){
     alert("span 1 Clicked");
   }
}
var clicked = function(){
  alert("span 2 clicked");
  }
</script>

answered Jan 23, 2017 at 11:43

Ritik Saxena

7241 gold badge13 silver badges26 bronze badges

1 Comment

SsNewbie Over a year ago

Yeah, Correct. As I mentioned above, without analyzing error i posted question. It would work either way.

Vic · Accepted Answer · 2017-01-23 11:55:36Z

0

It works if you do NOT include your object declaration inside a $(document).ready() or window.onload function.

Example without window.onload:

var nameObject = {
   clicked: function(){
     alert("Clicked");
   }
}

<button onClick="nameObject.clicked()">
Click Me
</button>

Example with window.onload(throws error)

window.onload = function(){
  var nameObject = {
   clicked: function(){
     alert("Clicked");
   }
  }
};

<button onClick="nameObject.clicked()">
Click Me
</button>

answered Jan 23, 2017 at 11:55

Vic

431 silver badge5 bronze badges

Collectives™ on Stack Overflow

Is it possible to Call object methods using html tag inline event attributes?

Html

JavaScript

Html

javaScript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Html

JavaScript

Html

javaScript

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related