Trouble with updating an HTML table using javascript

Question

I looked through a few questions on here but none of them seems to be showing the problem that I am having.

The Problem:

I have a business case question where we are asked to build a simple calculator for a business pricing model using HTML/Javascript/CSS.

I'm still a beginner to these languages but have good experience in other languages.

I have been through google and stack overflow, all of which are telling me to use the "document.GetElementById()" function.

I have tried implementing this function however I must be doing something wrong because when I press submit nothing happens.

I apologise for the following being a long code block but I can't be sure where my error actually is.

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Business Case Calculator</title>

    <script>
        function displayTable() {
            let boxStr = document.getElementById("number");
            if (boxStr != '') {
                numOfEmps = parseInt(boxStr);
                if (numOfEmps < 1) {
                    numOfEmps = 1;
                }
            }

            switch (true) {
                case numOfEmps <= 12:
                    prices = bracket1(numOfEmps);
                case numOfEmps <= 50:
                    prices = bracket2(numOfEmps);
                case numOfEmps <= 250:
                    prices = bracket3(numOfEmps);
            }

            document.getElementById("mojo-price").innerHTML = String(prices[0]);
            document.getElementById("wiredup-price").innerHTML = String(prices[1]);
            document.getElementById("workwith-price").innerHTML = String(prices[2]);
            document.getElementById("063-price").innerHTML = String(prices[3]);
            document.getElementById("total-price").innerHTML = String(prices[4]);

            function bracket1(numOfEmps) {
                let mojo = 0;
                let wiredUp = numOfEmps * 75;
                let workWith = numOfEmps * 75;
                let the063 = numOfEmps * 250;
                let totalPrice = mojo + wiredUp + workWith + the063;

                return [mojo, wiredUp, workWith, the063, totalPrice];
            }

            function bracket2(numOfEmps) {
                let mojo = 0;
                let wiredUp = numOfEmps * 60;
                let workWith = numOfEmps * 60;
                let the063 = numOfEmps * 200;
                let totalPrice = mojo + wiredUp + workWith + the063;

                return [mojo, wiredUp, workWith, the063, totalPrice];
            }

            function bracket3(numOfEmps) {
                let mojo = 0;
                let wiredUp = numOfEmps * 54;
                let workWith = numOfEmps * 54;
                let the063 = numOfEmps * 180;
                let totalPrice = mojo + wiredUp + workWith + the063;

                return [mojo, wiredUp, workWith, the063, totalPrice];
            }
        }

    </script>

</head>

<body>
    <div class="input">
        <form class="input-form" id="cpcalc">
            <input type="text" placeholder="30" id="number">
        </form>
        <button type="button" onclick="displayTable();">Submit</button>
    </div>
    <div>
        <table>
            <tr>
                <td>
                    Profiler
                </td>
                <td>
                    Price
                </td>
            </tr>
            <tr>
                <td>
                    Mojo
                </td>
                <td>
                    <!--Mojo Price-->
                    <span id="mojo-price">

                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    Wired Up
                </td>
                <td>
                    <!--Wired Up Price-->
                    <span id="wiredup-price">

                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    Work With
                </td>
                <td>
                    <!--Work With Price-->
                    <span id="workwith-price">

                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    063 | 360
                </td>
                <td>
                    <!--063 Price-->
                    <span id="063-price">

                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    <!--Blank-->
                </td>
                <td>
                    <!--Blank-->
                </td>
            </tr>
            <tr>
                <td>
                    Total
                </td>
                <td>
                    <!--Total Price-->
                    <span id="total-price">

                    </span>
                </td>

</body>

</html>

What I am hoping happens is that the table is populated with the calculated prices correctly.

I will be dealing with the CSS side of the question once the functionality works.

Telmo Trooper · Accepted Answer · 2019-09-03 00:35:26Z

You were not defining prices before using it and you were reading the reference to the input element itself, not its value (document.getElementById("number").value).

