Question

我有这种形式，当选择的订单类型是市价订单时，止损价和限价价格应为零，应该是只读的。

当我选择限价单时，它应该使止损价格为0并且只读。

当我选择停止订单时，它应该限价0并且只读。

我试图在js中使用简单的if-else。我做错了什么？

请尽量避免jquery。请学校项目。提前谢谢......

我的代码如下。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<link rel="stylesheet" type="text/css" href="ETcss.css" />
<script src="jquery-1.10.2.min.js"></script>
</head>

<body>

    <div class="header">
        <h1 style="font-family: Cambria; color: #F0F0F0;" align="center">Welcome User</h1>

        <br>
    </div>


    <div class="sidemenu">
        <ul>
            <li>
                <a href="pmHome.html">Home</a>
            </li>
            <li>
                <a href="createOrder.html">Create Order</a>
            </li>

        </ul>
    </div>
    <div class="mainmenu">
        <h1>Create Equity Order</h1>
        <form action="">
            <table>

                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Symbol :</td>
                    <td>
                        <input type="text" name="symbol" />
                    </td>
                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Secutrity name :</td>
                    <td>
                        <input type="text" name="securityName" value="sapient" placeholder="sapient" />
                    </td>
                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Side :</td>
                    <td>
                        <select>
                            <option>buy</option>
                            <option>sell</option>
                        </select>
                    </td>
                </tr>

                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Order Type :</td>
                    <td>
                        <select id="orderType">
                            <option value="market" selected>market</option>
                            <option value="limit">limit</option>
                            <option value="stop">stop</option>
                        </select>
                    </td>
                </tr>

                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Order Qualifiers :</td>
                    <td>
                        <select>
                            <option>day order</option>
                            <option>gtc</option>
                        </select>
                    </td>
                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Trader :</td>
                    <td>
                        <select>
                            <option>trader1</option>
                            <option>trader2</option>
                        </select>
                    </td>

                </tr>

                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Account Type :</td>
                    <td>
                        <select>
                            <option>cash</option>
                            <option>margin</option>
                        </select>
                    </td>

                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Portfolio :</td>
                    <td>
                        <select>
                            <option>p1</option>
                            <option>p2</option>
                        </select>
                    </td>

                </tr>

                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

                    <td>Stop Price :</td>
                    <td>
                        <input type="text" id="stopprice" name="stopprice" readonly="readonly" onfocus="this.blur()" />
                    </td>

                </tr>

                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

                    <td>Limit Price :</td>
                    <td>
                        <input type="text" id="limitprice" name="limitprice" readonly="readonly" onfocus="this.blur()" />
                    </td>

                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">


                    <td>Qty :</td>
                    <td>
                        <input type="text" name="qty" />
                    </td>
                </tr>


                <tr>
                    <a href="pmHome.html">
                        <td colspan="2" align="center">
                            <input type="submit" onclick="display_alert()" value="Create Equity Order" />
                    </a>
                    </td>
                </tr>

            </table>
        </form>
    </div>
</body>
<script>
function updatePrice(el, priceLog, priceLog1, priceList) {
    var e = document.getElementById("orderType");
    var pricevalue = e.options[e.selectedIndex].text;
    if (pricevalue.toLowerCase() == "market") {
        priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
                .toLowerCase()];
        priceLog1.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
                .toLowerCase()];
    }
    alert(pricevalue);
    else if (pricevalue.toLowerCase() == "limit") {
        document.getElementByName('limitprice').readOnly = false;
        priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
                .toLowerCase()];
        priceLog1.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
                .toLowerCase()];

    } else if (pricevalue.toLowerCase() == "stop") {
        document.getElementByName('stopprice').readOnly = false;
        priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
                .toLowerCase()];
        priceLog1.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value
                .toLowerCase()];

    }
}

var stopPrices = {
    'market' : 0,
    'limit' : 1,
    'stop' : 2,
};
var limitPrices = {
    'market' : 0,
    'limit' : 1,
    'stop' : 2,
};

var select = document.getElementById('orderType'), hidden = document
        .getElementsByName('stopprice')[0];
hidden1 = document.getElementsByName('limitprice')[0];

select.addEventListener('change', function() {
    updatePrice(select, hidden, hidden1, stopPrices);
});

 </script>
</html>

Answer 1

<强>问题

在if和else之间，您放置了alert() - SYNTAX ERROR
el，e和select都相同，且值为document.getElementById('orderType')。
onfocus="this.blur()" !!!，我在这里停下来。

希望此代码能解决您的问题 -

<html>
<head>
<link rel="stylesheet" type="text/css" href="ETcss.css" />
<script src="jquery-1.10.2.min.js"></script>
</head>

