Passing parameter form html to js file and getting correct action from buttons in a loop

Question

I am new to HTML and js. My table is able to get some data from my database and display it into a table. I have a loop that renders the filepath, timestamp etc. For each file, I have a simple video player that is able to display the current video given the file path.

My first problem is that the first row works perfectly fine, when I play the video and press my button it skips to the hard coded time. When I click on the second row button it will alter the first rows player and so does every button after the first one.

My second questions, instead of the hard coded time I want to be able to pass in the current timestamp associated with each row instead.

I tried something like `onclick="setCurTime(10)" and in the js file

function setCurTime(int x) { 
    vid.currentTime= x;

} 

but it's not working.

 @model IList<QualityControl.Models.Media>
@{
    ViewData["Title"] = "Quality Control";
}
<script src="@Url.Content(" ~/wwwroot/js/site.js")"></script>

@using (Html.BeginForm("Save", "Home", FormMethod.Post))
{
    <table class="table">
        <tr>
            <th>
                File Path
            </th>
            <th>
                Time Stamp
            </th>
            <th>
                Status
            </th>
            <th>
                Image
            </th>
            <th>
                Video Player
            </th>
            <th></th>
        </tr>
        @for (int i = 0; i < Model.Count; i++)
        {
            <tr>
                <td>
                    @Html.DisplayFor(model => Model[i].Filepath)
                    @Html.HiddenFor(model => Model[i].Filepath)
                </td>
                <td>
                    @Html.TextBoxFor(model => Model[i].Timestamp)
                    @Html.ValidationMessageFor(model => Model[i].Timestamp)
                </td>
                <td>
                    @Html.DisplayFor(model => Model[i].Status)
                    @Html.HiddenFor(model => Model[i].Status)
                </td>
                <td>
                    <img src="~/images/@Html.DisplayFor(model => Model[i].Filepath)" width="300" height="240" />
                </td>
                <td>
                    <button onclick="setCurTime()" type="button">Play current time</button>
                    <video id="myVideo" width="320" height="240" controls>
                        <source src="~/movies/@Html.DisplayFor(model => Model[i].Filepath)" type="video/mp4" />
                    </video>
                </td>
                <td></td>
            </tr>
        }
    </table>

    <td>
        <button type="submit">Save</button>
    </td>

}

my js file

var vid = document.getElementById("myVideo");

function setCurTime() { 
    vid.currentTime= 55;

} 

Answer 1

Id attributes are meant to uniquely identify elements, as such, vid only ever references the first video element. You could give the video elements unique id's and have setCurTime take an element id as it's argument, like you are suggesting be done with the int x time value. Another approach would be to listen for events on a class and dynamically target the nearest video element (no id required!), but that might be out of your current scope of understanding. In general, it is recommended to not put javascript directly in html with a the onclick or other javascript attributes as was done heavily in the past.

As for your second question, is it failing because you are typecasting the variable x perhaps? function setCurTime(int x) {} is not valid, function setCurTime(x) {/**/} is. It is then up to the programmer to treat x like an int. This is one of the reasons people love or hate javascript and also why TypeScript is a popular way to write javascript (you DO specify types and receive warnings from a compiler when misused, etc.)