7 Replies - 429 Views - Last Post: 13 October 2017 - 10:39 AM

#1 Siena1383  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 29-March 10

How to pass input values to functions via parameters?

Posted 11 October 2017 - 06:32 PM

1. I'm confused about when a function needs parameters and when it doesn't.
2. I also want to know how to pass inputs into a function via parameters.

Let me start by giving a simple web page and function as an example:

HTML:
<label>Enter a word  <input type="text" id="word" name="word" /></label>
<button type="submit" id="btn" name="btn">Enter</button>



JS:
function checkInput() {
                       console.log("You entered " + word.value);
		      }
		
document.getElementById("btn").addEventListener("click", checkInput);



No parameters - function works. But why does it work without a parameter?

If I want to use a parameter, as below, the output is "You entered undefined"
function checkInput(w) {
                       console.log("You entered " + w.value);
		      }
		
document.getElementById("btn").addEventListener("click", checkInput);



What do I need to do to get this to work with the parameter?

Is there anywhere (free) online that actually teaches how to use JS with web pages, rather than just basic syntax?

Is This A Good Question/Topic? 0
  • +

Replies To: How to pass input values to functions via parameters?

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,057
  • Joined: 08-June 10

Re: How to pass input values to functions via parameters?

Posted 12 October 2017 - 12:29 AM

Quote

I'm confused about when a function needs parameters and when it doesn't.

rule of thumb: any dependency should be passed in as parameter.

the only exception is when you explicitly want a closure or the function is a callback where the parameters are predefined (e.g. the callback function in Element.addEventListener())

Quote

No parameters - function works. But why does it work without a parameter?

automatic global variables.

Quote

If I want to use a parameter, as below, the output is "You entered undefined"

of course. the event object does not have a value property.
Was This Post Helpful? 0
  • +
  • -

#3 ndc85430  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 590
  • View blog
  • Posts: 2,484
  • Joined: 13-June 14

Re: How to pass input values to functions via parameters?

Posted 12 October 2017 - 05:19 AM

View PostSiena1383, on 12 October 2017 - 02:32 AM, said:

If I want to use a parameter, as below, the output is "You entered undefined"
function checkInput(w) {
                       console.log("You entered " + w.value);
		      }
		
document.getElementById("btn").addEventListener("click", checkInput);



What do I need to do to get this to work with the parameter?


I'm not a Javascript programmer, but some general functional programming things apply here:

A function that takes another function as an argument (e.g. addEventListener) is called a higher order function. It's important to realise that a given higher order function will expect the function(s) passed to it to "look" a certain way - that is, in terms of the numbers of parameters they expect and what they return. It's the same as having a function taking a string or an integer as an argument - the functions will expect the arguments to be of those types and won't work correctly if what is passed is of a different type. So, you can think of a function taking one argument and returning nothing to have a different type to one that takes no arguments and returns nothing (and so on for the different permutations). Indeed, some languages (e.g. Scala, which is what I do day to day) do represent functions in their type system like this.
Was This Post Helpful? 0
  • +
  • -

#4 Siena1383  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 29-March 10

Re: How to pass input values to functions via parameters?

Posted 12 October 2017 - 12:39 PM

Dormilich, I'm a beginner. Your answers are way beyond me.
1. "Any dependency should be passed in as a parameter." What is a dependency (in programming or in JS)?
2. Okay, passing the input in as a parameter IS what I want to do. HOW do I do that? (I see the filmy text on the background of this reply form saying don't ask for code, but this isn't homework. I need a line or two of code so I see the correct syntax.)
3. I know what a global variable is, but what is an "automatic global variable"? As far as I can see, I haven't used any global variables.
4. "The event object does not have a value property." I am trying to get the input's value. Are you saying the input is the event object? I would think the button would be the event object.

ndc85430, I gather you're talking about addEventListener as a function. I hadn't thought of it as one (real newbie, remember), but that makes sense. However, I do know it takes two parameters, the event and the function to call when the event occurs.

