将html输入文本的值传递给Javascript函数并获得结果

这是我第一次使用Javascript。 我有这个剧本：

<script type="text/javascript">
function baunilha()
{
  var qb=document.getElementById("quantbaunilha").innerHTML;
  var prbau=5.58;
  var totbau=qtd*prbau;

}
  document.getElementById("valorlinhab").innerHTML=baunilha();

</script>

函数baunilha（）
{
var qb=document.getElementById（“quantbaunilha”）.innerHTML；
var-prbau=5.58；
var totbau=qtd*prbau；
}
document.getElementById（“valorlinhab”）.innerHTML=baunilha（）；

这就是函数的调用方式：

<tr>
<td><img src="/imagens/DOB_Baunilha.PNG" style="vertical-align: middle" alt="Ima_Bau">          </td>
<td>Caixa de 42 Unidoses de Detergente Ultra-Concentrado aroma Baunilha</td>
<td><input id="quantbaunilha" name="quantbaunilha" value="0" maxlength="2" type="text"    size="2" onchange="baunilha()"></td>
<td><input id="valorunib" name="valorunib" size="6" value="5.58">€</td>
<td><input id="valorlinhab" name="valorlinhab" size="8" value="0.00">€</td>
</tr>

Caixa de 42单剂量去污剂超浓缩芳香鲍尼利亚
€
€

因此，我希望函数的结果显示在文本框id=“valorlinhab”中。 我尝试了w3schools的例子，但它们没有起作用，就像网络上的其他例子一样。 有人能帮我吗？任何帮助都会来的。

---

提前谢谢。

您可以使用

innerHTML

将结果放入元素的内部HTML中，以获得一个包含开始标记和结束标记的标记（如

）

此外，由于您将其用于

onchange

事件，因此还应将值设置移入函数中

对于

，您可以改为设置值属性：

<script type="text/javascript">
function baunilha() {
    var qb=document.getElementById("quantbaunilha").value;
    var prbau=5.58;
    var totbau=qb*prbau;

    document.getElementById("valorlinhab").value=totbau;
}    
</script>

函数baunilha（）{
var qb=document.getElementById（“quantbaunilha”）.value；
var-prbau=5.58；
var totbau=qb*prbau；
document.getElementById（“valorlinhab”）.value=totbau；
}    

这应该能奏效

下面是一个JSFIDLE，其中有一个工作示例：

---

另外，您在行中有一个小的输入错误，即

var-totbau=qtb*prbau

应该是

var-totbau=qb*prbau

您需要使用value而不是innerHTML。此外，在计算中使用“qtb”而不是“qb”。您还应该在baunilha函数中设置该值。最后，必须将事件侦听器绑定到输入，以便它调用javascript函数

我还添加了一行代码来检查输入是否是一个数字

function baunilha()
{
    var qb=document.getElementById("quantbaunilha").value;

    //check that quantbaunilha is a number
    if(isNaN(parseFloat(qb)))
    {
        alert('Enter a number');
        return;
    }

    var prbau=5.58;

    document.getElementById("valorlinhab").value=qb*prbau;
}

document.getElementById("quantbaunilha").addEventListener('change', baunilha);

---

这是一把小提琴：

当心！www.w3dougs.com；）为了澄清Kvothe的评论，w3schools通常被专业人士认为是一个非常糟糕的参考，最好是不惜一切代价避免。他们有很多事实上不正确和/或过时的信息。感谢您的解释。我真的看到了好几次，比如，使用DTABASE，等等。好吧，它在你的代码中工作。但是，如果您愿意，请检查我这里的更正代码：并在这里尝试：。这对我不起作用。将baunhila函数中的“var totbau=qbprbau；”行替换为“document.getElementById（“valorlinhab”）.value=qbprbau；”另外，在输入按钮中的“baunhila onchange”后需要“（）”来调用该函数。谢谢你，杰姆。我尝试了你的代码，但在我的网页中仍然不起作用。我不明白为什么。我真的很抱歉。你需要在输入onchange方法中的“baunhila”后面加（）最后，我注意到你的脚本在头部。。将javascript移动到html正文的末尾（在结束标记之前），以正确添加事件侦听器。我在回答中记下了这一点。