CODEWITHSUNDEEP
javascriptinput
Bakhrom
Bakhrom

Reputation: 91

Calculate the value of input

Please help to fix it. Where is the problem. I am trying to increment the value of #minimum 11 times and write their properties in shown order.

<input id="minimum" type="number" value="">
<button onclick="Calculate()">Calculate</button>


<script>
    var minimum = document.getElementById("minimum").value;

    var one = min;
    var two = min++;
    var three = min++;
    var four = min++;
    var five = min++;
    var six = min++;

    var seven = min++;
    var eight = min++;
    var nine = min++;
    var ten = min++;
    var eleven = min++;
    var twelve = min++;

function Calculate(){
document.write(one+','+three+','+five+','+seven+','+nine+','+eleven+','+six+','+four+','+two+','+twelve+','+ten+','+eight);
}
</script>

Upvotes: 1

Views: 102

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

Store your desired order into an array. Whatever number you enter in the field, the .join(', ')ed string will always be a sequence of that number plus the order (minus 1 since Arrays are 0 based)

const el_min = document.getElementById("minimum"), // Cache your DOM Elements
      el_btn = document.getElementById("calculate"),
      el_res = document.getElementById("result"),
      order = [1, 3, 5, 7, 9, 11, 6, 4, 2, 12, 10, 8]; // Store your expected order

function calculate() {
  const minVal = parseInt(el_min.value, 10); // Use parseInt with radix!
  el_res.textContent = order.map(ord => minVal + ord - 1).join(', ');
}

el_btn.addEventListener('click', calculate);
<input id="minimum" type="number" value="1">
<button id="calculate">Calculate</button>
<div id="result"></div>

Regarding your main issue, min is not minimum, so a typo, and you should do the math on click, not on document ready.

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseInt
https://developer.mozilla.org/en/docs/Web/API/Node/textContent
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/join
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Upvotes: 2

Ahmet Gokdayi
Ahmet Gokdayi

Reputation: 301

Change your Calculate() function like this; 

<script>


function Calculate() {
    var minimum = document.getElementById("minimum").value;
    let min = parseInt(minimum);
    var one = min;
    var two = min++;
    var three = min++;
    var four = min++;
    var five = min++;
    var six = min++;

    var seven = min++;
    var eight = min++;
    var nine = min++;
    var ten = min++;
    var eleven = min++;
    var twelve = min++;

    document.write(one + ',' + three + ',' + five + ',' + seven + ',' + nine + ',' + eleven + ',' + six + ',' + four + ',' + two + ',' + twelve + ',' + ten + ',' + eight);
}

What you did was getting the input value at the beginning of the execution. But after you enter a number value in that input, those values will not be updated, so you need to put that code inside Calculate() function

Upvotes: 1

asdf
asdf

Reputation: 3067

The variable min is not defined anywhere. you can either use the variable minimum everywhere where min currently is, or change the initial declaration of minimum to min.

<input id="minimum" type="number" value="">
<button onclick="Calculate()">Calculate</button>

<script>
    var min = document.getElementById("minimum").value;

    var one = min;
    var two = min++;
    var three = min++;
    var four = min++;
    var five = min++;
    var six = min++;

    var seven = min++;
    var eight = min++;
    var nine = min++;
    var ten = min++;
    var eleven = min++;
    var twelve = min++;

function Calculate(){
document.write(one+','+three+','+five+','+seven+','+nine+','+eleven+','+six+','+four+','+two+','+twelve+','+ten+','+eight);
}
</script>```

Upvotes: 1

Related Questions