How to process a function when there are two inputs made and how to set constants to input

Question

I am working on currency converter, its a school project, I have done the assignment and done with it.

<HTML>

  <HEAD>
    <TITLE>Currency Converter Protype1</TITLE>
  </HEAD>

  <BODY>

    <SECTION>
      <P>Enter Amount:
        <INPUT type="number" ID="Val" list="CommonVal">
        <Datalist ID="CommonVal">
       <option value=1>1</option>
    <option value=10>10</option>
    <option value=100>100</option>
    <option value=500>500</option> 
   </Datalist>
        <Select id="Select">
    <Option Value=1 name=1 >AUS</Option>
        <Option Value=82 name="Japanese Yen">Yen</Option>
    <Option Value=5 name="Chinese Yaun">Yaun</Option>
    <Option Value=10000 name="Indonesian Rupiah">Rupiah</Option>
   </Select>
        <Button ID="Submit" onclick="Process()">Click Me</Button>
      </P>
    </SECTION>

    <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
      function Process() { // Module 2
        var val = document.getElementById("Val").value;
        var Select = document.getElementById("Select").value * 1;
        var country = ["Australia", "Japanese Yen", "Chinese Yuan", "Indonesian Rupiah"];
        var rate = [1, 82, 5, 100000];
        var text = "";
        
        var i;
        for (i = 0; i < country.length; i++) {
           text += country[i] + ": $ " + (((val*1)/Select)*rate[i]).toFixed(2) + "<br>";
          }
          document.getElementById("Country1").innerHTML = text;

        }
        //(val/select)*() "Australia", "Japanese Yen", "Chinese Yen", "Indonesian Rupiah"

    </SCRIPT>
    <p id="Country1"></p>

  </BODY>

</HTML>

And being done ahead of time, I managed to do that, but I want to do better than that. So instead I thought of working more on it. Now I want my code to take in a value of an input box and display it another input box. But the problem is that I cant set constants to input. For example, setting the country1 to some numerical value. But I don't know how to do it.

<HTML>

<HEAD>
  <TITLE>Currency Converter Protype1</TITLE>
</HEAD>

<BODY>

  <SECTION>
    <P>Enter Amount:<br> Australia:
      <INPUT type="number" name="country1" ID="Val" list="CommonVal" oninput="Process()"><br> Japanese Yen:
      <INPUT type="number" name="country2" ID="Val" list="CommonVal" oninput="Process()"><br> Chinese Yaun:
      <INPUT type="number" name="country3" ID="Val" list="CommonVal" oninput="Process()"><br> Indonesian Rupiah:
      <INPUT type="number" name="country4" ID="Val" list="CommonVal" oninput="Process()"><br>
      <Datalist ID="CommonVal">
       <option value=1>1</option>
    <option value=10>10</option>
    <option value=100>100</option>
    <option value=500>500</option> 
  </Datalist>
    </P>
  </SECTION>

  <SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
    var

    function Process() { // Module 2
      var val = document.getElementById("Val").value;
      var Select = document.getElementById("Select").value * 1;
      var country = {
        "Australia": 1,
        "Japanese Yen": 82,
        "Chinese Yuan": 5,
        "Indonesian Rupiah": 10000
      };
      var text = "";
      var i;
      var b;

      for (var i in country) {
        text += i + ": " + (((val * 1) / Select) * country[i]).toFixed(2) + "<br />";
      }
      document.getElementById("Country1").innerHTML = text


    }
  </SCRIPT>
  <p id="Country1"></p>

</BODY>

</HTML>

The result should show the values when any value in the country is inputted. I was told that to print out a value in the input box, the document.getElementById().value = …; Can be used.

Your second snippet... You do not have an element with ID = "Select" — daddygames, Jul 08 '19 at 13:02
Also... Do not create multiple elements with the same ID. ID needs to be a unique value for every element. — daddygames, Jul 08 '19 at 13:03
@daddygames I am just not sure how to replace the select with the constant that I had in snippet one, I couldn't think, so I thought about leaving it there. — Dev Patel, Jul 08 '19 at 13:04
All you should need in this case is to change the selector in your javascript `document.getElementById('CommonVal');` This will get your DataList element just like it was getting the select element before. — daddygames, Jul 08 '19 at 13:06
@daddygames wouldn't the values that are going in to input function would be limited. — Dev Patel, Jul 08 '19 at 13:07
Since all of the `` elements have the same ID property, you will only ever get the first element's value when you call '`document.getElementById('Val').value;` It's just bad practice to use duplicate IDs and it could introduce unexpected issues for every user, but especially those using Accessibility Software (ex: visually impaired). — daddygames, Jul 08 '19 at 14:50

daddygames · Accepted Answer · 2019-07-09T12:50:57.247

Updated HTML eliminates the duplicate ID property

<SECTION>
    <P>Enter Amount:<br> Australia:
        <INPUT type="number" name="country1" ID="country1" list="CommonVal" oninput="Process()"><br> Japanese Yen:
        <INPUT type="number" name="country2" ID="country2" list="CommonVal" oninput="Process()"><br> Chinese Yaun:
        <INPUT type="number" name="country3" ID="country3" list="CommonVal" oninput="Process()"><br> Indonesian Rupiah:
        <INPUT type="number" name="country4" ID="country4" list="CommonVal" oninput="Process()"><br>
        <Datalist ID="CommonVal">
            <option value=1>1</option>
            <option value=10>10</option>
            <option value=100>100</option>
            <option value=500>500</option>  
        </Datalist>
    </P>
    <div id="Country1"></div>
