Как добавить код для расчета цены и связать его с заказом - PullRequest
Новая
       3

Как добавить код для расчета цены и связать его с заказом

1 голос
/ 01 апреля 2019

Это целая программа, и все «//» - это то, что мой профессор хочет, чтобы я сделал с программой, помощь в целом была бы удивительной, но просто помочь мне начать работу тоже будет здорово. Я действительно не понимаю, что мне нужно сделать и что добавить, чтобы это работало. Я попробовал несколько вещей, и это не сработало 

<!DOCTYPE html>
<html lang="en-US"> 
    <head>
    <title>JavaScript Project T-Shirt Order</title>
    <script>
     /*
     *  Function OrderTShirt
     *
     *  Inputs:
     *     selectedColor - initialized from the select tag with id="colorChoice"
     *     selectedStyle - initialized from the select tag with id="style"
     *     selectedSize  - initialized from the select tag with id="size"
     *
     *  Output:
     *      alert of the order message
     *
     */
     function OrderTShirt(){

       //initialize the input
       var selectedColor = document.getElementById("colorChoice").value;
       var selectedStyle = document.getElementById("style").value;
       var selectedSize =  document.getElementById("size").value;


       //create the orderMessage to alert - you may want to move/change this code
       var orderMessage = "Your order is:  Color = " + selectedColor 
                      + "; Style = " + selectedStyle 
                      + "; Size = " + selectedSize+"\n";


       //Add code to calculate the price and concatenate it to the orderMessage
       var price = document.getElementById()
       //For example, "The order is:  Color = gray; Style=T-Shirt; Size = XL \nThe price is $7" 

       //If the style and size are not available, then concatenate the message that 
       // the selection is not available instead of a price.

       // a t-shirt in any size is $7 except 2XL which is $10.
       // a v-neck in adult sizes is $12.50 except the 2XL is not available
       // a tech shirt in adult sizes is $13

       alert(orderMessage);
   }

    </script>
    </head>

    <body>
    <p>
    <table>
      <tr/>
      <tr><th>Colors</th><th>Styles</th><th>Sizes</th></tr>
      <tr><td>
    <select id="colorChoice">
      <option value="gray">Gray</option>
      <option value="gold">Gold</option>
      <option value="red">Red</option>
      <option value="pink">Pink</option>
      <option value="white">White</option>
      <option value="navy">Navy</option>
      <option value="maroon">Maroon</option>
      <option value="black">Black</option>
      <option value="royalblue">Royal Blue</option>
      <option value="limegreen">Lime Green</option>
    <select>
       </td><td>
    <select id="style">
      <option value="T-Shirt">T-Shirt</option>
      <option value="Tech Shirt">Moisture Wicking Tech Shirt</option>
      <option value="Ladies V-Neck">Ladies V-Neck - Adult sizes only</option>
    </select>
      </td><td>
    <select id="size">
      <option value="XS">Adult Extra Small</option>
      <option value="S">Adult Small</option>
      <option value="M">Adult Medium</option>
      <option value="L">Adult Large</option>
      <option value="XL">Adult Extra Large</option>
      <option value="2XL">Adult 2X</option>
    </select>
      </td></tr>
      <tr/><tr><td>
          <input type="button" 
                 value="Order T-Shirt" 
                 onclick="OrderTShirt();">
       </td><td/><td/>
    </table>
    <p>
    </body>
</html>

1 Ответ

0 голосов
/ 01 апреля 2019

Этот фрагмент - то, что, я думаю, вы ищете.Я сделал еще одну функцию под названием getPrice, которая будет рассчитывать цену для вас.Он проверяет стиль рубашки, а затем, следуя приведенным вами примерам, проверяет, какой размер, и затем дает цену, или «Недоступно», если на складе их нет. 

<!DOCTYPE html>
<html lang="en-US"> 
    <head>
    <title>JavaScript Project T-Shirt Order</title>
    <script>
     /*
     *  Function OrderTShirt
     *
     *  Inputs:
     *     selectedColor - initialized from the select tag with id="colorChoice"
     *     selectedStyle - initialized from the select tag with id="style"
     *     selectedSize  - initialized from the select tag with id="size"
     *
     *  Output:
     *      alert of the order message
     *
     */
     function OrderTShirt(){

       //initialize the input
       var selectedColor = document.getElementById("colorChoice").value;
       var selectedStyle = document.getElementById("style").value;
       var selectedSize =  document.getElementById("size").value;


       //create the orderMessage to alert - you may want to move/change this code
       var orderMessage = "Your order is:  Color = " + selectedColor 
                      + "; Style = " + selectedStyle 
                      + "; Size = " + selectedSize+"\n";


       //Add code to calculate the price and concatenate it to the orderMessage
       var price = getPrice(selectedColor, selectedStyle, selectedSize);

       if(price === "Unavailable") {
           orderMessage += "This shirt is not available";
       } else {
           orderMessage += "Price = " + price;
       }
       //For example, "The order is:  Color = gray; Style=T-Shirt; Size = XL \nThe price is $7" 

       //If the style and size are not available, then concatenate the message that 
       // the selection is not available instead of a price.

       // a t-shirt in any size is $7 except 2XL which is $10.
       // a v-neck in adult sizes is $12.50 except the 2XL is not available
       // a tech shirt in adult sizes is $13

       alert(orderMessage);
   }

    function getPrice(color, style, size) {
        var price;

        if(style === "T-Shirt") {
            if(size === "2XL") {
                price = 10;
            }else {
                price = 7;
            }
        }
        else if(style === "Ladies V-Neck") {
            if(size === "2XL") {
                // Unavailable
                price = "Unavailable"
            }else {
                price = 12.50;
            }
        }
        else if(style === "Tech Shirt") {
            price = 13;
        }

        return price;
    }

    </script>
    </head>

    <body>
        <table>
            <tr>
                <th>Colors</th>
                <th>Styles</th>
                <th>Sizes</th>
            </tr>
            <tr>
                <td>
                    <select id="colorChoice">
                        <option value="gray">Gray</option>
                        <option value="gold">Gold</option>
                        <option value="red">Red</option>
                        <option value="pink">Pink</option>
                        <option value="white">White</option>
                        <option value="navy">Navy</option>
                        <option value="maroon">Maroon</option>
                        <option value="black">Black</option>
                        <option value="royalblue">Royal Blue</option>
                        <option value="limegreen">Lime Green</option>
                    </select>
                </td>
                <td>
                    <select id="style">
                        <option value="T-Shirt">T-Shirt</option>
                        <option value="Tech Shirt">Moisture Wicking Tech Shirt</option>
                        <option value="Ladies V-Neck">Ladies V-Neck - Adult sizes only</option>
                    </select>
                </td>
                <td>
                    <select id="size">
                        <option value="XS">Adult Extra Small</option>
                        <option value="S">Adult Small</option>
                        <option value="M">Adult Medium</option>
                        <option value="L">Adult Large</option>
                        <option value="XL">Adult Extra Large</option>
                        <option value="2XL">Adult 2X</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <button onclick="OrderTShirt();">Order T-Shirt</button>
                </td>
            </tr>
        </table>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...