时间戳

首页 > 解决方案 > 动态改变变量

javascript - 动态改变变量

问题描述

由于我有几个条目需要除以我提供的数字（num1 变量），我发现完成任务很困难。

我希望循环将我除以 34，并将每个名为 listX 的变量的值存储为 34。有 9 个列表（每个列表都有不同的数字），我希望每个列表都用我提供的数字除以 2，然后是 3，然后是 4、5……直到我提供的数字。

我发现它可以用对象做得最好，但我找不到解决方案，因为我对这些东西没有那么有经验。理想的情况是获得如下对象：

List1：第一师：xxx

List1：第二师：xxx

List1：第34师：xxx

...

清单 8：第 22 师：xxx

...

清单 9：第 33 师：xxx 清单 9：第 34 师：xxx

“第 x 次除法”应与 num1 变量中提供的数字链接

我想要得到的是这样的：

它问我希望我的值被划分多少次，我输入 5。然后它问我 9 个输入的值是多少。

我向第一个输入声明 100。我想要的结果应该是：

100/1 = 1

100/2 = 50

100/3 = 33,33

100/4 = 25

100/5 = 20

然后我向第二个输入数字声明 200。结果应该是：

200/1 = 200

200/2 = 100

200/3 = 66,66

200/4 = 50

200/5 = 40

它一直持续到我最后一次输入......

我正在尝试开发的是用于议会席位分配的 D'Hondt 方法，该方法正在用于某些国家/地区。

这是我到目前为止所得到的，但是ofc，它不起作用。

var array1 = [];
var list = "list";

function someFunction() {
    var num1 = 34;
    for (var i = 1; i <= num1; ++i) {
        for (var j = 1; j <= 9; j++) {

            array1[j] += document.getElementById(list + j).value / i;
            array1[j] += "<br/>";

        }
    }
    document.getElementById("demo1").innerHTML = list + j;
}
<tr>
   <td><input type="text" id="list1" style="width:50px" onkeyup="someFunction()"></input></td>
   <td><input type="text" id="list2" style="width:50px" onkeyup="someFunction()"></input></td>
   <td><input type="text" id="list3" style="width:50px" onkeyup="someFunction()"></input></td>
   <td><input type="text" id="list4" style="width:50px" onkeyup="someFunction()"></input></td>
   <td><input type="text" id="list5" style="width:50px" onkeyup="someFunction()"></input></td>
   <td><input type="text" id="list6" style="width:50px" onkeyup="someFunction()"></input></td>
   <td><input type="text" id="list7" style="width:50px" onkeyup="someFunction()"></input></td>
   <td><input type="text" id="list8" style="width:50px" onkeyup="someFunction()"></input></td>
   <td><input type="text" id="list9" style="width:50px" onkeyup="someFunction()"></input></td>
</tr>

标签： javascriptarraysfor-loop

解决方案

我认为这就是您要寻找的东西，但有几点需要注意。

几点注意事项：

  • 该input元素没有结束标签。
  • type="text是input元素的默认值，所以你不需要写它。
  • 不要重复自己（干）。由于您的所有input元素都需要相同的样式，因此只需设置一个 CSS 规则即可以相同的方式设置它们的样式。
  • 不要使用内联 HTML 事件处理程序。将 JavaScript 与 HTML 分开并遵循现代标准。

有关详细信息，请参阅下面的评论。

// Get the number to divide by (You can get this anyway you want. A prompt is show here.):
var num = +prompt("How many calculations per input would you like?");

// Get all the table inputs into an array
var inputs = Array.prototype.slice.call(document.querySelectorAll("td > input[id^='input']"));

// Loop over the input array...
inputs.forEach(function(input){
  // Set up an event handler for the input
  input.addEventListener("input", someFunction);
});

function someFunction(){
  var resultString = "";
  for(var i = 0; i < num; i++){
    // Do the math and build up the string
    resultString += (this.value / (i + 1)) + "<br>"; 
  }
  
  // Update the output cell that corresponds to the input element with the results
  document.querySelector("#" + this.id.replace("input", "output")).innerHTML = resultString;
}
td > input { width:50%; }
<table id="inout">
  <tr>
    <td><input id="input1"></td>
    <td><input id="input2"></td>
    <td><input id="input3"></td>
    <td><input id="input4"></td>
    <td><input id="input5"></td>
    <td><input id="input6"><td>
    <td><input id="input7"></td>
    <td><input id="input8"></td>
    <td><input id="input9"></td>
  </tr>
  <tr>
    <td id="output1"></td>
    <td id="output2"></td>
    <td id="output3"></td>
    <td id="output4"></td>
    <td id="output5"></td>
    <td id="output6"><td>
    <td id="output7"></td>
    <td id="output8"></td>
    <td id="output9"></td>
  </tr>  
</table>

<div id="output"></div>

推荐阅读