While循环以增加数字,直到达到或等于目标

时间:2018-09-12 14:12:13

标签: javascript jquery loops

基本上,我想做的是在代码中建立一个while循环,在总谱中添加一个,直到其达到目标为止,我发现使用基本的while循环可以很容易地完成。但是,在我的此版本中,它会稍有不同,如下面的代码所示。

我正在做的是让用户输入4个数字:目标,促进者,中立和反对者。

他们进入的每个发起人给出100分,中立者给出0,贬低者为-100。然后获取最终平均值,该平均值将与他们最初输入的目标进行比较,这是我希望while循环进入的地方,我希望该循环自动告诉用户他们需要多少启动子才能实现目标。 / p>

因此,在以75个目标为目标的用户中,他们具有3个启动子,2个中性点和1个贬低者。这将使他们的平均分数为33.33(200/6)。而且,我已经手动计算出他们需要再增加10个发起人才能使得分达到75,从而达到他们指定的目标。

在过去的几天里,我一直在处理不同的while循环负载,却一无所获,这就是为什么我转向你们,专家们。

代码在下面。这只是我现在完成此难题的最后一步。

这是我的HTML和JavaScript。

/* eslint-env browser */
// eslint.rc
{
  "no-unused-vars" [2, {"args": "none"}]
}
"use strict";
    
$(document).ready(function () {
     
     $('#target, #proNum, #neuNum, #detNum').change(function () {

var target = $('#target').val();
var proNum = $('#proNum').val();
var neuNum = $('#neuNum').val();
var detNum = $('#detNum').val();
    
         console.log("target is equal to " + target);
         console.log("promitors is equal to " + proNum);
         console.log("neutrals is equal to " + neuNum);
         console.log("detractors is equal to " + detNum);
         
var targetTot = (target*10);
var prosTot = (proNum*100);
var neusTot = (neuNum*0);
var detsTot = (detNum*-100);
         
         console.log("Target is " + targetTot);
         
var scoresQuant = +proNum + +neuNum + +detNum;  
var scoresTot = prosTot+neusTot+detsTot;
var preCurrent = scoresTot/scoresQuant;

var current = Math.round(preCurrent*100)/100;
         
         console.log("scoresQuant is equal to " + scoresQuant);
         console.log("scoresTot is equal to " + scoresTot);
         console.log("preCurrent is equal to " + preCurrent);
         console.log(current);
         
$('#current').text(current);

var hypPro = 0;
var scoresTotLoop = scoresTot/100;
var targetLoop = target/10;
         
 while (scoresTotLoop/scoresQuant+hypPro<=targetLoop)  {
    hypPro++;
} 
  console.log("hypPro is equal to " + hypPro);       
         
$('#prosToTarget').text(hypPro);
        });
        
});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>NPS Calculator</title>
        
        <!-- Linking to external sheets -->
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="js/script.js"></script>
        <!-- End of linking to external sheets -->
        
        <!-- Font Imports -->
        <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,700" rel="stylesheet">
        <!-- End of font Imports -->
        
    </head>
<body>
	<div id ="headers">
		<h1>NPS Calcultor</h1>
		<h2>This site will help you work out the total number of promoters you need to achieve your target this month.</h2>
	</div>
	<div id = "calculator">
		<div id = "targetNPS">
            <table  id ="targetTable">
                <tr>
                    <td>
                        <h2>Target NPS</h2>
                    </td>
                    <td>
                        <input type="text" class="IO" id = "target"/>
                    </td>
                </tr>
            </table>
        </div> 
		<div id = "scores">
            <table id = "scoresTable">
                <tr>
                    <td>
                        <h2>Promoters</h2>
                    </td>
                    <td>
                        <h2>Neutrals</h2>
                    </td>
                    <td>
                        <h2>Detractors</h2>
                    </td>
                </tr>
                <tr>
                    <td class = "pros">
                        <input type="text" class="IO" id = "proNum"/>
                    </td>
                    <td class = "neus">
                        <input type="text" class="IO" id = "neuNum"/>
                    </td>
                    <td class = "dets">
                        <input type="text" class="IO" id = "detNum"/>
                    </td>
                </tr>
            </table>
		</div>
		<div id = "currentNPS">
            <table id = "currentTable">
                <tr>
                    <td>
                        <h2>Current NPS</h2>
                    </td>
                    <td>
                        <h2 class="IO" id = "current">0</h2>
                    </td>
                </tr>
            </table>
		</div>
		<div id = "prosToTargetNPS">
			<table id ="prosToTargetTable">
                <tr>
                    <td>
                        <h2>Promitors to Target</h2>
                    </td>
                    <td>
                        <h2 class="IO" id = "prosToTarget">0</h2>
                    </td>
                </tr>
            </table>           
		</div>
	</div>