Here you go:

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Business Case Calculator</title>

    <script>
        function displayTable() {
            let prices = []
            let boxStr = document.getElementById("number").value
            if (boxStr != '') {
                numOfEmps = parseInt(boxStr);
                if (numOfEmps < 1) {
                    numOfEmps = 1;
                }
            }

            switch (true) {
                case numOfEmps <= 12:
                    prices = bracket1(numOfEmps);
                case numOfEmps <= 50:
                    prices = bracket2(numOfEmps);
                case numOfEmps <= 250:
                    prices = bracket3(numOfEmps);
            }

            document.getElementById("mojo-price").innerHTML = String(prices[0]);
            document.getElementById("wiredup-price").innerHTML = String(prices[1]);
            document.getElementById("workwith-price").innerHTML = String(prices[2]);
            document.getElementById("063-price").innerHTML = String(prices[3]);
            document.getElementById("total-price").innerHTML = String(prices[4]);
        }

        function bracket1(numOfEmps) {
            let mojo = 0;
            let wiredUp = numOfEmps * 75;
            let workWith = numOfEmps * 75;
            let the063 = numOfEmps * 250;
            let totalPrice = mojo + wiredUp + workWith + the063;

            console.log(numOfEmps)

            return [mojo, wiredUp, workWith, the063, totalPrice];
        }

        function bracket2(numOfEmps) {
            let mojo = 0;
            let wiredUp = numOfEmps * 60;
            let workWith = numOfEmps * 60;
            let the063 = numOfEmps * 200;
            let totalPrice = mojo + wiredUp + workWith + the063;

            return [mojo, wiredUp, workWith, the063, totalPrice];
        }

        function bracket3(numOfEmps) {
            let mojo = 0;
            let wiredUp = numOfEmps * 54;
            let workWith = numOfEmps * 54;
            let the063 = numOfEmps * 180;
            let totalPrice = mojo + wiredUp + workWith + the063;

            return [mojo, wiredUp, workWith, the063, totalPrice];
        }

    </script>

</head>

<body>
    <div class="input">
        <form class="input-form" id="cpcalc">
            <input type="text" placeholder="30" id="number">
        </form>
        <button type="button" onclick="displayTable();">Submit</button>
    </div>
    <div>
        <table>
            <tr>
                <td>
                    Profiler
                </td>
                <td>
                    Price
                </td>
            </tr>
            <tr>
                <td>
                    Mojo
                </td>
                <td>
                    <!--Mojo Price-->
                    <span id="mojo-price">

                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    Wired Up
                </td>
                <td>
                    <!--Wired Up Price-->
                    <span id="wiredup-price">

                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    Work With
                </td>
                <td>
                    <!--Work With Price-->
                    <span id="workwith-price">

                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    063 | 360
                </td>
                <td>
                    <!--063 Price-->
                    <span id="063-price">

                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    <!--Blank-->
                </td>
                <td>
                    <!--Blank-->
                </td>
            </tr>
            <tr>
                <td>
                    Total
                </td>
                <td>
                    <!--Total Price-->
                    <span id="total-price">

                    </span>
                </td>

</body>

</html>

A hint I would give you is to console.log() (a.k.a. print) everything to understand the state of your data. Modern browses also have very powerful JavaScript debuggers too, so you can use breakpoints, print objects as tables, edit values during execution and all that. For Firefox and Chrome you can call it with Ctrl + Shift + I.

Do not use innerHTML, it is not reliable in regards to the DOM; use textContent to get and set text for an element via JavaScript.

Timur Gilauri · Accepted Answer · 2019-09-03 00:52:18Z

You dont have to use String constructor. innerHTML can contains both numbers and strings. Also, you can use textContent cause you don't insert any of html in there. As previous answers said, you haven't ever define prices.

Check html5 input docs. There are many arguments that can help you to control over the input values or validation. As you can see required attribute for input prevents of living this field empty and type number is tell that this field accept only numbers. Also there are min and max attributes< I guess you find out what they do)

let prices = {
  mojo: {
    coefs: {
      1: 0,
      2: 0,
      3: 0
    },
    price: 0
  },
  wiredup: {
    coefs: {
      1: 75,
      2: 60,
      3: 54
    },
    price: 0
  },
  workwith: {
    coefs: {
      1: 75,
      2: 60,
      3: 54
    },
    price: 0
  },
  the063: {
    coefs: {
      1: 200,
      2: 250,
      3: 180
    },
    price: 0
  }
}
let totalPrice = getTotalPrice()
const numberEl = document.querySelector('#number')

setTableValues()

function displayTable() {
  let value = numberEl.value

  if (value <= 12) {
    getPriceForBracket(value, 1);
  } else if (value <= 50) {
    getPriceForBracket(value, 2)
  } else if (value <= 250) {
    getPriceForBracket(value, 3)
  }

  setTableValues()
}

function getPriceForBracket(value, bracket) {
  Object.keys(prices).forEach(key => {
    prices[key].price = value * prices[key].coefs[bracket]
  })
}

function getTotalPrice() {
  return Object.values(prices).reduce((res, val) => res + val.price, 0)
}

function setTableValues() {
  Object.keys(prices).forEach(key => {
    document.querySelector(`#${key}-price`).textContent = prices[key].price
    document.querySelector('#total-price').textContent = getTotalPrice()
  })
}

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Business Case Calculator</title>

</head>

