CODEWITHSUNDEEP
javascripthtmlfunction
MysteryBlokHed
MysteryBlokHed

Reputation: 68

Get contents of a JavaScript function

I was trying to make a function in JavaScript that could set the onClick property of an HTML button.
So, say I have this as my function:

function myFunc(action){
    document.getElementById('mybtn').setAttribute("onClick", action);
}

That would set mybtn's attribute onClick to the contents of the variable action (which should be a function).

So, if I ran the function like this:

myFunc(function(){
    alert("Hello, World!");
});

Then the variable action would be set to

function (){
    alert("Hello, World!");
}

If I ran myFunc as shown, it would successfully add the contents of action to the button's onClick attribute. The only problem is, if I click the button after myFunc has been run, I just get an error. It says:
Uncaught SyntaxError: Unexpected token (

I think that's because in the onClick attribute, you can't have a new function defined.
How can I get only what's inside the function in the variable action?

Upvotes: 2

Views: 343

Answers (3)

Oriol
Oriol

Reputation: 288590

Attribute values can only be strings. Your function is stringified to something like

'function(){ alert("Hello, World!"); }'

And then the event handler parses it as a function body. That means it will be treated as a function declaration, but function declarations require a name. Therefore, yes, there is an unexpected (: there should be a name before it. Firefox provides a more meaningful error

SyntaxError: function statement requires a name


function() {
  alert("Hello, World!");
}

If you really want to use event handler content attributes, you should pass a string containing only the body of the function:

myFunc('alert("Hello, World!")');


function myFunc(action){
  document.getElementById('mybtn').setAttribute("onclick", action);
}
myFunc('alert("Hello, World!")');
<button id="mybtn">Click me</button>

But I strongly discourage event handler content attributes. Instead, use event handler IDL attributes:

function myFunc(action) {
  document.getElementById('mybtn').onclick = action;
}


function myFunc(action) {
  document.getElementById('mybtn').onclick = action;
}
myFunc(function (){
  alert("Hello, World!");
});
<button id="mybtn">Click me</button>

Or even better, event listeners

function myFunc(action) {
  document.getElementById('mybtn').addEventListener('click', action);
}


function myFunc(action) {
  document.getElementById('mybtn').addEventListener('click', action);
}
myFunc(function (){
  alert("Hello, World!");
});
<button id="mybtn">Click me</button>

Upvotes: 2

guest271314
guest271314

Reputation: 1

html onclick event attribute expects a string, not a function. You can defined function to be called then pass string referencing function to myFunc

<div id="mybtn">click</div>
<script>
  function myFunc(action) {
    document.getElementById("mybtn").setAttribute("onclick", action);
  }
  
  function clickHandler() {
    alert("Hello, World!");
  }

  myFunc("clickHandler()");
</script>

Upvotes: 1

mariocatch
mariocatch

Reputation: 8703

You can add an event listener instead of altering the attribute for onclick like this:

function myFunc(action) {
  document.getElementById('mybtn').addEventListener('click', action);
}

myFunc(function() {
  alert('foo');
});
<button id="mybtn">Foo</button>

Upvotes: 6

Related Questions