You mentioned that you're not a Javascript programmer, so perhaps you don't know that JS is kind of fluid regarding type. You don't explicitly declare a type when you declare a variable, for instance, and the JS can dynamically change the type if it thinks it should, based on the context. So my problem with passing in the parameter isn't because of type.

Still looking for someone who can give me an example of how to pass in the input as a parameter and have this example function work. VERY frustrated with the lack of info online and in books!
Was This Post Helpful? 0
  • +
  • -

#5 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1829
  • View blog
  • Posts: 5,761
  • Joined: 15-January 14

Re: How to pass input values to functions via parameters?

Posted 12 October 2017 - 01:56 PM

When you add an event listener, the browser calls that function and passes a single thing, an event object. If you want to pass your own stuff one way is to use an anonymous function as the actual event listener, which then calls your own function, e.g.:

document.getElementById("btn").addEventListener("click", function(eventObj) {checkInput(yourOwnVariable)});

Then the browser will execute that anonmyous function, which will then call your own function and pass whatever you want to pass (pass the event object to it also if you want it to have access to that).

Quote

I know what a global variable is, but what is an "automatic global variable"? As far as I can see, I haven't used any global variables.

Some browsers automatically create global variables from elements that have an ID. It's not something you should count on, but that's why the code works in whatever browser you're testing.

Quote

"The event object does not have a value property." I am trying to get the input's value. Are you saying the input is the event object? I would think the button would be the event object.

No, the event is the event object. This is an event object:

https://developer.mo...s/Web/API/Event

It has properties like target. If you put a click event on a submit button, then event.target will refer to the submit button. Your input element has nothing to do with the event though, it's not part of the submit button's click event. If you want to get the value of that field then you can get the value in the code I posted above and pass the value to your own function, you could pass the ID of that field to the function and look it up inside the function, or you can hard-code that function to get the element and look up the value, which is the worst option because now the function only works for a single field on the page.
Was This Post Helpful? 0
  • +
  • -

#6 Siena1383  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 29-March 10

Re: How to pass input values to functions via parameters?

Posted 12 October 2017 - 09:41 PM

ArtificialSoldier (what exactly is an artificial soldier, by the way?), thanks for shedding light on some of this.

I don't want to pass in an inline function, though. I want to know how to pass inputs from a web page into a function as parameters. I want to know the correct syntax for the function as I wrote it in my original post.
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,057
  • Joined: 08-June 10

Re: How to pass input values to functions via parameters?

Posted 13 October 2017 - 12:18 AM

View PostSiena1383, on 13 October 2017 - 06:41 AM, said:

I want to know how to pass inputs from a web page into a function as parameters. I want to know the correct syntax for the function as I wrote it in my original post.

With the type of code you have (doing something when a button is clicked), that is not possible because it's not your coding that calls your function, but the JS engine itself. hence you must go a different route (as outlined by ArtificialSoldier) to get a hold of the input element.
Was This Post Helpful? 0
  • +
  • -

#8 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1829
  • View blog
  • Posts: 5,761
  • Joined: 15-January 14

Re: How to pass input values to functions via parameters?

Posted 13 October 2017 - 10:39 AM

To expand on that, if you want to execute a function and pass arguments you just do this, you've seen this syntax all over the place (you pass arguments to addEventListener, for example):
functionName(arg1, arg2, arg3)

That's it, that will immediately execute the function and pass those arguments to it. So that's probably going to make you think to do this:
document.getElementById("btn").addEventListener("click", checkInput(inputValue));

But that's wrong, that's not going to do what you think it does, it's not going to call checkInput and pass it the value of inputValue whenever someone clicks on the btn element. What that line of code does is execute checkInput immediately, and pass the value of inputValue to it, and then set whatever the return value of that function is to the event handler for btn click events. If checkInput does not return a function, then that won't work at all.

There's another way to create a copy of a function that will get passed a certain value when it's executed, but in lieu of that I just showed you how to do it easily with an anonymous function. The code I showed will end up causing your function to get called with whatever you want to pass to it when someone clicks on that element. And I'm pretty sure that's what you're trying to do.

Quote

what exactly is an artificial soldier, by the way?

It's like a soldier, but it's artificial. It's also an album by Frontline Assembly.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1