Question

我正在尝试学习Javascript中函数的工作方式。这应该是输出用户消息的函数。当我点击我的3个按钮时没有任何反应。我究竟做错了什么？多谢你们。

function buttonReport(buttonId, buttonName, buttonValue) {
    var userMessage1 = "Button id: " + buttonId + "\n";
    var userMessage2 = "Button name: " + buttonName + "\n";
    var userMessage3 = "Button Value: " + buttonValue + "\n";
}

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

Answer 1

你没有对这些变量做任何事情：

function buttonReport(buttonId, buttonName, buttonValue) {
      var userMessage1 = "Button id: " + buttonId + "\n";
      var userMessage2 = "Button name: " + buttonName + "\n";
      var userMessage3 = "Button Value: " + buttonValue + "\n";
      console.log(userMessage1, userMessage2, userMessage3);
}

Answer 2

您的功能正在被调用，但实际上并未发送消息或将其发送到任何地方...请尝试以下操作。

<script>
function buttonReport(buttonId, buttonName, buttonValue) {
  var userMessage1 = "Button id: " + buttonId + "\n";
  var userMessage2 = "Button name: " + buttonName + "\n";
  var userMessage3 = "Button Value: " + buttonValue + "\n";

 alert(userMessage1);
 alert(userMessage2);
 alert(userMessage3);
}
</script>

这将使该函数实际上在页面上创建一个javascript警报，而不是仅仅将3个功能范围的变量加载到内存中。

Answer 3

正如其他人提到的那样，一旦构建完消息，您就不会输出消息。即你像这样构建它们：

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

但是你对包含该消息的变量什么都不做。所以，您可以将它们显示到控制台，如下所示：

console.log(userMessage1);

或者，向用户显示如下：

alert(userMessage1);

顺便说一句，您还可以减少函数的参数数量并传递按钮对象本身，如下所示：

onclick="buttonReport(this)"

然后你的函数可以从中获取所有必要的值，如下所示：

function buttonReport(btn) {
  var userMessage1 = "Button id: " + btn.id + "\n";
  var userMessage2 = "Button name: " + btn.name + "\n";
  var userMessage3 = "Button Value: " + btn.value + "\n";

  console.log(userMessage1 + userMessage2 + userMessage3);
}

您希望这样做的原因之一是出于维护原因。稍后你想要显示两个值（或四个或一个）而不是三个，你只需要在一个地方（函数）更改代码，而不是调用函数的所有位置。

请参阅下面的演示

＆＃13;

function buttonReport(btn) {
  var userMessage1 = "Button id: " + btn.id + "\n";
  var userMessage2 = "Button name: " + btn.name + "\n";
  var userMessage3 = "Button Value: " + btn.value + "\n";

  console.log(userMessage1 + userMessage2 + userMessage3);
}

＆＃13;

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

＆＃13;

我的Javascript函数没有被调用

3 个答案: