使用html和JavaScript使用户输入倍增
使用html和JavaScript使用户输入倍增
提问于 2018-06-20 08:34:52
我是新手第一次发帖。我正在创建一个阿片类药物计算器，可以将不同剂量的阿片类药物转换为标准剂量。我熟悉超文本标记语言，并且一直在用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
Stack Overflow用户
回答已采纳
发布于 2018-06-20 08:46:58
问题在下面一行：
document.getElementById('MED-bup-tab').innerTHTML = parseInt(my1) * parseInt(my2);使用.value而不是.innerTHTML。看起来不错。
以下是工作示例：
<!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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50938636
复制相关文章
相似问题
腾讯云开发者
