How do I output a function with a parameter argument?


Joined
Sep 12, 2022
Messages
30
Reaction score
0
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
 
Ad

Advertisements

Joined
Jul 3, 2022
Messages
58
Reaction score
12
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>
 
Joined
Sep 12, 2022
Messages
30
Reaction score
0
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
 
Last edited:
Joined
Jul 3, 2022
Messages
58
Reaction score
12
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>
 
Joined
Jul 3, 2022
Messages
58
Reaction score
12
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? ;)

code-works-in-mozilla.jpg
 
Ad

Advertisements

Joined
Sep 12, 2022
Messages
30
Reaction score
0
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. :cool:
English is the language shown.PNG
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top