0

I can't retrieve numbers from two inputs. First input #inpArraysNumber works fine. Second and third doesn't. I don't know what I am doing wrong. Could you please tell me how to solve this problem?

// this doesn't work
let min = document.getElementById("inpMinValue").value;
let max = document.getElementById("inpMaxValue").value;

// this works
let N = document.getElementById("inpArraysNumber").value;

JS

const btnClick = document.getElementById("btnClick");
var buttonFlag = false;
btnClick.addEventListener("click", onClick);

function onClick(){
    
    // one click
    if (buttonFlag){
        console.log(buttonFlag);
        return;
    }
    buttonFlag = true;
     
    const nums = [];
    let N = document.getElementById("inpArraysNumber").value;
    
    for(let i=0; i<N; i++){
        nums[i] = [];
    }
    const uniqueNumber = function (minValue, maxValue, maxSubarrayIndex) {
        const number = Math.floor(Math.random() * (maxValue - minValue + 1) + minValue);
        const subarrays = nums.slice(0, maxSubarrayIndex + 1);
        if (subarrays.every(subarr => !subarr.includes(number))) {
            nums[maxSubarrayIndex].push(number);
        } else {
            uniqueNumber(minValue, maxValue, maxSubarrayIndex);
        }
    }
    // this doesn't work
    let min = document.getElementById("inpMinValue").value;
    let max = document.getElementById("inpMaxValue").value;

    // this works fine
    // let min = 55;
    // let max = 155;

    const howMany = parseInt((max-min)/N);
    for(let i=0; i<N; i++){
        for(let j=0; j<howMany; j++){
            uniqueNumber(min, max, i);
        }
    }
 // here more code, but I couldn't post it because of "your post is mostly code"
}

HTML


<body>
    <div id="numbers">
        <h1>Unique numbers in Arrays</h1>
        <div id="inputsDiv">
            <input type="number" id="inpArraysNumber" placeholder="Arrays number">
            <input type="number" id="inpMinValue" placeholder="Min value">
            <input type="number" id="inpMaxValue" placeholder="Max value">
            <button id="btnClick">click</button>
        </div>
        <div id="innerNumbers">
        </div>
    </div>
    <script src="./js/script.js"></script>
</body>

When I set min and max variables in my code everything works fine.

setting theese two variables works fine:

let min = 55;

let max = 155;

Mark
  • 11
  • 3
  • `Math.random() * (maxValue - minValue + 1) + minValue` uses the `+` operator on a number and a string; the result is a concatenated string. Read the [docs](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Addition). The `parseInt` is superfluous. Use [`Number`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number#Function_syntax) or [`parseFloat`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseFloat), or, for ``, [`.valueAsNumber`](//developer.mozilla.org/en/docs/Web/API/HTMLInputElement#Properties). – Sebastian Simon Mar 22 '22 at 22:20

0 Answers0