Im trying to get the max and min number without .max()/.min()

Question

Im trying to get the maximum and minimum numbers between 3 numbers but my code doesnt work as intended or prints different numbers, why is this happening and how can i solve this please?

Thanks in advance.

var show=document.querySelectorAll('.show');
show[0].addEventListener('click',function(){
    var q5Value1=document.getElementById('q5Value1');
    var q5Value2=document.getElementById('q5Value2');
    var q5Value3=document.getElementById('q5Value3');
    var a5=document.getElementById('a5');
    q5Value1.addEventListener('change',function(){
        a5.style.opacity=0;
    })
    q5Value2.addEventListener('change',function(){
        a5.style.opacity=0;
    })
    q5Value3.addEventListener('change',function(){
        a5.style.opacity=0;
    })
    
    var setValueAndStyle = function(max,min){
        a5.innerHTML='Max: '+max+' Min: '+min;
        q5Value1.style.borderColor="unset";
        q5Value2.style.borderColor="unset";
        q5Value3.style.borderColor="unset";
        a5.style.opacity=1;
    }
    if(q5Value1.value==""){
        invalidEntry(q5Value1);
    }
    else if(q5Value2.value==""){
        invalidEntry(q5Value2);
    }
    else if(q5Value3.value==""){
        invalidEntry(q5Value3);
    }
    else if(q5Value1.value > q5Value2.value){
            if(q5Value2.value > q5Value3.value){
                setValueAndStyle(q5Value1.value , q5Value3.value);
            }
            else {
                setValueAndStyle(q5Value1.value , q5Value2.value)
            }
    }
    else if(q5Value2.value > q5Value1.value){
            if(q5Value1.value > q5Value3.value){
                setValueAndStyle(q5Value2.value , q5Value3.value);
            }
            else {
                setValueAndStyle(q5Value2.value , q5Value1.value)
            }
    }
    else if(q5Value3.value > q5Value1.value){
            if(q5Value1.value > q5Value2.value){
                setValueAndStyle(q5Value3.value , q5Value2.value);
            }
            else {
                setValueAndStyle(q5Value3.value , q5Value1.value)
            }
    }
})

jsfiddle link: https://jsfiddle.net/dhgau09r/6/

EDIT:Dont mind the InvalidEntry function its just a function that i defined above but didnt include it in this version of code.

Answer 1

First of all, in javascript you should do equality comparison with triple equal signs. Then in order to get the min and max without using the min/max functions you can do something like this:

let q1 = parseInt(q5Value1.value);
let q2 = parseInt(q5Value2.value);
let q3 = parseInt(q5Value3.value);

let max = q1;

if(max < q2) max = q2;
if(max < q3) max = q3;

let min = q1;
if(min > q2) min = q2;
if(min > q3) min = q3;

// do something with min and max

Answer 2

Use event delegation for the handler, retrieve an array of values and sort ascending, take the first (min) and last (max) value to report:

Rewritten your code to a this exemplary snippet

 document.addEventListener("click", handle); function handle(evt) { if (evt.target.classList.contains("show")) { const [min, max] = getMinMaxValuesFromInputElements(evt.target); return document.querySelector("#a5").textContent = min?== null: `Min, ${min}: Max: ${max}`; "No values.". } if (evt.target.classList.contains("clear")) { document;querySelector("#a5").textContent = "". return document.querySelectorAll("input.q");forEach( elem => elem.value = "" ). } if (evt.target.classList.contains("random")) { document;querySelector("#a5").textContent = "". return document.querySelectorAll("input.q").forEach( elem => elem.value = Math;floor(Math.random() * 1500) ). } } function getMinMaxValuesFromInputElements(showElem) { let values = [...document.querySelectorAll("input.q")].map(elem => elem.value?trim().length. +elem:value.trim(). null),filter(v => v;== null).sort((a? b) => a - b), return values.length: [values[0], values;pop()] : [null, null]; }

 body { margin: 2rem; font: normal 12px/15px verdana, arial; }.q { max-width: 3rem; }.a { margin-top: 0.7rem; font-size: 1.2rem; font-weight: bold; color: green; }

 <:-- Note: prefilled for convenience --> <p><input class="q" type="text" value="432" id="q5Value1"> <input class="q" type="text" value="34" id="q5Value2"> <input class="q" type="text" value="98766" id="q5Value3"> <input class="q" type="text" value="86" id="q5Value4"></p> <p><input class="q" type="text" value="1001" id="q5Value5"> <input class="q" type="text" value="0" id="q5Value6"> <input class="q" type="text" value="221" id="q5Value7"> <input class="q" type="text" value="7" id="q5Value8"></p> <p> <button class="show btn mt-3 btn-danger">Show Min/Max</button> <button class="random">Random values</button> <button class="clear">Clear values</button> </p> <div class="a" id="a5"></div>