CODEWITHSUNDEEP
javascripthtml
aleksXPO
aleksXPO

Reputation: 123

error on drop down list (JS)

I want to add +10% to a value if that value is selected , but before i can implement it i need to make it work properly , first of the page shouldn't refresh and when i add a value and then i want to change it to another i want the old value from the other textbox to subtract ... i tried with a simple if/else if / else statement but because of the first error it won't work and i even ain't sure that it is working right. Here is the code:

<!doctype html>

<html>
<head>
    <title>lol</title>
    <meta charset="utf-8">

</head>
<body>
    <form action="">
        <input type="text" id="hp">
        <input type="text" id="ea">
        <input type="text" id="ed">
        <input type="text" id="pa">
        <input type="text" id="pd">
        <input type="text" id="sp">

        <select>
            <option value="hp">HP</option>
            <option value="ea">EA</option>
            <option value="ed">ED</option>
            <option value="pa">PA</option>
            <option value="pd">PD</option>
            <option value="sp">SP</option>
        </select>
        <input type="submit" id="sub" onClick = "return at()">
    </form>

    <script type="text/javascript">
        function at () {
            var a = document.form.select.options,
                i = document.form.select.selectedIndex,
                ea = Number(document.form.ea.value),
                ed = Number(document.form.ed.value),
                hp = Number(document.form.hp.value),
                pd = Number(document.form.pd.value),
                pa = Number(document.form.pa.value),
                sp = Number(document.form.sp.value),
                eaS,edS,pdS,paS,spS,hpS = 0;

            if(a[i].text === "hp"){
                hpS = hp*0.1;
            }else if(a[i].text === "ea"){
                eaS = ea*0.1
            }else if(a[i].text === "ed"){
                edS = ed*0.1
            }else if(a[i].text === "pa"){
                paS = pa*0.1
            }else if(a[i].text === "pd"){
                pdS = pd*0.1
            }else if(a[i].text === "sa"){
                spS = sp*0.1
            }

            document.form.ea.value = eaS;
            document.form.ed.value = edS;
            document.form.hp.value = hpS;
            document.form.pd.value = pdS;
            document.form.pa.value = paS;
            document.form.sp.value = spS;

            return false;
        }
    </script>
</body>
</html>

Upvotes: 0

Views: 293

Answers (3)

epascarello
epascarello

Reputation: 207501

Look at the JavaScript console

I am willing to bet it has the error that says something like. If you do not see the error, set up your console so it persists errors across page navigation.

Uncaught TypeError: Cannot read property 'select' of undefined

You are looking for an element with the name of form and one with the name of select, but your form/select has no name.

<form action="">
<select>

should be

<form name="form" action="">
<select name="select">

Ideally you would drop the document.name.name syntax and use getElementById. Put an id on the select and form and reference the inputs that way too. Also a switch statement would be your friend.

Your code could be written without if statements, just use look ups based on the selects value. 

function at() {
    var sel = document.getElementById("mySelect");
    var val = sel.options[sel.options.selectedIndex].value;
    var input = document.getElementById(val);
    if (input) {
         var val = input.value;
         resetValues();
         input.value = parseFloat(val) * .1;   
    }
}

function resetValues() {
    var inputs = document.getElementById("myForm").getElementsByTagName("input");
    for (var i=0;i<inputs.length;i++) {
        var inp = inputs[i];
        if (inp.type==="text") inp.value = 0;
    }
}

JSFiddle - Running example

Upvotes: 1

Xotic750
Xotic750

Reputation: 23472

Something like this

<form action="">
    <input type="text" id="hp">
    <input type="text" id="ea">
    <input type="text" id="ed">
    <input type="text" id="pa">
    <input type="text" id="pd">
    <input type="text" id="sp">
    <select name="select">
        <option value="hp">HP</option>
        <option value="ea">EA</option>
        <option value="ed">ED</option>
        <option value="pa">PA</option>
        <option value="pd">PD</option>
        <option value="sp">SP</option>
    </select>
    <input type="button" id="sub" value="Submit">
</form>

var sub = document.getElementById("sub");

function at() {
    var a = document.forms[0].select.options,
        i = document.forms[0].select.selectedIndex,
        ea = Number(document.forms[0].ea.value),
        ed = Number(document.forms[0].ed.value),
        hp = Number(document.forms[0].hp.value),
        pd = Number(document.forms[0].pd.value),
        pa = Number(document.forms[0].pa.value),
        sp = Number(document.forms[0].sp.value),
        eaS, edS, pdS, paS, spS, hpS;

    eaS = edS = pdS = paS = spS = hpS = 0;

    if (a[i].text === "HP") {
        hpS = hp * 0.1;
    } else if (a[i].text === "EA") {
        eaS = ea * 0.1
    } else if (a[i].text === "ED") {
        edS = ed * 0.1
    } else if (a[i].text === "PA") {
        paS = pa * 0.1
    } else if (a[i].text === "PD") {
        pdS = pd * 0.1
    } else if (a[i].text === "SA") {
        spS = sp * 0.1
    }

    document.forms[0].ea.value = eaS;
    document.forms[0].ed.value = edS;
    document.forms[0].hp.value = hpS;
    document.forms[0].pd.value = pdS;
    document.forms[0].pa.value = paS;
    document.forms[0].sp.value = spS;

    return false;
}

sub.addEventListener("click", at, false);

ob jsfiddle

I have not fixed every problem that you may have with your code, just the main part.And you can use this fiddle to work through your other problems.

Upvotes: 0

Satya
Satya

Reputation: 8881

many changes needed : 

<!doctype html>

<html>
<head>
    <title>lol</title>
    <meta charset="utf-8">

</head>
<body>
    <form action="">
        <input type="text" name="hp" id="hp">
        <input type="text" name="ea" id="ea">
        <input type="text" name="ed" id="ed">
        <input type="text" name="pa" id="pa">
        <input type="text" name="pd" id="pd">
        <input type="text" name="sp" id="sp">

        <select id="mySelect">
            <option value="hp">HP</option>
            <option value="ea">EA</option>
            <option value="ed">ED</option>
            <option value="pa">PA</option>
            <option value="pd">PD</option>
            <option value="sp">SP</option>
        </select>
        <input type="button" id="sub" value="Submit" onClick = "return at()">
    </form>

    <script type="text/javascript">
        function at () {
            var a = document.getElementById('mySelect').options,
                i = document.getElementById('mySelect').selectedIndex,
                ea = Number(document.forms[0].ea.value),
                ed = Number(document.forms[0].ed.value),
                hp = Number(document.forms[0].hp.value),
                pd = Number(document.forms[0].pd.value),
                pa = Number(document.forms[0].pa.value),
                sp = Number(document.forms[0].sp.value),
                eaS,edS,pdS,paS,spS,hpS = 0;

            if(a[i].text === "HP"){
                hpS = hp*0.1;
            }
            if(a[i].text === "EA"){
                eaS = ea*0.1
            }
            if(a[i].text === "ED"){
                edS = ed*0.1
            }
            if(a[i].text === "PA"){
                paS = pa*0.1
            }
            if(a[i].text === "PD"){
                pdS = pd*0.1
            }
            if(a[i].text === "SA"){
                spS = sp*0.1
            }

            document.forms[0].ea.value = eaS;
            document.forms[0].ed.value = edS;
            document.forms[0].hp.value = hpS;
            document.forms[0].pd.value = pdS;
            document.forms[0].pa.value = paS;
            document.forms[0].sp.value = spS;

            return false;
        }
    </script>
</body>
</html>

Upvotes: 0

Related Questions