Question

<!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>

上面的函数没有给我正确的值，相反它给了我这个

我希望函数在单击按钮时显示输入的id，名称和值。

Answer 1

您正在连接字符串，但您需要使用字符串连接参数值

＆＃13;

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);
}

＆＃13;

<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)" />

＆＃13;

Answer 2

从var userMessage1 ...行中的参数名称周围删除引号，例如：

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

Answer 3

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";

您在这里连接字符串请参阅"button id: " + "buttonId"，删除引号＆＃34;＆＃34;并尝试

Answer 4

有一种更简单的方法，请注意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" />

然后在window.onload或其他内容中添加事件侦听器并使用this来引用该按钮：

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/

从技术上讲，你也可以通过传递this在你的onclick处理程序中做同样的事情：

onclick="buttonReport(this)"

和

function buttonReports(elem)

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

或.bind()，它为您提供了上下文（this）：

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

最后()执行该功能。当然，这意味着您可以使用.call()而无需额外的IIFE标签：

onclick="buttonReport.call(this)"

调用具有多个参数的函数

4 个答案: