PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Tuesday, August 16, 2022

[FIXED] How would i create a price calculator with 1 input and 6 different outputs?

 August 16, 2022     calculator, html, input, output     No comments   

Issue

I have created an initial version, however you have to type the individual inputs for each output. I want to be able to just type into one input box and then it calculates all other outputs. How would i do this?

This is the code i have currently, im very very new to this :)

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber /0.7).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="RETAIL"></output> Retail


</form>

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber *1).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="Schools & CDC's"></output> Schools & CDC's


</form>

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber / 0.7 -(a.valueAsNumber / 0.7 / 100*40)).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="Trade - Band A" Math.round></output> Trade - Band A


</form>

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber *1).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="Trade - Band B"></output> Trade - Band B


</form>

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber / 0.7 -(a.valueAsNumber / 0.7 / 100*20)).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="Trade - Band C" Math.round></output> Trade - Band C


</form>

<form onsubmit="return false" oninput="o.value = (a.valueAsNumber / 0.7 -(a.valueAsNumber / 0.7 / 100*10)).toFixed(0)" <br>
  NHS <input name="a" id="a" type="number" step="any" placeholder="NHS" <br> TO <input name="o" id="o" type="number" for="a" placeholder="Trade - Band D" Math.round></output> Trade - Band D


</form>

https://jsfiddle.net/5gpLbj80/2/


Solution

First piece of advice would be to remove all of those inline event handlers. Attach a named function, then do all of your grunt-work inside it. By using addEventListener to connect the two, the function 'knows' which element it's attached to. That is to say, we can simply use this.value to get it's value, rather than having to use document.getElementById('nhs').value

"use strict;"
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
  let input = byId('myInput');
  input.addEventListener('input', onInputReceived, false);
}

function onInputReceived(evt)
{
  let outputs = [byId('output1'), byId('output2'), byId('output3')];
  let value = parseFloat(this.value);
  if (!isNaN(value))
  {
    outputs[0].textContent = value * 2;
    outputs[1].textContent = value * 3;
    outputs[2].textContent = parseInt( (value * 3)/4 );
  }
  else
  {
    outputs[0].textContent = 
    outputs[1].textContent = 
    outputs[2].textContent = "*invalid input (enter a number)*";
  }
}
<label>Enter data: <input id='myInput'/></label><br>
<ul>
  <li id='output1'></li>
  <li id='output2'></li>
  <li id='output3'></li>
</ul>

Alternate snippet

<!doctype html>
<html>
<head>
<script>
"use strict;"
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
  let input = byId('myInput');
  input.addEventListener('input', onInputReceived, false);
}

function onInputReceived(evt)
{
  let outputs = [byId('output1'), byId('output2'), byId('output3')];
  let value = parseFloat(this.value);
  if (!isNaN(value))
  {
    outputs[0].textContent = value * 2;
    outputs[1].textContent = value * 3;
    outputs[2].textContent = parseInt( (value * 3)/4 );
  }
  else
  {
    outputs[0].textContent = 
    outputs[1].textContent = 
    outputs[2].textContent = "*invalid input (enter a number)*";
  }
}
</script>
</head>
<body>
    <label>Enter data: <input id='myInput'/></label><br>
    <ul>
      <li id='output1'></li>
      <li id='output2'></li>
      <li id='output3'></li>
    </ul>
</body>
</html>


Answered By - enhzflep
Answer Checked By - Gilberto Lyons (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing