Question

我当前正在尝试为一个按钮创建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);
}

当我尝试单击“开始行程”按钮时，出现错误，指出：未捕获的SyntaxError：。（index）：1处的输入意外结束

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

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

我尝试了多种不同的方法，在某些情况下，我已经能够运行该功能，但是当我执行此操作时，登录控制台的所有内容均未定义。例如，如果我删除“ route”两侧的加号和引号，则该函数会运行，但未定义的消息会记录到控制台。

Answer 1

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

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

使用createElement创建button元素，使用button.onclick = function() { createJourney(route) ]}将startJourney函数分配给onclick属性，并将其附加到父元素。
向按钮元素添加ID，然后使用addEventListener("click", createJourney(route))

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

Answer 2

我应该建议您使用Data attributes并以这种方式绑定按钮：

function getJourneyAwait(){
  const routes = getJourney();
  var innerHTML = " "; 
  if(routes) {
    for (var i = 0; i < routes.length; i++){
        var route = routes[i]
        innerHTML += '<p> Route ' + route + ': <button onclick="startJourney(this)" data-route="' + route + '">Start Trip</button></p>'
    }
    document.getElementById('tripmessage').innerHTML = innerHTML;
  }
}

function getJourney(){
  return [1, 2, 4, 6]
}


function startJourney(element){
    console.log(element.dataset.route);
}

<div id="tripmessage"></div>
<button onclick="getJourneyAwait()">GetJourney</button>

我可以将对象作为onClick函数的参数传递吗

2 个答案: