反应：如果其他逻辑大于100

Question

I have a react app that has a slider that moves icons between 0 and 100% by 2 inputs, x and y . But when the y input is less than x , it shoots the icons LEFT style property pass the range slider.

I want to create the logic so that if the icon LEFT surpasses 100 , it stays at 100

for example, x = 5 and y = 10 so the icon would be half way at 50%

but if x = 5 and y = 4 , the left property which would be 125%, the icon shoots and doesnt pass the slider but stays at 100%.

My issue is when I run the for loop , it moves all even less than 100 % to 100%

so if the icon was 10%, after the script it gets a value of 100%

for(var i =0; i<= arrayOfIcons.length; i++) {
    if(arrayOfIcons[i].style.left <= '100%') {
        console.log(arrayOfIcons[i].style.left)
    } else {
        arrayOfIcons[i].style.left = '100%'
        console.log('greater than 100% : ' + arrayOfIcons[i].style.left)
    }
}

TL:DR if the value of is greater than 100%, i want it to stick to 100%

Answer 1

You need to extract numeric value from string with percent symbol.

function extractNumberFromPercentString(s) {
    return +s.slice(0, -1);
}

for(var i =0; i<= arrayOfIcons.length; i++) {
    if(extractNumberFromPercentString(arrayOfIcons[i].style.left) <= 100) {
        console.log(arrayOfIcons[i].style.left)
    } else {
        arrayOfIcons[i].style.left = '100%'
        console.log('greater than 100% : ' + arrayOfIcons[i].style.left)
    }
}