Value of <select><option> coming back as string

Question

Is there any way to have the value of an <option> to be set to an actual integer? I have the following html code:

<select id="proteinperc" onchange="setMacrosProtein()">
    <option value="0" selected>0%</option>
    <option value="5">5%</option>
    <option value="10">10%</option>
    <option value="15">15%</option>
    <option value="20">20%</option>
    <option value="25">25%</option>
    <option value="30">30%</option>
    <option value="35">35%</option>
    <option value="40">40%(Rec.)</option>
    <option value="45">45%</option>
    <option value="50">50%</option>
    <option value="55">55%</option>
    <option value="60">60%</option>
    <option value="65">65%</option>
    <option value="70">70%</option>
    <option value="75">75%</option>
    <option value="80">80%</option>
    <option value="85">85%</option>
    <option value="90">90%</option>
    <option value="95">95%</option>
    <option value="100">100%</option>
</select>

Then I have the script below that is trying to access these option values and perform calculations using them. The problem is that when I do any calculations with them, all I get is string concatenation or strange values.

function setMacrosProtein() {
    myProtein = document.getElementById("proteinperc").value;
    var removeValue = 101 - (myProtein + myFats + myCarbs);
    alert(removeValue); // Alert here just for testing the first calculation.
    var x = document.getElementById("fatperc").options.length;
    for (i = 0; i < x; i++) {
        // Check fatperc
        if (document.getElementById("fatperc").options[i].value + myFats >= removeValue) {
            document.getElementById("fatperc").options[i].disabled = true;
        } else if (document.getElementById("fatperc").options[i].value + myFats < removeValue) {
            document.getElementById("fatperc").options[i].disabled = false;
        }
        // Check carbperc
        if (document.getElementById("carbperc").options[i].value + myCarbs >= removeValue) {
            document.getElementById("carbperc").options[i].disabled = true;
        } else if (document.getElementById("carbperc").options[i].value + myCarbs < removeValue) {
            document.getElementById("carbperc").options[i].disabled = false;
        }
    }
    //setCals();
}

If there is no way to return an integer from an option value, I do have a workaround in mind but with a small issue. I could set up a new array with mirroring values to the options list, ie: array[0] would be equal to option[0] and I could check against the array in my if statements.

However, how would I set a variable to the currently selected option this way? How do I reference the current selected option's position in the option array to get the mirrored position in my newly created array? To clarify, if the selected option is currently option[4], how do I reference its position to then pull array[4]'s value?

Answer 1

You could use parseInt() to get the int value from it like this:

myProtein = parseInt(document.getElementById("proteinperc").value);