<body>

    <div class="header">
        <h1 style="font-family: Cambria; color: #F0F0F0;" align="center">Welcome User</h1>
        <br>
    </div>
    <div class="sidemenu">
        <ul>
            <li>
                <a href="pmHome.html">Home</a>
            </li>
            <li>
                <a href="createOrder.html">Create Order</a>
            </li>

        </ul>
    </div>
    <div class="mainmenu">
        <h1>Create Equity Order</h1>
        <form action="">
            <table>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Symbol :</td>
                    <td>
                        <input type="text" name="symbol" />
                    </td>
                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Secutrity name :</td>
                    <td>
                        <input type="text" name="securityName" value="sapient" placeholder="sapient" />
                    </td>
                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Side :</td>
                    <td>
                        <select>
                            <option>buy</option>
                            <option>sell</option>
                        </select>
                    </td>
                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Order Type :</td>
                    <td>
                        <select id="orderType">
                            <option value="market" selected>market</option>
                            <option value="limit">limit</option>
                            <option value="stop">stop</option>
                        </select>
                    </td>
                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Order Qualifiers :</td>
                    <td>
                        <select>
                            <option>day order</option>
                            <option>gtc</option>
                        </select>
                    </td>
                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Trader :</td>
                    <td>
                        <select>
                            <option>trader1</option>
                            <option>trader2</option>
                        </select>
                    </td>

                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Account Type :</td>
                    <td>
                        <select>
                            <option>cash</option>
                            <option>margin</option>
                        </select>
                    </td>

                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Portfolio :</td>
                    <td>
                        <select>
                            <option>p1</option>
                            <option>p2</option>
                        </select>
                    </td>

                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

                    <td>Stop Price :</td>
                    <td>
                        <input type="text" id="stopprice" name="stopprice" readonly="readonly"  />
                    </td>

                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">

                    <td>Limit Price :</td>
                    <td>
                        <input type="text" id="limitprice" name="limitprice" readonly="readonly"  />
                    </td>
                </tr>
                <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
                    <td>Qty :</td>
                    <td>
                        <input type="text" name="qty" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" onclick="display_alert()" value="Create Equity Order" />
                    </td>
                </tr>
            </table>
        </form>
    </div>
</body>
<script>
    var select = document.getElementById('orderType');
    var priceLog = document.getElementsByName('stopprice')[0];
    var priceLog1 = document.getElementsByName('limitprice')[0];

    var stopPrices = {
        'market' : 0,
        'limit' : 1,
        'stop' : 2,
    };
    var limitPrices = {
        'market' : 0,
        'limit' : 1,
        'stop' : 2,
    };

    select.addEventListener('change', updatePrice);

    function updatePrice() {
        var select = document.getElementById("orderType");
        var selectedIndex = select.selectedIndex;

        var pricevalue = select.options[selectedIndex].text.toLowerCase();
        var selectedValue = select.options[selectedIndex].value.toLowerCase();

        if (pricevalue == "market") {
            priceLog.disabled = "disabled";
            priceLog1.disabled = "disabled";
            priceLog.value = 0;
            priceLog1.value = 0;

        } else if (pricevalue == "limit") {
            priceLog1.disabled = "disabled";
            priceLog.removeAttribute("disabled");
            priceLog1.value = 0;

        } else if (pricevalue == "stop") {
            priceLog.disabled = "disabled";
            priceLog1.removeAttribute("disabled");
            priceLog.value = 0;
        }
    }
</script>
</html>

Answer 2

Moazzam Khan正确地说，有一个语法警报以及没有参数：

select.addEventListener（'change'，function（）{ updatePrice（document.getElementById（'orderType'），document.getElementsByName（'stopprice'）[0]，document.getElementsByName（'limitprice'）[0]，stopPrices）; }，假）;

使用以下脚本代码：

<script>
function updatePrice (el, priceLog, priceLog1, priceList) {
try{
 var e = document.getElementById("orderType");
 var pricevalue = e.options[e.selectedIndex].text;
if(pricevalue.toLowerCase() == "market"){
    priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
    priceLog1.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
    }
else if(pricevalue.toLowerCase() == "limit"){
    document.getElementByName('limitprice').readOnly = false;
    priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
    priceLog1.value =priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
}
else if(pricevalue.toLowerCase() == "stop"){
    document.getElementByName('stopprice').readOnly = false;
    priceLog.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
    priceLog1.value = priceList[el.getElementsByTagName('option')[el.selectedIndex].value.toLowerCase()];
}
}
catch(err)
{
}
}

var stopPrices = {
'market' : 0,
'limit' : 1,
'stop' : 2,
 };
 var limitPrices={
 'market' : 0,
'limit' : 1,
 'stop' : 2,
  };

 var select = document.getElementById('orderType'),
 hidden = document.getElementsByName('stopprice')[0];
hidden1= document.getElementsByName('limitprice')[0];

select.addEventListener('change', function(){
updatePrice(document.getElementById('orderType'), document.getElementsByName('stopprice')[0], document.getElementsByName('limitprice')[0], stopPrices); 
},false);


 </script>

为什么我的if-else在javascript中无法正常工作？

2 个答案: