Steps for incorporating code to calculate the total price and append it to the orderMessage

I am seeking help with this program that my professor assigned to me. The instructions marked by "//" are the ones I need to implement in the code, but I'm struggling to understand how to proceed. Any assistance would be greatly appreciated, even just a starting point. I've attempted a few solutions, but none of them have worked so far.

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

Answer №1

Check out this code snippet, it seems to address your needs perfectly. I've added a new function named getPrice which is responsible for calculating the price based on the shirt style and size. If the requested size is unavailable, it will return "Unavailable".

<!DOCTYPE html>
<html lang="en-US> 
    <head>
    <title>JavaScript Project T-Shirt Order</title>
    <script>
     /*
     *  Function OrderTShirt
     *
     *  Inputs:
     *     selectedColor - obtained from select tag with id="colorChoice"
     *     selectedStyle - obtained from select tag with id="style"
     *     selectedSize  - obtained from select tag with id="size"
     *
     *  Output:
     *      Alert message displaying the order details
     *
     */
     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 for alert - you may want to move/change this code
       var orderMessage = "Your order: Color = " + selectedColor 
                      + "; Style = " + selectedStyle 
                      + "; Size = " + selectedSize+"\n";


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

       if(price === "Unavailable") {
           orderMessage += "This shirt is not available";
       } else {
           orderMessage += "Price = " + price;
       }
       

       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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a form in PHP/HTML with a variety of selectable options

Here is my PHP and HTML code: $damt2 = isset($_POST['damt2']) ? $_POST['damt2'] : 200; $dateinfo2 = json_decode(file_get_contents($_SESSION['base_path'] . 'dl.dict'), true); arsort($dateinfo2); // Sort an array in r ...

Creating a seamless navigation experience using Material UI's react Button and react-router-dom Link

Is there a way to have the Material UI react Button component behave like a Link component from react-router-dom while preserving its original style? Essentially, how can I change the route on click? import Button from '@material-ui/core/Button' ...

Using placeholder in number and range input in Angular.js to display a placeholder text instead of a value when the input is 0

I am using Angular.js to link a number and range input so they work together with the same value. I have set the default value to 0 when the page loads as $scope.lbs_needed = 0;. My goal is to display a placeholder="0" whenever the user sets the value of e ...

Update the content of the page without reloading images

Is there a way to refresh a webpage on click without refreshing the images, only the text content? Can this be achieved without clearing the cache? I attempted to refresh the entire page with the following JavaScript code: <script> $(".secon ...

The React live search functionality is operational, however, it is not effectively canceling previous requests in the

Currently, I am in the process of following a helpful tutorial over at "alligator.io". You can check out the specific link here: https://alligator.io/react/live-search-with-axios/ The code snippet below belongs to App.js: import React, { Component } from ...

I am experiencing an issue with my Node.js query, as it is not successfully adding a user to my database using

I'm currently working on developing an API using Node.JS, express, and MySQL with the Sequelize ORM. I wanted to do this project properly without relying on the CLI for every task. However, I've encountered a problem where my API fails to create ...

Issue with Selenium webdriver's element.click() method not operating as anticipated in Chrome while using Mocha framework

While testing the log in feature of a website, I encountered an issue where the .click() method did not perform as expected despite being able to locate the Login button. Here is the relevant JavaScript test code: driver.sleep(1000) driver.findElement(By ...

Dynamic parallax or stacked vertical text animation

I am attempting to replicate the text effect found on . The text is centered both vertically and horizontally within each div, but as you scroll down, the top position shifts creating a parallax effect. As you continue scrolling, the text transitions to th ...

The scrolling content is positioned beneath the primary header and navigation bar

I'm currently in the process of designing a website where, upon clicking a navigation button, part of the page scrolls while the top header & nav bar remain fixed. Although I've managed to get the scrolling functionality to work and keep the top ...

invoking an API within a map function and utilizing the response

vm.owners = parents.children.map(function(e) { getparentById(e.Id) .then(function(getresponse) { var parentLink = '<a href="/#/parent/onboard/' + e.Id + '" target="_blank">' + e.Number + "-&qu ...

After the scaffold generator, the Twitter-bootstrap buttons now feature text in a subtle gray

I seem to be facing a similar issue to what was discussed in this thread about Twitter Bootstrap displaying buttons with greyed text. The problem I am encountering is with a btn-info button that has a dropdown - after clicking on an item in the dropdown, t ...

What is the process for incorporating styles into an external widget?

I am currently navigating my way through NextJS and attempting to incorporate a bespoke stylesheet into my code using a third-party widget. Unfortunately, I have hit a roadblock in this process. The names I have assigned to the style sheet align with what ...

How can I target the first checkbox within a table row using jQuery?

I am seeking a way to determine if the first checkbox in a table row is selected, rather than checking all checkboxes within that particular row. Currently, I am using this code: var b = false; $j('#tb1 td input:checkbox').each(function(){ ...

Using regular expressions to eliminate text located outside of the tags within a string

Presented is a string consisting of an XML string below: var xmlString = "<str>rvrv</str>rvrv<q1>vrvv</q1>vrvrv<q2>rtvrvr</q2>"; I am seeking assistance on how to eliminate text that lies outside the tags (text no ...

Implementing a button row and content alignment next to an image using Bootstrap or CSS

Ensure that the product detail page features a row with labels and buttons, positioned to the right of the image within Bootstrap columns. I have utilized Bootstrap 3 for this page layout. However, upon implementation, I encountered an issue whereby the b ...

Is there a way to exclusively use ES6 to import jQuery from an npm package?

After installing jQuery using npm -install jquery, a node_modules folder was created in my project with the jQuery library inside. However, I encountered an error when trying to import it using ES6 import. I am looking for a solution that does not involve ...

Strategies for incorporating child element margins within a parent container with overflow scroll

My container has a fixed width causing its children to overflow and require scrolling. Each child element (.box) has a margin-right: 10px. The margin is visible on all elements except the last one, where it is cut off at the edge of the element. I want to ...

Transfer results of SQL query from PHP to JavaScript array

Every day, I manually update a JavaScript variable in the following way: <script> var data = [ ['Austria','IBM','8284927','UF93NV', '10'], ['Spain','Dell&ap ...

Modifying the dimensions of an image within a :before pseudo-element

Currently, I am working on designing a mobile menu and encountered an issue with resizing the image of the hamburger menu button. Despite attempting to adjust it by following some suggestions such as this one: How to Resize Image Using CSS Pseudo-elements ...

The problem of Twitter Bootstrap 2 top navigation dropdown not functioning properly on mobile devices

I’ve spent a significant amount of time researching the issue prior to reaching out here, but unfortunately I haven’t been able to find a solution yet. Website Link: Currently, I am using Twitter Bootstrap 2.3.2 and have integrated a form in the drop ...