Bootstrap:进度条和从用户接收数据 [英] Bootstrap: Progress bar and receiving data from the user

问题描述

这将是一个非常基本的问题.我想要做的是有一个简单的进度条和一种从用户那里接收号码的方法.然后我希望我的代码在用户单击按钮并在栏上显示数据时启动.

我的js代码:

var moveBar = function() {var addPoints = prompt("选择金额:");//提示并询问用户输入var bar = document.getElementsByClassName("progress-bar");bar[0].style.width = '"' + parseInt(addPoints) + "%" + '"' ;//console.log('"' + parseInt(addPoints) + "%" + '"');//添加用于测试.显示正确的值，但代码不起作用.}

我的 HTML 代码:

<div id="prog" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >60%

<input type="button" id="progbar" value="Test" onclick="moveBar()"></input>

只要我使用像这里这样的预定义值，代码就可以正常工作

bars[0].style.width = "50%";

需要更改什么才能使其正常工作?

解决方案

您正在向错误的宽度添加引号.
您应该添加不带引号的值.
<块引用>

请注意，您正在更改 div 的宽度.为了看到当前进度，您可以为 id prog 的 div 添加一些背景颜色.

var moveBar = function() {var addPoints = prompt("选择金额:");//提示并询问用户输入var bar = document.getElementsByClassName("progress-bar");bar[0].style.width = parseInt(addPoints) + "%";//console.log(parseInt(addPoints) + "%");//添加用于测试.显示正确的值，但代码不起作用.}

this is going to be very basic question. What I'm trying to do is to have simple progress bar and a way to receive number from the user. Then I want my code to start when user clicks the button and display the data on the bar.

My js code:

var moveBar = function() {
var addPoints = prompt("Select amount:"); // Prompt and ask user for input
var bars = document.getElementsByClassName("progress-bar");
bars[0].style.width = '"' + parseInt(addPoints) + "%"  + '"' ;
//console.log('"' + parseInt(addPoints) + "%"  + '"'); // Added for testing. Displays correct value, but code doesn't work.
}

My HTML code:

<div class="progress">
  <div id="prog" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
    60%
  </div>
</div>

<input type="button" id="progbar" value="Test" onclick="moveBar()"></input>

The code works fine as long as I use predefined value like here

bars[0].style.width = "50%";

What needs to be changed in order for it to work ?

解决方案

You are adding quotes to the width which is wrong.
You should add the value without the quotes.

Note that you are changing the width of the div. In order to see the current progress you could add some background color to the div with id prog.

var moveBar = function() {
    var addPoints = prompt("Select amount:");
    // Prompt and ask user for input
    var bars = document.getElementsByClassName("progress-bar");
    bars[0].style.width = parseInt(addPoints) + "%";
    //console.log(parseInt(addPoints) + "%"); // Added for testing. Displays correct value, but code doesn't work.
}

这篇关于Bootstrap:进度条和从用户接收数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！