使用JavaScript更改MVC Web应用程序中的属性 [英] Using JavaScript to alter attributes in a MVC web application

问题描述

我试图通过一个固定参数来增加进度条的进度，而不考虑当前值。但是，我无法使用.value函数提取当前值。所以，任何帮助都很好。

I am trying to increase the progress of the progress bar by a fixed parameter irrespective of the current value. However, I am not able to extract the current value using the .value function. So, any help is great.

另外，在我的视图本身中包括这个还是可以的，或者我应该使用一个控制器来做同样的事情？

Also, is it okay to include this in my view itself or should I use a controller for the same?

@{
    ViewBag.Title = "Test";
}

<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<p>Testing Page</p>


<div class="progress progress-striped active progress-sm">
    <div class="progress-bar progress-bar-success" name="blah" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" id="pb1">
        <span class="sr-only">45% Complete</span>
    </div>
</div>

<input type="button" value="Change Width" onclick="increase()" class="btn btn-default btn-sm" />


<script type="text/javascript">
    function increase() {
        var pwidth = document.getElementById("pb1").style.width.value;
        pwidth=pwidth+10;
        var str = pwidth + "%";
        document.getElementById("pb1").style.width = str;
    }
</script>

推荐答案

您只需要使用 parseInt ：

You just need to use parseInt:

<script type="text/javascript">
    function increase() {
        var pwidth = parseInt(document.getElementById("pb1").style.width);
        console.log(pwidth);  // output to console
        pwidth += 10;
        var str = pwidth + "%";
        document.getElementById("pb1").style.width = str;
    }
</script>

注意：将来您可以使用 console.log（pwidth）; 用于调试 - 将在F12 Dev工具控制台的控制台上显示值。在最初的情况下，它显示为 undefined 。

Note: In future you can just use console.log(pwidth); for debugging - will show value on console in the F12 Dev tools console. In the original case it was showing as undefined.

这篇关于使用JavaScript更改MVC Web应用程序中的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！