Click here to Skip to main content
15,445,331 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
<pre lang="Javascript">document.addEventListener("DOMContentLoaded", () => {

  let fields = $('#form1 :input').change(calculate)
  document.querySelectorAll("#form1 option").innerText = function(i, t {
    if (this.value !== "0")
      return t + " - " + this.value
function calculate() {

  let price = 0;
  let price2 = 0;
  let tArm = 29.95/5;
  let list = []

  fields.each(function() {
    price += +this.value;
    if (this.value > 0)
      price = price + tArm;     
      price2 = price / 3;
  document.getElementById("list").innerHTML = list.join("<br>")
  document.getElementById("price").innerHTML = price.toFixed(2);
  document.getElementById("price2").innerHTML = price2.toFixed(2);

The function wont populate the fields I created in my html. I am trying to get a total for all of the selected drop down fields. It should also be changing the contents of the drop down fields by adding - followed by the price.

What I have tried:

I have tried doing this a couple other ways that were much simpler, but havent been able to get any of the information to output into the fields. If anyone can help me figure this out, it would be much appreciated because I am out of ideas.
Updated 9-Sep-21 23:00pm
Member 15329613 9-Sep-21 14:35pm    
If you debug the code you can see exactly what is happening. That's the fastest way to get this fixed.
namithedog 9-Sep-21 15:19pm    
Can you provide more information or show me what your using to debug
Member 15329613 9-Sep-21 16:01pm    
In most browsers you press F12 and it will open the debug tools. You can put a breakpoint on your code so that it will stop in your code when it executes and you can examine the values of your variables and so forth. It will also have a console that will show if there are any errors. You have to step through the code to figure out what is going wrong.
namithedog 9-Sep-21 15:31pm    
I am aware that the issues are with the "$" and all of the contents in line 88 basically. I just have no idea what is causing it and why my code wont run.
Member 15329613 9-Sep-21 16:02pm    
I have no idea what line 88 is. How do you know the issues are with the $ if you don't even know what the problem is?

1 solution

It's not working because you've taken code that uses jQuery, not loaded jQuery in your page, and randomly replaced some, but not all, of the jQuery-specific code with raw Javascript.

Throw that code away and start again from scratch. For example:
document.addEventListener("DOMContentLoaded", () => {
    const fields = document.querySelectorAll("#form1 select");
    fields.forEach(f => f.addEventListener("change", calculate));

    document.querySelectorAll("#form1 option").forEach(o => {
        if (o.value !== "0") {
            o.innerText += ` - ${o.value}`;

    function calculate() {
        let price = 0;
        let tArm = 29.95 / 5;
        let list = [];

        fields.forEach(f => {
            const thisValue = +f.value;

            if (thisValue !== 0) {
                price += thisValue;
                price += tArm;

        document.getElementById("list").innerHTML = list.join("<br>")
        document.getElementById("price").innerHTML = price.toFixed(2);

        const price2 = price / 3;
        document.getElementById("price2").innerHTML = price2.toFixed(2);

Share this answer
namithedog 10-Sep-21 16:11pm    
I am just now seeing this... thank you very much for your effort. I managed to get it working on my own, but this is great. I will definitely be using again!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900