¿Por qué mi if-else no funciona correctamente en javascript?

I have this form in which, when the order type selected is a market order the stop price and limit price should have value zero and should be readonly.

when i select limit order it should make stop price 0 and read only.

when i select stop order it should make limit price 0 and read only.

i m trying to use simple if-else in js. What am i doing wrong?

please try to avoid jquery. School project please. Thanks in advance...

I have my code below.

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

preguntado el 13 de septiembre de 13 a las 11:09

utilizan el === en lugar de == -

Nunca poner td dentro <a> -

It's not a good idea to put an "alert()" between if and else if statement -

Pls format your code a bit ; and show us the problematic code only instead of copying the whole code. -

@Oliboy50 more exactly, it produces a syntax error -

2 Respuestas

Problemas

  1. Entre if y else you have put an alert() - ERROR DE SINTAXIS
  2. el, e y select are all same and have the value - document.getElementById('orderType').
  3. onfocus="this.blur()" !!!, I am stopping here.

Hope this code will fix your issues -

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

Respondido el 13 de Septiembre de 13 a las 17:09

actually it was not working earlier as well. so i put an alert in between just to see if its capturing the value or not... apart from that what could be wrong - anshul singh

did you try this code? because its not working on my side, sorry. can you please take a look at it again.. - anshul singh

Fixed all the issues and also took the liberty to cleaning up your code. Hope you wont mind. - moazzam khan

Correctly said by Moazzam Khan, there is a syntax alert as well as no of parameter :

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

Use the following script code:

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

Respondido el 13 de Septiembre de 13 a las 12:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.