Question

I’m curious as to how many of these queue methods I can encapsulate into the Timeline object. I would like to add DOM to update a table with what’s been added into the queue and am curious as to whether I should put it in this same object as well or break it off into another function, if so, how do I then pass arguments?

I’m unsure as to how to implemint this with objects. Would you just write it addTableRow(this.clips.url)? Or should I encapsulate addTableRow() into the Timeline object?

The two objects storing the info and running the array commands.

        function Clip() {
            this.url = userInput.url.value;
            this.inpoint = userInput.inpoint.value;
            this.outpoint = userInput.outpoint.value;
        }

        function Timeline() {
            this.clips = []; 

            this.queue = function() {
                this.clips.push(new Clip());
                addTableRow(this.clips.url); //Creates the new table with the user's URL inside.
            }
        }

        var myTime = new Timeline();

        //Adds the new table row.
        function addTableRow(url) {
            function delayed() {
                var table=document.getElementById("tblVideo");
                var lastRow = table.rows.length;
                // if there's no header row in the table, then iteration = lastRow + 1
                var iteration = lastRow;
                var row = table.insertRow(lastRow);
                var cell1=row.insertCell(0);
                cell1.innerHTML=url;
            }
            setTimeout(delayed,500);
        }

How its working with the user’s input:

        <form id = "userInput">
        <p>
        Url: <input type="text" id="url" size="30" />
        Start Time: <input type="text" id="inpoint" size="2" />
        End Time: <input type="text" id="outpoint" size="2" />
        <input type="button" onclick="myTime.queue()" value="Add" />
        </p>
        </form>

        <table border = "1" id = "tblVideo">
            <tr>
                <th>Youtube URL</th>
            </tr>
        </table>

I’ve already tried .apply() and .call() but I’m not sure if I was using them correctly. With the current code it updates the table with undefined. I not only want to pass the url but the inpoint and outpoint to the table as well.

I’ve been looking around and having really found an example that is like the one I currently have.

Answer 1

Your only real problem is that clips.url is invalid…there are two ways you can access this object within this array…first, put the object in a variable before you push it to the array, or just get the last object in the array like I did here in this jsFiddle.

Here is the jsFiddle using the first option I discussed…which was creating the object first, and then pushing it to the array and using it to add to the table.