html – ASP.NET MVC; Javascript: How can I start the timer by value change?-ThrowExceptions

Exception or error:

I’m very new to ASP.NET MVC and web development and don’t know how I can let my timer start by numberBox_valueChanged and not just call my button_OnClick method?
Here’s the Code snippet from the razorpage of my Asp.net MVC Application that I made with some Devextreme Elements:

 @using DevExtreme.AspNet.Mvc;
    <html>
    <body>
    <div class="form">
                @(Html.DevExtreme().Button()
                    .ID("progress-button")
                    .Text("Start")
                    .Width(120)
                    .OnClick("button_onClick")
                )
            </div>
    <div class="progress-info">
                Time left 00:00:<span id="timer">10</span>
            </div>

            <div id="progress-info">
                @(Html.DevExtreme().ProgressBar()
                    .ID("progressBarStatus")
                    .Min(0)
                    .Max(100)
                    .Width("100%")
                    .Height(50)
                    .StatusFormat(new JS("progressBar_statusFormat"))
                    .OnComplete("progressBar_onComplete")
                    .OnValueChanged("progressBar_valueChanged")
                )

                <div>
                <div>
                    @(Html.DevExtreme().Slider()
                        .ID("handler-slider")
                        .Name("MyValue")
                        .Min(-20)
                        .Max(20)
                        .Value(new JS("spin"))
                        .Width(1140)
                        .Visible(false)
                        .OnValueChanged(@<text>
                            function(e){
                            $("#lineargauge").dxLinearGauge("instance").value(e.value);
                            }
                        </text>)
                    )
                </div>
                <div class="dx-field-value">
                    @(Html.DevExtreme().NumberBox()
                        .ID("slider-value")
                        .Name("MyValue")
                        .Value(new JS("spin"))
                        .InputAttr(false)
                        .Min(-20)
                        .Max(20)
                        .Width(200)
                        .ShowSpinButtons(true)
                        .OnValueChanged("numberBox_valueChanged")
                    )
                </div>

That’s what my script looks like

     <script>
            var spin = @Model.Drehrichtung;

    function numberBox_valueChanged(data) {
                $("#handler-slider").dxSlider("instance").option("value", data.value);
                //Extrem wichtig, damit dieser Wert nach hinten in den Controller gegeben werden kann
                drehen = data.value;
            }
            function progressBar_valueChanged(data) {
                $("#progressBarStatus").dxProgressBar("instance").option("value", data.value);
            }
            function marker_valueChanged(data) {
                $("#lineargauge").dxSlider("instance").option("value", data.value);
                drehen = data.value;
            }
            var seconds = 10,
                inProgress = false;

            window.intervalId = window.intervalId || null;

            function timer(){
                seconds--;
                setCurrentStatus();
                if (seconds === 0) {
                    clearInterval(intervalId);
                    seconds = 10;
                    return;
                }
            }

            function setCurrentStatus() {
                $("#progressBarStatus").dxProgressBar("option", "value", (10 - seconds) * 10);
                $("#timer").text(("0" + seconds).slice(-2));
            }

            function progressBar_statusFormat(value) {
                return;
            };
    function button_onClick(e) {
                    clearInterval(intervalId);

                    $("#progressBarStatus").removeClass("complete");

                    if (inProgress) {
                        e.component.option("text", "Continue");
                        clearInterval(intervalId);
                    } else {
                        e.component.option("text", "Stop");
                        setCurrentStatus();
                        intervalId = setInterval(timer, 1000);
                }
                inProgress = !inProgress;
            };
    </script>
    </body>
    </html>
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *