JavaScript calculations broke if I add multi step calculation

Question

I am developing an HTML questionnaire with the help of ChatGPT and Youtube guides. If I only do simple addition, the output works just fine. But, once I try multi-step division and multiplication, the output breaks. Here is the code:

document.getElementById("survey-form").addEventListener("submit", function(event) {
    event.preventDefault();
    
    // Get the values of the input fields
    let f1V = parseFloat(document.getElementById("f1").value);
    let f2V = parseFloat(document.getElementById("f2").value);
    
    let a1V = parseFloat(document.getElementById("a1").value);
    let a2V = parseFloat(document.getElementById("a2").value);
    
     let totalBobot = f1V + f2V;
     let Bobot1 = f1V / totalBobot;
     let Bobot2 = f2V / totalBobot;
     
     let n1 = a1V * Bobot1;
     let n2 = a2V * Bobot2;
     
     let totalValue = n1 + n2;
     
     // How do you add one more IF condition? I need 4
      if (totalValue < 10) {
        result = "low";
      } else if (totalValue < 20) {
        result = "medium";
        
      } else if (totalValue < 30) {
        result = "high";
      
      } else {
        result = "very high";
      }
      
      // Also how you print this in a new page? I see chatGPT is using this command
      var url = "result.html?name=" + encodeURIComponent(name);
      window.location.href = url;

});

<body> 
<form action="" id="survey-form">
       <div class="form-group">
                <p id="quest">1. Criteria Question 1</p>
                    <label><input type="radio" name="f1" value="1">CR 1</label>
                    <label><input type="radio" name="f1" value="2">CR 2</label>
                    <label><input type="radio" name="f1" value="3">CR 3</label>
                    <label><input type="radio" name="f1" value="4">CR 4</label>
       </div>

       <div class="form-group">
                <p id="quest">2. Criteria Question 2?</p>
                    <label><input type="radio" name="f2" value="1">CR 1</label>
                    <label><input type="radio" name="f2" value="2">CR 2</label>
                    <label><input type="radio" name="f2" value="3">CR 3</label>
                    <label><input type="radio" name="f2" value="4">CR 4</label>
       </div>
       <div class="form-group">
                <p id="quest">2. Question 2?</p>
                    <label><input type="radio" name="a1" value="1">Value 1</label>
                    <label><input type="radio" name="a1" value="2">Value 2</label>
                    <label><input type="radio" name="a1" value="3">Value 3</label>
                    <label><input type="radio" name="a1" value="4">Value 4</label>
       </div>
       <div class="form-group">
                <p id="quest">2. Question 2?</p>
                    <label><input type="radio" name="a2" value="1">Value 1</label>
                    <label><input type="radio" name="a2" value="2">Value 2</label>
                    <label><input type="radio" name="a2" value="3">Value 3</label>
                    <label><input type="radio" name="a2" value="4">Value 4</label>
       </div>
       <div class="form-group">
                    <button type="submit" id="submit" class="btn" onclick="">Submit</button>
       </div>
</form>
        <script src="tes1.js"></script>
</body>

Also if I want to use decimal, how you do it? Do I use parseFloat? What about the other variable?

