为用户填写表单并显示的每个输入字段添加分数

Question

Currently i have developed a program that gets the count of all the inputs field and adding up a percentage for the numbers of fields that are filled individually.目前我已经开发了一个程序，它可以计算所有输入字段的数量，并为单独填写的字段数量加起来一个百分比。

what i need now here, i need to assign a number to each input field and when the user fills an input field i need to show it to the user as a " SCORE ".我现在需要的是，我需要为每个输入字段分配一个数字，当用户填写输入字段时，我需要将其作为“分数”显示给用户。

below is the program i have built.下面是我建立的程序。

<html>
<body>
<label> Name </label>
<input class="track"/>

<label> Name </label>
<input class="track"/>

<h5>Profile Strength  <span class='perc'>0</span>%</h5>

</body>
</html>

and the JavaScript is JavaScript 是

<script>
   $('.track').change(function(e) {
update_progress();
});

// supports any number of inputs and calculates done as %

function update_progress() {
var count = $('.track').length;
var length = $('.track').filter(function() {
    return this.value;
}).length;
var done = Math.floor(length * (100 / count));
$('.perc').text(done);
$('.meter').width(done + "%");
}

so when you fill the first input field the 'Profile strength' will show 50% as there are only 2 input fields, and when you fill the second input it will show 100%.因此，当您填写第一个输入字段时，“个人资料强度”将显示 50%，因为只有 2 个输入字段，而当您填写第二个输入字段时，它将显示 100%。

i want to show a number instead of a percentage here like我想在这里显示一个数字而不是百分比

input 1 = 10输入 1 = 10

input 2 = 20输入 2 = 20

so when the user fills input 1 his "SCORE" will be 10, and when the user fills the next input the total must add on and show 30 in real time.因此，当用户填写输入 1 时，他的“分数”将为 10，当用户填写下一个输入时，总数必须添加并实时显示 30。

sorry if have confused a few developers but this the only way i understood the assignment i got.抱歉，如果让一些开发人员感到困惑，但这是我理解我得到的任务的唯一方法。

Answer 1

Try the following: Html:请尝试以下操作：Html：

<html>
 <body>
  <label> Name </label>
  <input class="track" data-score=10 />

  <label> Name </label>
  <input class="track" data-score=20 />

  <h5>Profile Strength  <span class='perc'>0</span>%</h5>
  <h5>Score <span id="score">0</span></h5>
 </body>
</html>

JS: JS：

$('.track').change(function(e) {
    update_progress();
});

// supports any number of inputs and calculates done as %

function update_progress() {
    var score = 0
    $('input.track').each(function(){
      var _score = $(this).data("score")
        if ($(this).val().length > 0) {
          score += _score
        }
      })
   $('#score').text(score)
   var count = $('.track').length;
   var length = $('.track').filter(function() {
      return this.value;
   }).length;
   var done = Math.floor(length * (100 / count));
   $('.perc').text(done);
   $('.meter').width(done + "%");
}

Or, a live version https://jsfiddle.net/wmt6cznh/2/或者，实时版本https://jsfiddle.net/wmt6cznh/2/

Is this what you want to achieve?这是你想要达到的目标吗？

为用户填写表单并显示的每个输入字段添加分数

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-10-09 04:54:47

为用户填写表单并显示的每个输入字段添加分数

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-10-09 04:54:47

解决方案1
2 已采纳 2019-10-09 04:54:47