</body>
</html>

3 个答案:

答案 0 :(得分:1)

请考虑x用于所需的总启动子(10 + 3),p用于输入启动子(3),n用于输入中性点(2)和d用于输入批评者(1)。

因此,我们有以下等式- (100x + 0n - 100d)/(x+n+d) = 75

100(x - d)/(x+n+d) = 75

x-d = 0.75(x+n+d)

或者,x-0.75x = 0.75n + 0.75d +d

或者,0.25x = 0.75n + 1.75d

或者,x = (75/25)n + (175/25)d -------(1)

或者,x = 3n + 7d

由于nd已经存在,分别为2和1,

x = 3 * 2 + 7 * 1 = 13并且 x-p = 13-3 =需要10个启动子。

您如何在代码中实现呢?如方程式(1)所示

  1. n乘以(target/(100-target))
  2. d乘以(100+target)/(100-target)
  3. 添加它们以获得全部推动者
  4. 减去输入启动子以获得所需的启动子。

无需循环。 在此假设仅通过添加启动子始终可以实现目标。

答案 1 :(得分:1)

我已经设法通过使用从上方将其视为等式的想法来解决了这个问题。这是我找到的解决方案,我采取的是@psinaught发布的方程式,并将目标指定为y,将优点组合为x,将中性点组合为n,将减法器组合为d,然后求解y。然后生成方程式,在该方程式下,我将正确的变量交换成该方程式。

var preProsToTarget = ((detNum*target)+(neuNum*target)+(100*detNum))/(-target+100); 
var prosToTarget = Math.max(0,preProsToTarget-proNum);

答案 2 :(得分:0)

如psinaught所述,解决方案不是while循环,而是方程式。 发布的解决方案已经朝着正确的方向前进-但据我所知,仅当pVal和dVal具有相同的绝对值时才有效。 另一个缺点是,由于您的示例中性点的值为0,因此在简化他的方程式时已删除了中性点的值。因此,一旦中性点的值不同于0,它将不再起作用...

如果一切(计数和值)都可以通用,则等式为:

x = ( n * ( target - nVal ) + d * ( target - dVal) ) / ( pVal - target )

另外,您还要检查目标是否不大于pVal,因为目标是平均值,所以将无法再达到目标。

这是我的小提琴的链接:http://jsfiddle.net/bq1f02pk/2/ 您可以调整所有数字,无论是计数还是数值。

我在js部分做了什么:

首先我将一个'onChange'事件绑定到所有输入字段,因此每次您更改数字时函数都会执行

$("input").on("change", function() {

接下来,为了使数学部分起作用并摆脱jquery选择器,我将所有输入值提取到变量中:

  var target = parseInt($("#target").val());
  var proms = parseInt($("#p").val());
  var pVal = parseInt($("#pval").val());
  var neuts = parseInt($("#n").val());
  var nVal = parseInt($("#nval").val());
  var dets = parseInt($("#d").val());
  var dVal = parseInt($("#dval").val());

以下是对输入有效性的一些检查:

   if (target == pVal) { // only achievable without n's and d's
      return false;
    } else if (target > pVal) { //not reachable
      return false;
    } else if( neuts == 0 && dets == 0){ //no calculation needed
      return false;
    }

在我的小提琴中,这三个if还会向用户打印说明文字,否则,如果带有||就足够了。

现在终于有了计算:

var totals = var totals = ( neuts * ( target - nVal ) + dets * ( target - dVal ) ) / ( pVal - target );
var remaining = totals - proms;

并且为了帮助用户理解他的问题,您还可以创建一个长文本来解释结果:

$("#result").text("to reach your target of " + target + " you need " + totals + " promoters in total. you already have " + proms + " promoters, so you need " + remaining + " more promoters!");