My guess is it doesn't work because you have typos. First, the variables `f1v` and `f2v` should be `f1V` and `f2V`. Next, the variables `a1` and `a2` should be `a1V` and `a2V`. Please confirm that that's all there is to this question. I can close it as a simple typo. — slebetman, May 01 '23 at 02:53
I already fix it but still doesn't work. Do I need to declare or define the new variable before hand? — Mochi The PooH, May 01 '23 at 02:58
Never use `parseInt`. Use `parseFloat` unless you _absolutely_ need to parse string representations of numbers that use a non-decimal base. Also, if this is the best chatgpt can give you, stop using it and just find a good modern tutorial. JS hasn't used `var` for a _long_ time now, use `let` for variables that you will be reassigning later, or `const` for variables that should not be reassigned. And never, _ever_ use `document.write`. [It does not do what you think it does](http://pomax.github.io/1473270609919/if-you-use-use-document-write-you-suck-at-javascript). — Mike 'Pomax' Kamermans, May 01 '23 at 02:59
@Mike I changed to parseFloat. I don't need to redefine the variables but just in case I changed it to let. But I don't know how else you're supposed to do output without document.write — Mochi The PooH, May 01 '23 at 03:24
Oh no! `document.write` erases everything in the page, so you should learn [JavaScript DOM](https://www.w3schools.com/js/js_htmldom.asp). `document.write` is rarely used :) — TheCoder - or rather ACoder, May 01 '23 at 03:27
I tried reading the DOM, but it honestly confuse me. I just need to do one document.write . All I need to do is IF condition where IF the totalValue in certain 4 sets of range, it would write different result. — Mochi The PooH, May 01 '23 at 04:02
just create a real element, set its text content, and add it to your document. E.g `const p = document.createElement("p"); p.textContent = "whatever you need"; document.body.append(p);`. Don't use `document.write` because it _really_ do _not_ do what you think it does. It does not "write data into your document", and the moment you turn your script into a proper .js file and you try to load that normal modern way (i.e. ``) this would completely wipe your document. So even if you "just need to X", don't ever use document.write for that. — Mike 'Pomax' Kamermans, May 01 '23 at 05:11
@Mike'Pomax'Kamermans I can define p.textContent through IF condition? So like let's say the totalValue is below 10, const P = "low", above 10 but below 20, const = "medium" etc. And I did tried using proper .js file but it confuse me how to take the values from the input page then output it in different page. ChatGPT said I need to use document.getElementById("questionnaire-form").addEventListener("submit", function(event) {event.preventDefault(); — Mochi The PooH, May 01 '23 at 08:42
I edit the question to better reflect the current coding. Now I'm using separate .js file. — Mochi The PooH, May 01 '23 at 13:16
I’m voting to close this question because ChatGPT is banned. — zer00ne, May 01 '23 at 14:36
f1, f2, a1 and a2 are names and not ids? I wonder how did this even work.... — ADasGH, May 01 '23 at 14:53

ADasGH · Accepted Answer · 2023-05-02T04:34:30.190

There are couple of mistakes in your JS file:

f1, f2, a1 and a2 are names but you try to access it with getElementById.
Variable result is never defined.

So here is my solution to your problem (JS file):

document.getElementById("survey-form").addEventListener("submit", function(event) {
    event.preventDefault();
    let f1V = parseFloat(document.querySelector("input[name='f1']:checked").value);
    let f2V = parseFloat(document.querySelector("input[name='f2']:checked").value);
    
    let a1V = parseFloat(document.querySelector("input[name='a1']:checked").value);
    let a2V = parseFloat(document.querySelector("input[name='a2']:checked").value);
     let totalBobot = f1V + f2V;
     let Bobot1 = f1V / totalBobot;
     let Bobot2 = f2V / totalBobot;
     
     let n1 = a1V * Bobot1;
     let n2 = a2V * Bobot2;
     
     let totalValue = n1 + n2;
     console.log(totalValue);
     let result;
      if (totalValue < 10) {
        result = "low";
      } else if (totalValue < 20) {
        result = "medium";
        
      } else if (totalValue < 30) {
        result = "high";
      
      } else if (totalValue < 40){
        result = "very high";
      }
      else{
        result = "extreme";
      }
      
      let resultBlob = new Blob([result],{type: "text/html"});
      link = document.createElement("a");
      let fileObjectURL = URL.createObjectURL(resultBlob);
      link.href = fileObjectURL;
      link.target = "_blank"; //remove this line if you want to open file in same tab
      link.click();
      //The following code is to display the link to the new page even if the pop-up was blocked.
      link.innerHTML = "Click me to see the result";
      document.body.appendChild(link);
});

I also noticed the absence of a submit button on your HTML file. How are you planning to submit the form then?

HTML file:

<body> 
<form action="" id="survey-form">
       <div class="form-group">
                <p id="quest">1. Criteria Question 1</p>
                    <label><input type="radio" name="f1" value="1">CR 1</label>
                    <label><input type="radio" name="f1" value="2">CR 2</label>
                    <label><input type="radio" name="f1" value="3">CR 3</label>
                    <label><input type="radio" name="f1" value="4">CR 4</label>
       </div>

       <div class="form-group">
                <p id="quest">2. Criteria Question 2?</p>
                    <label><input type="radio" name="f2" value="1">CR 1</label>
                    <label><input type="radio" name="f2" value="2">CR 2</label>
                    <label><input type="radio" name="f2" value="3">CR 3</label>
                    <label><input type="radio" name="f2" value="4">CR 4</label>
       </div>
       <div class="form-group">
                <p id="quest">2. Question 2?</p>
                    <label><input type="radio" name="a1" value="1">Value 1</label>
                    <label><input type="radio" name="a1" value="2">Value 2</label>
                    <label><input type="radio" name="a1" value="3">Value 3</label>
                    <label><input type="radio" name="a1" value="4">Value 4</label>
       </div>
       <div class="form-group">
                <p id="quest">2. Question 2?</p>
                    <label><input type="radio" name="a2" value="1">Value 1</label>
                    <label><input type="radio" name="a2" value="2">Value 2</label>
                    <label><input type="radio" name="a2" value="3">Value 3</label>
                    <label><input type="radio" name="a2" value="4">Value 4</label>
       </div>
       <button>Submit</button>
</form>
</body>

EDIT:

If you want to add some other code to newly created (as a blob) HTML file, just add your HTML code to the string result.

For example:

result+="<header><link rel='stylesheet' href='styles.css'></header>"

Hi. I want to ask something. If I change the "name" to "id", it should work with getElementById right? It might break something that's trying to get value from "name" but I don't have other code so it shouldn't cause any problem. And thank you for answering. — Mochi The PooH, May 02 '23 at 00:45
Oh wait, I tried changing the "name" to "id" and it broke the radio list so now you can multiple option. Also sorry yes I did have submit button, I just forget to add it here. — Mochi The PooH, May 02 '23 at 01:07
Time to learn some basics. - You can't have multiple elements with same `id`. - `name` attribute of radio buttons is used to group radio buttons so that only one of the radio buttons having a particular `name` can be selected at a time. Here in your case ideal attribute to use is `name` only, but you have to change the javascript for it to work. I have done that for you. Hope you noticed that.... — ADasGH, May 02 '23 at 04:09
Yeah thank you. I managed to get the calculation and the output working. But if I want output it in another HTML page so I can apply the CSS, how do you do it? — Mochi The PooH, May 02 '23 at 04:20
You mean an existing HTML file? Or you just want to apply css to the newly created HTML file? — ADasGH, May 02 '23 at 04:28
@MochiThePooH Then see this question and its answers: https://stackoverflow.com/q/14693758/21598034 — ADasGH, May 02 '23 at 07:57

JavaScript calculations broke if I add multi step calculation

1 Answers1