时间戳

首页 > 解决方案 > 我可以传递一个对象作为 onClick 函数的参数吗

javascript - 我可以传递一个对象作为 onClick 函数的参数吗

问题描述

我目前正在尝试为调用单独函数并传递使用对象作为此函数的参数的按钮创建 onclick 事件。

我的代码如下所示：

async function getJourneyAwait(){
  const routes = await getJourney();
  var innerHTML = " "; 
  if(!(routes === null)) {
    for (var i = 0; i < routes.length; i++){
        console.log(routes[i])
        console.log(typeof(routes[i]))
        var route = routes[i]
        innerHTML += '<p> Route ' + i+1 + ': <button onClick=startJourney(' + route + ')>Start Trip</button></p>'
    }
    document.getElementById('tripmessage').innerHTML = innerHTML;
  }
}


function startJourney(route){

    console.log(route);
}

当我尝试单击 Start Trip 按钮时，我收到一条错误消息： Uncaught SyntaxError: Unexpected end of input at .(index):1

当我检查按钮元素时，参数似乎存在某种错误，因为元素如下：

   
<button onclick="startJourney([object" object])="">Start Trip</button>

我尝试了多种不同的方法，在某些情况下，我已经能够运行该函数，但是当我执行所有记录到控制台的操作时，这些都是未定义的。例如，如果我删除“路由”任一侧的加号和引号，该函数运行但未定义被记录到控制台。

标签： javascriptobjectonclick

解决方案

[object object]您看到的是将对象转换为字符串格式的结果route。

我建议以下两种方法之一：

  1. 使用 创建按钮元素createElement，使用 将 startJourney 函数分配给 onclick 属性button.onclick = function() { createJourney(route) ]}并将其附加到父元素。
  2. 向按钮元素添加 id 并使用添加单击事件侦听器addEventListener("click", createJourney(route))

编辑：正如@Teemu 所指出的，如果您使用选项#1，则必须替换var i = 0为，let i = 0因为在具有基于 let 的索引的循环中，通过循环的每次迭代都会有一个具有循环范围的新变量 i 。

推荐阅读