CODEWITHSUNDEEP
javascripthtmlfunction
Wasiullah Khan
Wasiullah Khan

Reputation: 21

Calling a function with multiple arguments

<!DOCTYPE html>
<html>
  <head>
    <title>Calling Functions</title>
  </head>
  <body>
    <script type="text/javascript">

      function buttonReport(buttonId, buttonName, buttonValue) {
        // Information about the button id
        var userMessage1 = "button id: " + "buttonId" + "\n";
        // Information about the button name
        var userMessage2 = "button name: " + "buttonName" + "\n";
        // Information about the button value
        var userMessage3 = "button value: " + "buttonValue" + "\n";
        // alert the user
        alert(userMessage1 + userMessage2 + userMessage3);
      }

    </script>

    <input type="button" id="id1" name="Left Hand Button" value="Left" onclick="buttonReport(this.id, this.name, this.value)"/>
    <input type="button" id="id2" name="Center Button" value="Center" onclick="buttonReport(this.id, this.name, this.value)"/>
    <input type="button" id="id3" name="Right Hand Button" value="Right" onclick="buttonReport(this.id, this.name, this.value)"/>

  </body>
</html>

The above function isn't giving me the right values, instead it gives me this

https://i.sstatic.net/Z3LcA.png

I want the function to show me the id, name and value of the input when I click the button.

Upvotes: 0

Views: 38

Answers (4)

Jared Farrish
Jared Farrish

Reputation: 49198

There's a much easier way of doing this, note the class:

<input type="button" id="id1" class="hand-button" name="Left Hand Button" value="Left" />
<input type="button" id="id2" class="hand-button" name="Center Button" value="Center" />
<input type="button" id="id3" class="hand-button" name="Right Hand Button" value="Right" />

Then during window.onload or whatnot, add event listeners and use this to reference the button:

var handbuttons = document.getElementsByClassName('hand-button');

for (var i = 0, c_handbuttons = handbuttons.length; i < c_handbuttons; i++) {
    handbuttons[i].addEventListener('click', function buttonReport() {
        // Information about the button id
        var userMessage1 = "button id: " + this.id + "\n";
        // Information about the button name
        var userMessage2 = "button name: " + this.name + "\n";
        // Information about the button value
        var userMessage3 = "button value: " + this.value + "\n";

        // alert the user
        alert(userMessage1 + userMessage2 + userMessage3);
    });
}

https://jsfiddle.net/hkeLkegL/

Technically, you can do the same thing in your onclick handler by passing this too:

onclick="buttonReport(this)"

And:

function buttonReports(elem)

... elem.value ... elem.id ... elem.name ...

Or .bind(), which gives you context (this):

onclick="buttonReport.bind(this)()"

The () at the end executes the function. Which, of course, means you can use .call() without needing the extra IIFE tagalong:

onclick="buttonReport.call(this)"

Upvotes: 0

brk
brk

Reputation: 50291

You are concatenating string but you need to concat the parameter value with the string 

function buttonReport(buttonId, buttonName, buttonValue) {
  // Information about the button id
  var userMessage1 = "button id: " + buttonId + "\n";
  // Information about the button name
  var userMessage2 = "button name: " + buttonName + "\n";
  // Information about the button value
  var userMessage3 = "button value: " + buttonValue + "\n";
  // alert the user
  alert(userMessage1 + userMessage2 + userMessage3);
}
<input type="button" id="id1" name="Left Hand Button" value="Left" onclick="buttonReport(this.id, this.name, this.value)" />
<input type="button" id="id2" name="Center Button" value="Center" onclick="buttonReport(this.id, this.name, this.value)" />
<input type="button" id="id3" name="Right Hand Button" value="Right" onclick="buttonReport(this.id, this.name, this.value)" />

Upvotes: 1

sagarr
sagarr

Reputation: 1212

var userMessage1 = "button id: " + "buttonId" + "\n";
// Information about the button name
var userMessage2 = "button name: " + "buttonName" + "\n";
// Information about the button value
var userMessage3 = "button value: " + "buttonValue" + "\n";

You are concatenating strings here see, "button id: " + "buttonId", remove the quotes "" and try

Upvotes: 0

Alnitak
Alnitak

Reputation: 339816

Remove the quotes from around the parameter names in the var userMessage1 ... lines, e.g.:

var userMessage1 = "button id: " + buttonId + "\n";

Upvotes: 0

Related Questions