Multiplying user input using html and JavaScript

Question

I am noob posting for the first time. I am creating an opioid calculator that converts doses of different opioid to a standard. I am familiar with html and have been studying OOP with C#. Working with Javascript for first time. I have tried many ways and cannot get the "calculate(x)" function to return the value to the specified element. The function should be called when text associated with ID="r2" is changed (onchange event) by the user. The value should be displayed in the element with Id="MED-bup-tab". The conversion factor is given in the onchange="calculate(30)" event. Any suggestions are appreciated.

Here is what I have:

function calculate(x) {
  var my1 = x;
  var my2 = document.getElementById('r2').value;
  document.getElementById('MED-bup-tab').innerTHTML = parseInt(my1) * parseInt(my2);
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 7px;
  padding: 5px 2.5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 7px;
  font- weight: normal;
  padding: 5px 2.5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg .tg-yw4l {
  vertical-align: top
}

<SCRIPT language="javascript" src="date.js"></SCRIPT>
<form>
  <table>
    <tr>
      <th>Medications</th>
      <th>Daily Dose (mg)</th>
      <th>MED</th>
      <th>Medications</th>
      <th>Daily Dose (mg)</th>
      <th>MED</th>
    </tr>
    <tr>
      <td><input class="tg-yw41" type=”text” name=”buprenorphine-tablet-film” value=Burpenorphine id="med” disabled></td>
           <td>'TEXT" </td>
        <td><input class="tg-yw41" type=”text” name=”dose” value="" placeholder="0" Id="r2" onchange="calculate('30')"></td>
        <td><input Id="MED-bup-tab" type=”text” name=”zero” value=""></td>
    </tr>
  </table>
</form>

Vikasdeep Singh · Accepted Answer · 2018-06-20 00:46:57Z

Issue is at below line:

  document.getElementById('MED-bup-tab').innerTHTML = parseInt(my1) * parseInt(my2);

Instead of .innerTHTML use .value. It will work.

Below is working example:

<!DOCTYPE html>
<html>
   <head>
   <SCRIPT language="javascript" src="date.js"></SCRIPT>
   <style type="text/css">
   table {
         font-family: arial, sans-serif;
         border-collapse: collapse;
         width: 100%;
         }

   td, th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
          }
  .tg  {border-collapse:collapse;border-spacing:0;}
  .tg td{font-family:Arial, sans-serif;font-size:7px;padding:5px 2.5px;border- style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
  .tg th{font-family:Arial, sans-serif;font-size:7px;font- weight:normal;padding:5px 2.5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
   .tg .tg-yw4l{vertical-align:top}
</style>
   </head>
     <body> 
       <form>
         <table>
            <tr>
              <th>Medications</th>
              <th>Daily Dose (mg)</th>
              <th>MED</th>
              <th>Medications</th>
              <th>Daily Dose (mg)</th>
              <th>MED</th>              
           </tr>
        <tr>
           <td><input class="tg-yw41" type=”text” name=”buprenorphine-tablet-film” value=Burpenorphine id="med” disabled></td>
           <td>'TEXT"</td><td><input class ="tg-yw41" type=”text” name=”dose” value="" placeholder="0" Id="r2" onchange="calculate('30')"></td>
           <td ><input Id="MED-bup-tab" type=”text” name=”zero” value="" ></td>              
       </tr>
     </table>
 </form>
  <script type="text/javascript">
    function calculate(x) 
    {
      var my1 = x;
      var my2 = document.getElementById('r2').value;
      document.getElementById('MED-bup-tab').value = parseInt(my1) * parseInt(my2);        
    }
    </script>    
  </body>   
</html>

Collectives™ on Stack Overflow

Multiplying user input using html and JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related