</SECTION>

I did not research the calculation you are attempting to make. So you may need to adjust this.

I don't even try to select the datalist element because I didn't see a need to grab a value from it. The input element uses the values in the datalist to populate the values for the input elements.

I use event.value to grab the value of the input element that was used. Then I clear out all other inputs so the user can clearly see which currency value they selected. Then I adjusted your calculation loop to use the value from the input element and the value assigned to the country. With this, when you select a value from an input, the div element displays the calculated values.

function Process() {
        var val = event.target.value; // get the current input's value
       // clear out all the other input elements
        document.querySelectorAll('input').forEach(function(input, index){
            input.value = '';
        });
       // reassign the value to the input so the user can see what they selected
        event.target.value = val;
        var country = {
            "Australia": 1,
            "Japanese Yen": 82,
            "Chinese Yuan": 5,
            "Indonesian Rupiah": 10000
        };
        var text = "";
        var i;
        var b;
        for (var i in country) {
            // just multiply the selected value times the value for the country 
            text += i + ": " + (val * country[i]).toFixed(2) + "<br />";
        }
        // display the results in a div element on the page
        document.getElementById("Country1").innerHTML = text
    }

[UPDATE - ASSIGNING CALCULATED VALUES TO THE INPUTS]

One way to display the calculated currency values inside the inputs is to change the IDs of the inputs for each country to values that can be easily queried in the Process function.

var country = {
            "Australia": 1,
            "Japanese Yen": 82,
            "Chinese Yuan": 5,
            "Indonesian Rupiah": 10000
        };

I manually configured these IDs using the values from the object above.

<SECTION>
    <P>Enter Amount:<br> Australia:
        <INPUT type="number" name="country1" ID="country1" list="CommonVal" onkeyup="Process();"><br> Japanese Yen:
        <INPUT type="number" name="country2" ID="country82" list="CommonVal" onkeyup="Process();"><br> Chinese Yaun:
        <INPUT type="number" name="country3" ID="country5" list="CommonVal" onkeyup="Process();"><br> Indonesian Rupiah:
        <INPUT type="number" name="country4" ID="country10000" list="CommonVal" onkeyup="Process();"><br>
        <Datalist ID="CommonVal">
            <option value=1>1</option>
            <option value=10>10</option>
            <option value=100>100</option>
            <option value=500>500</option>  
        </Datalist>
    </P>
    <div id="Country1"></div>
</SECTION>

Now I update the Process function to use these new IDs to update the input values when one of them is changed. Notice that I also had to ignore the Delete key. Otherwise the user would be unable to clear out the field and select a different value. You will probably want to look into a more elegant solution, but this did the job for this example.

It's probably important to note that no matter which input you select a value from, it is currently calculating as if you selected from the Australia input box. I did not take the effort to correct this issue as the point of this is to help you understand how to assign the values to the inputs which this example will hopefully accomplish.

function Process() {
        var keyCode = event.which ? event.which : event.keyCode;
        if (typeof(keyCode) !== undefined) {
            if (keyCode==8) { // ignore delete key
                return false;
            }
        }
        var val = event.target.value;
        var country = {
            "Australia": 1,
            "Japanese Yen": 82,
            "Chinese Yuan": 5,
            "Indonesian Rupiah": 10000
        };
        var text = "";
        var i;
        var b;
        for (var i in country) {
            var currency = (val * country[i]).toFixed(2);
            // select the input by it's ID, I used the country object to build the selector
            var input = document.querySelector('#country' + country[i]);
            input.value = currency; // assign the calculated value to the input
        }
    }

what if I want to show the results in the input box like this currency converter: https://codepen.io/Coding_Journey/pen/exjrdg — Dev Patel, Jul 09 '19 at 09:25
@DevPatel I've updated the answer with additional information regarding how to assign the values to the input boxes. — daddygames, Jul 09 '19 at 12:51
The KeyCode indicates which key was pressed on the keyboard. The number 8 represents the Delete key on a Windows-based keyboard. As stated in the comments, the purpose is to ignore the calculations when the delete key is used. Otherwise the user is unable to clear the field and select a new value. — daddygames, Jul 09 '19 at 17:29
is their a way I can validate that, which input is being used. For example, if Australia is selected, then do this. What condition can I have to make an if statement here. — Dev Patel, Jul 09 '19 at 17:36
`event.target` returns the element that called the function. one possible check is on the ID property like so... `var isAustralia = event.target.id==='country1';` There are tons of other ways to do this. This is just one example within the context of the code we've been using. — daddygames, Jul 09 '19 at 17:39
I took of the the (toFixed) and it solved the problem and the currency converter works fine. But now Is their a way I can make the currency to 2 decimal places. — Dev Patel, Jul 10 '19 at 05:08
I'm glad this answer helped. Please mark as answer. As for decimal places, that is a separate question. Here is one post that may help with that issue -> https://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-only-if-necessary — daddygames, Jul 10 '19 at 12:51

How to process a function when there are two inputs made and how to set constants to input

1 Answers1