使用html和JavaScript乘以用户输入

时间:2018-06-20 00:34:52

标签: javascript html

我是新手,第一次发菜。我正在创建一个将阿片类药物剂量转换为标准剂量的阿片类药物计算器。我熟悉html,并且一直在使用C#学习OOP。首次使用Javascript。我已经尝试了许多方法,但无法获得“ calculate(x)”函数来将值返回给指定的元素。用户更改与ID="r2"关联的文本(onchange事件)时,应调用该函数。该值应显示在带有Id="MED-bup-tab"的元素中。转换因子在onchange="calculate(30)"事件中给出。任何建议表示赞赏。

这是我所拥有的:

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>

1 个答案:

答案 0 :(得分:2)

问题在下面的行:

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

使用.innerTHTML代替.value。它会工作。

下面是工作示例:

<!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>