I have already created a form in html and linked it with my style sheet and also JavaScript page. My problem is displaying the result on the form.

Can someone please take a look at the JavaScript code and tell me what I am doing wrong?

See the snippet for more details

// Percentage Calculator
  
const myForm     = document.getElementById('my-form');
myForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ; 
 myForm.oninput = percentageCalculator;

function percentageCalculator(amount, percent) {       
    return ((percent *amount) / 100).toFixed(2)
  }
  
  myForm.result.value = percentageCalculator()

 fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }

<h2>Percentage Calculator</h2>

<form action="" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" name="percent" step=any min=0> % of </append>
    <label><input type="number" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output name="result" value='0'></output>

    <br><br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>

I have already created a form in html and linked it with my style sheet and also JavaScript page. My problem is displaying the result on the form.

Can someone please take a look at the JavaScript code and tell me what I am doing wrong?

See the snippet for more details

// Percentage Calculator
  
const myForm     = document.getElementById('my-form');
myForm.onsubmit = e=>e.preventDefault()  // disable form submit
  ; 
 myForm.oninput = percentageCalculator;

function percentageCalculator(amount, percent) {       
    return ((percent *amount) / 100).toFixed(2)
  }
  
  myForm.result.value = percentageCalculator()

 fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }

<h2>Percentage Calculator</h2>

<form action="" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" name="percent" step=any min=0> % of </append>
    <label><input type="number" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output name="result" value='0'></output>

    <br><br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>

• javascript
• percentage

• You all did well. Thanks a lot for your help!!! – ZeManel Commented Feb 12, 2020 at 4:56

4 Answers 4

If you want to make result instantly on click of the input boxes then, make addEventListerner to input elements then get the value inside percentageCalculator and make calculation accordingly..

I have not modified anything from your HTML and only modified the JS part..

const myForm = document.getElementById('my-form');

const percent = document.querySelector('[name="percent"]');

const amount = document.querySelector('.amount');

const result = document.querySelector('[name="result"]');

function percentageCalculator() { 
  result.value = ((percent.value * amount.value) / 100).toFixed(2)
}

myForm.addEventListener('submit', e=>e.preventDefault())
myForm.addEventListener('input', percentageCalculator)
  
// myForm.result.value = percentageCalculator()

fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }

<h2>Percentage Calculator</h2>

<form action="" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" name="percent" step=any min=0> % of </append>
    <label><input type="number" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output name="result" value='0'></output>

    <br><br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>

If it is possible for you to modify HTML template then you can add name attribute to the amount input as well then you can get the element with myForm.inputName..

Alternative solution: https://codepen.io/Maniraj_Murugan/pen/KKpdgXo

Use oninput as I did below. Also give the amount input field a name. it's missing in the OP.

// Percentage Calculator
  
const myForm     = document.getElementById('my-form');

myForm.oninput = () => {
    myForm.result.value = percentageCalculator(myForm.amount.value, myForm.percent.value);
}

function percentageCalculator(amount, percent) {       
    return ((percent * amount) / 100).toFixed(2)
}

 fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }

<h2>Percentage Calculator</h2>

<form action="" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" name="percent" step=any min=0> % of </append>
    <label><input type="number" name="amount" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output name="result" value='0'></output>

    <br>
    <button type="reset">Reset Calculator!</button>
  </fieldset>
</form>

Pass the parameters into the function as a local scope and return the result back.

function percentageCalculator(amount,percent) {       
  return ((percent *amount) / 100).toFixed(2)
}

myForm.result.value = percentageCalculator()

// Percentage Calculator
  

const calculatedResult = document.getElementById('result');

function mySubmitFunction(e) {
  e.preventDefault();
  const percent = document.getElementById('percent').value;
  const amount = document.getElementById('amount').value;
  calculatedResult.value = percentageCalculator(amount,percent);
  return false;
}

function percentageCalculator(amount,percent) {       
  return ((percent *amount) / 100).toFixed(2)
}

 fieldset { margin-top: 1em;
}
 label { 
   display: inline-block; width: 8em; text-align: left; 
  }
  input { 
    font-size: .8em; text-align: left; display: inline-block; width: 8em;
  }
   output::before {  
     content: ''; 
    }
    output { 
      font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
    }

<h2>Percentage Calculator</h2>

<form action="" onsubmit="return mySubmitFunction(event)" id="my-form">
  <fieldset>
    <legend>Calculate Percentage :</legend>
    <append>What is <input type="number" id="percent" name="percent" step=any min=0> % of </append>
    <label><input type="number" id="amount" class="amount" step=any min=0></label> 
  </fieldset>
  <fieldset><br>
    <legend>Result :</legend>
    <output id="result" name="result" value='0'></output>

    <br><br>
    <button type="submit">Calculate!</button>
  </fieldset>
</form>

Your mistake:

• Submit button instead of reset
• Prevent default once it's submitted
• reference element using ID