<body>
  <div class="input">
    <form class="input-form" id="cpcalc">
      <input type="number" placeholder="30" id="number" value="1" min="0" max="9999" required>
    </form>
    <button type="button" onclick="displayTable()">Submit</button>
  </div>
  <div>
    <table>
      <tr>
        <td>
          Profiler
        </td>
        <td>
          Price
        </td>
      </tr>
      <tr>
        <td>
          Mojo
        </td>
        <td>
          <!--Mojo Price-->
          <span id="mojo-price">

                    </span>
        </td>
      </tr>
      <tr>
        <td>
          Wired Up
        </td>
        <td>
          <!--Wired Up Price-->
          <span id="wiredup-price">

                    </span>
        </td>
      </tr>
      <tr>
        <td>
          Work With
        </td>
        <td>
          <!--Work With Price-->
          <span id="workwith-price">

                    </span>
        </td>
      </tr>
      <tr>
        <td>
          063 | 360
        </td>
        <td>
          <!--063 Price-->
          <span id="the063-price">

                    </span>
        </td>
      </tr>
      <tr>
        <td>
          <!--Blank-->
        </td>
        <td>
          <!--Blank-->
        </td>
      </tr>
      <tr>
        <td>
          Total
        </td>
        <td>
          <!--Total Price-->
          <span id="total-price">

                    </span>
        </td>

</body>

</html>

Jon P · Accepted Answer · 2019-09-03 01:06:36Z

Telmo's answer addresses the core of your problem, and he should get the accepted tick IMO. I've just refactored it down to reduce the amount of repeated code. I've used a couple of objects, one to store the brackets and another to store the final prices.

const brackets = {
  one: {
    mojo: 0,
    wiredUp: 75,
    workWith: 75,
    the063: 250
  },
  two: {
    mojo: 0,
    wiredUp: 60,
    workWith: 60,
    the063: 200
  },
  three: {
    mojo: 0,
    wiredUp: 54,
    workWith: 54,
    the063: 180
  }
}

function displayTable() {
  let prices = {
    "mojo": "",
    "wiredUp": "",
    "workWith": "",
    "Zero63": "",
    "total": ""
  };
  let bracket = {};
  let boxStr = document.getElementById("number").value
  if (boxStr != '') {
    numOfEmps = parseInt(boxStr);
    if (numOfEmps < 1) {
      numOfEmps = 1;
    }
  }

  switch (true) {
    case numOfEmps <= 12:
      bracket = brackets.one
    case numOfEmps <= 50:
      bracket = brackets.two
    case numOfEmps <= 250:
      bracket = brackets.three
  }

  prices.mojo = bracket.mojo;
  prices.wiredUp = numOfEmps * bracket.wiredUp;
  prices.workWith = numOfEmps * bracket.workWith;
  prices.Zero63 = numOfEmps * bracket.the063;
  prices.total = prices.mojo + prices.wiredUp + prices.workWith + prices.Zero63;

  document.getElementById("mojo-price").textContent = String(prices.mojo);
  document.getElementById("wiredup-price").textContent = String(prices.wiredUp);
  document.getElementById("workwith-price").textContent = String(prices.workWith);
  document.getElementById("063-price").textContent = String(prices.Zero63);
  document.getElementById("total-price").textContent = String(prices.total);
}

<div class="input">
  <form class="input-form" id="cpcalc">
    <input type="text" placeholder="30" id="number">
  </form>
  <button type="button" onclick="displayTable();">Submit</button>
</div>
<div>
  <table>
    <tr>
      <td>
        Profiler
      </td>
      <td>
        Price
      </td>
    </tr>
    <tr>
      <td>
        Mojo
      </td>
      <td>
        <!--Mojo Price-->
        <span id="mojo-price">

                    </span>
      </td>
    </tr>
    <tr>
      <td>
        Wired Up
      </td>
      <td>
        <!--Wired Up Price-->
        <span id="wiredup-price">

                    </span>
      </td>
    </tr>
    <tr>
      <td>
        Work With
      </td>
      <td>
        <!--Work With Price-->
        <span id="workwith-price">

                    </span>
      </td>
    </tr>
    <tr>
      <td>
        063 | 360
      </td>
      <td>
        <!--063 Price-->
        <span id="063-price">

                    </span>
      </td>
    </tr>
    <tr>
      <td>
        <!--Blank-->
      </td>
      <td>
        <!--Blank-->
      </td>
    </tr>
    <tr>
      <td>
        Total
      </td>
      <td>
        <!--Total Price-->
        <span id="total-price">

                    </span>
      </td>

Collectives™ on Stack Overflow

Trouble with updating an HTML table using javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related