下拉列表中的错误(JS)

时间:2013-04-23 12:26:25

标签: javascript html5

如果选择了该值,我想将+ 10%添加到一个值,但在我可以实现它之前我需要让它正常工作,页面的第一个不应该刷新,当我添加一个值然后我我希望将其更改为另一个我希望从其他文本框中删除旧值...我尝试使用简单的if / else if / else语句,但由于第一个错误它将无法工作,我甚至不确定它运作正常。这是代码:

<!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>

3 个答案:

答案 0 :(得分:1)

查看JavaScript控制台

我愿意打赌它的错误就是这样的。如果您没有看到错误,请设置控制台,使其在页面导航中保持错误。

  

未捕获的TypeError:无法读取未定义的属性“select”

您正在寻找一个名称为form的元素和一个名称为select的元素,但您的表单/ select没有名称。

<form action="">
<select>

应该是

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

理想情况下,您将删除document.name.name语法并使用getElementById。在选择和表单上放置一个id,并以这种方式引用输入。切换声明也是你的朋友。

您的代码可以在没有if语句的情况下编写,只需根据选择值使用查找。

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

答案 1 :(得分:0)

需要进行许多更改:

<!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>

答案 2 :(得分:0)

像这样的东西

<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

我没有解决你的代码可能遇到的所有问题,只是主要部分。你可以用这个小提琴解决你的其他问题。