How do I output a function with a parameter argument?

Atman Atos · Dec 18, 2022

I have successfully executed Javascript functions without parameters, to display on my web browser but I have a problem outputting functions with parameter arguments. What's the correct way of outputting this function with a parameter argument to the web browser?

Here's the initial code, it outputs on the console of online code editors. It has item as the set parameter argument.

JavaScript:

const doubler = (item) => item * 2;
doubler(4);

My attempt 1st at the output on a web browser with item still set as the argument. The issue with this attempt is that it doesn't wait for the onClick() before it displays the output

JavaScript:

const doubler = (item) => item * 2;
    document.getElementById("funcWithPara").innerHTML = doubler(4);

HTML:

<button onclick="doubler()">click me</button>
            <p id="funcWithPara"></p>

My attempt 2nd at the output on a web browser with item still set as the argument. This displays no output.

JavaScript:

document.getElementById("myBtn").addEventListener("click", doubler())
    const doubler = (item) => item * 2;
    document.getElementById("funcWithPara").innerHTML = doubler(4);

HTML:

<button id="myBtn">click me</button>
            <p id="funcWithPara"></p>

None of the attempts work. What's the correct method of output on a web browser? NOTE that I don't want to declare a variable stating that item = 4. Rather I want the value to be passed in and continue to have item, declared as a parameter of the doubler function

Padonak · Dec 18, 2022

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    
    </style>
  </head>
  <body>   
      <button id="btn_1">Button for addEventListener doubler(4)</button>
    <button id="btn_2" onclick="doubler(5)">Button for onclick=doubler(5)</button>
    <br />
    <p id="result"></p>
    <script>
   const doubler = (item) => document.getElementById('result').innerHTML = item * 2;
  
   document.getElementById('btn_1').addEventListener( 'click', () => doubler(4) );
   </script>
  </body>
</html>

Atman Atos · Dec 18, 2022

Padonak said:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
  
    </style>
  </head>
  <body> 
      <button id="btn_1">Button for addEventListener doubler(4)</button>
    <button id="btn_2" onclick="doubler(5)">Button for onclick=doubler(5)</button>
    <br />
    <p id="result"></p>
    <script>
   const doubler = (item) => document.getElementById('result').innerHTML = item * 2;
 
   document.getElementById('btn_1').addEventListener( 'click', () => doubler(4) );
   </script>
  </body>
</html>

Both methods work. This is insightful and useful. However the event listener does not work, only the onclick works. The error is ReferenceError: doubler is not defined

Padonak · Dec 20, 2022

Atman Atos said:
However the event listener does not work, only the onclick works. The error is ReferenceError: doubler is not defined

I would recommend you to forget these two words - "Internet Explorer" - and begin to use a good browser(for example Chrome, Firefox). It seems IE do not understand arrow functions and that is not the only bad of this MS application.

Code for your IE:

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    
    </style>
  </head>
  <body>   
      <button id="btn_1">Button for addEventListener doubler(4)</button>
    <button id="btn_2" onclick="doubler(5)">Button for onclick=doubler(5)</button>
    <br />
    <p id="result"></p>
    <script>
   //const doubler = (item) => document.getElementById('result').innerHTML = item * 2;
   const doubler = function(item){document.getElementById('result').innerHTML = item * 2};
  
   //document.getElementById('btn_1').addEventListener( 'click', () => doubler(4) );
   document.getElementById('btn_1').addEventListener( 'click', function(){doubler(4)} );
   </script>
  </body>
</html>

Atman Atos · Dec 22, 2022

I use Mozilla, codepen & jsfiddle

Padonak · Dec 22, 2022

Atman Atos said:
I use Mozilla, codepen & jsfiddle

Here is a screenshot taken from my screen. It's in russian. You can see the "arrow functions edition" pretty working in Mozilla Firefox. I am using Notepad++ to write code and then execute my files in Chrome which is my main browser(or in FF for testing). Who needs those codepen or jsfiddle? What for?

Atman Atos · Dec 22, 2022

I am migrating from codepen & jsfiddle. I use them mostly for quickly helping others figure out what fix their code needs. On my Mozilla browser, it's in English, I speculate that a previous setting is what makes Russian come up on your screen. You're right, the arrow function works well.

How do I output this recursive function correctly to a web browser?	2	Dec 17, 2022
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
I am trying to make an audio player, how do I get the selected file to be playable?	5	Mar 29, 2022
How to use a global variable within a function?	5	Jan 23, 2023
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
Only one table shows up with the information	2	Mar 29, 2023
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript?	0	May 1, 2023

How do I output a function with a parameter argument?

Atman Atos

Padonak

Atman Atos

Padonak

Atman Atos

Padonak

Atman Atos

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads