Javascript 将参数从onclick事件传递到使用数据对象构建HTML的函数中，到目前为止，该函数有一半在JSFIDLE中工作

我试图从javascript对象访问数据，以便用适当的信息动态地填充一个div。在我的示例中，教程中有三个步骤。当用户完成每个步骤后，他们单击按钮继续下一步。我希望函数“getStepData（stepNumber）”被调用onclick，步骤号被传递到函数中，并在javascript中构建的html中使用。示例代码在这里，但我也让它在JSFIDLE中工作了一半：

//创建一个数据对象，该对象将保存以后要访问的所有数据。
var tutorialDataObj={
//定义教程容器
profilePageTutorials:{
//定义步骤及其数据
步骤1：{
id:“tip1”，
课程：“个人资料提示”，
标题：“第一步”，
字幕：“如何编辑您的个人资料”
}，//结束：步骤1
步骤2：{
id:“tip2”，
类：“搜索提示”，
标题：“第二步”，
副标题：“如何搜索”
}，//结束：步骤2
步骤3：{
id:“tip3”，
课程：“更改照片提示”，
标题：“第三步”，
字幕：“如何上传新照片”
}//完：第3步
}//完：简介教程
}//完:tutorialDataObj
//标识动态html将写入的div容器
var tutorialWindow=document.getElementById（“教程步骤窗口”）；
//缩短对象中数据的路径
var tutorials=tutorialDataObj.profilePageTutorials；
//循环执行数据对象中的每个步骤
用于（教程中的var步骤）{
//使用对象中的数据构建要动态插入的html
var html=[“”+tutorials.step1.title+“”+
“+tutorials.step1.subtitle+”]；
//将html插入div容器
tutorialWindow.innerHTML=html；
警报（教程[步骤].字幕）；
}
函数getStepData（步骤编号）{
alert（stepNumber）；//这里，我试图从输入按钮访问参数。我想将其传递到我在上面构建的html中，以便在用户单击按钮时可以从预期步骤访问数据。
}

以下是html：

<div id="tutorial-step-window" class="tip">HOWDY</div>
<input type="button" value="Change Data" onclick="getStepData(3)" />

你好 试试这个

我用一种稍微不同的方式进行描述，然后你描述，但实现了相同的目标：

我删除了按钮上的内联单击事件并添加了一个id。

---

然后我在js中添加了点击，并根据对象中的步数进行了计数。

嗨，Richard，恐怕我在这个链接上看不到你的解决方案：如果不是很麻烦，你介意再发布一次吗？谢谢你的回答；）没问题-很好的解决方案。。。我现在就试试。谢谢你，理查德！你好，Richard，这个解决方案非常有效。再次感谢！我希望我能投这个票，但我还没有足够的声望点：（本质上，你是不是在尝试创建一个包含“下一步”和“上一步”按钮的多步骤教程？

<div id="tutorial-step-window" class="tip">HOWDY</div>
<input type="button" value="Change Data" onclick="getStepData(3)" />