CODEWITHSUNDEEP
javascripthtml
Jenny
Jenny

Reputation: 121

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

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

Upvotes: 0

Views: 221

Answers (3)

sascha10000
sascha10000

Reputation: 1240

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>

Upvotes: 2

Shubham Gupta
Shubham Gupta

Reputation: 2646

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

Upvotes: 0

remix23
remix23

Reputation: 3019

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)

Upvotes: 0

Related Questions