Pass parameter from onclick event into function that builds HTML using data object - half working so far in jsfiddle

Question

I am trying to access data from a javascript object in order to dynamically populate a div with the appropriate info. In my example, there are three steps in a tutorial. When the user is finished with each step, they click the button to go on to the next step. I'd like the function "getStepData(stepNumber)" to be called onclick, and for the step number to be passed into the function and used in the html I am building in the javascript. The sample code is here, but I also have it half working in jsFiddle:

http://jsfiddle.net/enajenkins/xvFeX/24/

//create data object that will hold all data to be accessed later.               
var tutorialDataObj = {    
//define the tutorial container
profilePageTutorials: {        
    //define the steps and their data
    step1: {
        id: "tip1",
        class: "profile_tip",
        title: "Step 1",
        subtitle: "How to edit your profile"
    },//END: step1        
    step2: {
        id: "tip2",
        class: "search_tip",
        title: "Step 2",
        subtitle: "How to search"
    },//END: step2        
    step3: {
        id: "tip3",
        class: "change-photo_tip",
        title: "Step 3",
        subtitle: "How to upload a new photo"
    }//END: step3                
}//END: profileTutorial    
}//END: tutorialDataObj
//identify the div container that the dynamic html will be written into
var tutorialWindow = document.getElementById("tutorial-step-window");
//shorten the path to the data in the object
var tutorials = tutorialDataObj.profilePageTutorials;
//loop through each step in the data object
for ( var step in tutorials ) {
    //build the html to be inserted dynamically using data from object
    var html = ["<h2 id='title'>" + tutorials.step1.title + "</h2>" +
                "<h3>" + tutorials.step1.subtitle + "</h3>"];
    //insert the html into the div container
    tutorialWindow.innerHTML = html;
    alert(tutorials[step].subtitle);
}

function getStepData (stepNumber) {
alert(stepNumber); //here, I'm trying to access the argument from the input button.     I'd like to pass it into the html I'm building above so I can access the data from the intended step when the user clicks the button.
}

and here is the html:

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

Answer 1

Try this..

http://jsfiddle.net/xvFeX/45/

I go about it a slightly different way then you describe but accomplish the same goal:

I remove the inline click event on the button and added an id. then I added the click in the js and also did a count in there based on the number of steps in the object.