CODEWITHSUNDEEP
javascriptarraysfor-loop
Guev4ra
Guev4ra

Reputation: 41

Dynamically change the variables

Since I have couple of entries that needs to be divided with the number i provide (num1 variable), I find the difficulties to complete the task.

I want the loop to divide me and store value from each variable called listX with 34. There are 9 lists (each has different number) and i want each list to be divided with the number i provide, but to be divided first with 2, then with 3, then with 4, 5 ... up to the number i provide.

I figured out that it could be done best with objects, but I can't find the solution, since I'm not so experienced with this stuff. The ideal would be to get the objects like:

List1: 1st division: xxx

List1: 2nd division: xxx

List1: 34th division: xxx

...

List 8: 22nd division: xxx

...

List 9: 33rd divison: xxx List 9: 34th division: xxx

"xth division" should be linked with the number i provided in the num1 variable

What I'm trying to get is something like this:

It asks me how many times i want my values to be divided, i type in 5. Then it asks me what are the values of my 9 inputs.

I declare to the first input 100. The result what I want should be:

100/1 = 1

100/2 = 50

100/3 = 33,33

100/4 = 25

100/5 = 20

Then I declare to the second input number 200. The result should be:

200/1 = 200

200/2 = 100

200/3 = 66,66

200/4 = 50

200/5 = 40

It goes all the way up until my last input...

What I'm trying to develop is D'Hondt method for seat allocations in the parliament that is being used for some countries.

Here is what I've got so far, but ofc, it is not working. 

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>

Upvotes: 0

Views: 88

Answers (1)

Scott Marcus
Scott Marcus

Reputation: 65806

I think this is what you are looking for, but a couple of notes.

A couple of notes:

  • The input element does not have a closing tag.
  • type="text is the default for input elements, so you don't need to write it.
  • Don't Repeat Yourself (DRY). Since all of your input elements need the same styling, just set up a single CSS rule to style them all the same way.
  • Don't use inline HTML event handlers. Separate your JavaScript from your HTML and follow modern standards.

See the comments below for details.

// 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>

Upvotes: 1

Related Questions