Difference between calling a function with parameter and OnClick triggering a function without parameter in Javascript?

Question

Saw a code like this:

index.html

<script type = "text/javascript"  src = "choices.js" ></script>
 <form id = "myForm"  action = "">
  <p>
    <label> <input type = "radio" name = "myChoice" value = "A" /> 
    A </label>
    <br />
    <label> <input type = "radio"  name = "myChoice" value = "B" />
    B </label>
    <br />
    <label> <input type = "radio"  name = "myChoice" value = "C"/> 
    C </label></form>
<script type = "text/javascript"  src = "choicesDom.js" ></script>

choices.js

function userChoice (choice) {
 var dom = document.getElementById("myForm");
 for (var index = 0; index < dom.myChoices.length; index++) {
    if (dom.myChoices[index].checked) {
        choice = dom.myChoices[index].value;
        break; 
    }
}

choicesDom.js

var dom = document.getElementById("myForm");
dom.elements[0].onclick = userChoice;
dom.elements[1].onclick = userChoice;
dom.elements[2].onclick = userChoice;`

Question is: Why is it that in choicesDom.js, userChoice is being called like a variable? Why is a parameter not required, and Why is it not userChoice() or userChoice(value)? When tried, it was shown as a syntax error.

What is the rule of a function for javascript? It seems to be quite loosely used as compared to other programming languages' function

sascha10000 · Accepted Answer · 2018-09-21 08:45:21Z

2

This is quite simple. In Javascript functions are first-class citizens, which means that you can use them like variables in a broader sense. In the last part of your code example the defined function "userChoice" is assigned to each onclick function of the given elements.

The question you are asking is wrong. In the last part the function is NOT triggered.

Short example how you can use functions in a variable like manner (functions are first-class objects)

// define some function
function someFunction(val){
  console.log(val);
}

// creates an object which has a reference to this function
var obj = someFunction;

// calls the function via obj
obj("Hi");

Whatever your posted code should accomplish, this is a corrected version with all major syntactic errors removed:

function userChoice (choice) {
 var dom = document.getElementsByName("myChoice");

 for (var index = 0; index < dom.length; index++) {
    if (dom[index].checked) {
        choice = dom[index].value;
        break; 
    }
  }
  console.log(choice);
}

var dom = document.getElementsByName("myChoice");
dom[0].onclick = userChoice;
dom[1].onclick = userChoice;
dom[2].onclick = userChoice;

<form id = "myForm"  action = "">
  <p>
    <label> <input type = "radio" name = "myChoice" value = "A" /> 
    A </label>
    <br />
    <label> <input type = "radio"  name = "myChoice" value = "B" />
    B </label>
    <br />
    <label> <input type = "radio"  name = "myChoice" value = "C"/> 
    C </label></form>

edited Sep 21, 2018 at 8:45

answered Sep 21, 2018 at 7:27

sascha10000

1,2401 gold badge10 silver badges23 bronze badges

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

2 Comments

Jenny Over a year ago

meant to write "getElementById("myForm")" . my bad!

sascha10000 Over a year ago

Doese my answer, answer your question?

remix23 · Accepted Answer · 2018-09-21 07:33:55Z

0

Adding parenthesis (with or without parameters) after a function name is calling that function, whereas passing only the name means that we are not calling it but using it as a variable.

When setting a handler on an event, you dont want to call it right away but rater you tell javascript which function to call when the event happens. And you do it naturally with a variable name that represents your argument(without parenthesis otherwise the function would be executed and the return value of the function would be uses instead)

answered Sep 21, 2018 at 7:33

remix23

3,1722 gold badges13 silver badges26 bronze badges

Comments

Shubham Gupta · Accepted Answer · 2018-09-21 07:35:17Z

0

Code snippet provided in question is incorrect. It should be document.getElementsByName("myChoice") and not document.getElementById("myChoice");

dom.elements[0].onclick = userChoice; This should not work because onclick gives event and not the value.

I have created a code sandbox where you can take a look. When you click 'A' MouseEvent is logged in console and not the value. When you click 'B' value is logged in console. JS always passes event. https://codesandbox.io/s/4jvon6l52x

answered Sep 21, 2018 at 7:35

Shubham Gupta

2,6461 gold badge10 silver badges19 bronze badges

2 Comments

Jenny Over a year ago

meant to write "getElementById("myForm")" . my bad!

sascha10000 Over a year ago

@ShubhamGupta onclick is a reference for a callback which in this case userChoice is assigned to. The event is called 'click'. eg. someElement.on('click', doStuffFunction) is a registration to the click event. Therefore it is not right that the reference onClick used here is an "event", it is triggered by an event.

Collectives™ on Stack Overflow

Difference between calling a function with parameter and OnClick triggering a function without parameter in Javascript?

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related