Question

我正在尝试为三种成分配方创建一个单位转换计算器，但在点击“获取成分”按钮后无法进行计算。 Firebug将getElementById行返回为null？ JS：

$(function(){
    $('#tabs').tabs();
});

window.onload = init;

function init(){

document.getElementById("calc").onclick=function(){

    var pbc=Number(document.getElementById("pbc").value);   

    var dc=Number(document.getElementById("dc").value)* .0333333333;    
    var pb=Number(document.getElementById("pb").value)* .0166666667;    
    var sea=Number(document.getElementById("sea").value)* .0020833333;
    var dcTotal= ("dc" * "pbc");
    var pbTotal= ("pb" * "pbc");
    var seaTotal= ("sea" * "pbc");
    document.getElementById("resultdc").innerHTML=dcTotal.toFixed(1);
    document.getElementById("resultpb").innerHTML=pbTotal.toFixed(1);
    document.getElementById("resultsea").innerHTML=seaTotal.toFixed(1);
    }
}

HTML的一部分：

<form action="javascript:void(0)">
  <label for="pbc">How many Dark Chocolate Peanut Butter Cups would you like `to make?</label>`
  <input type="text" name="pbc" id="pbc">
  <br><br>
  <input type="button"id="calc" value="Get Ingredients">
  </form>

  <p id="resultdc"> Cup(s) of Dark Chocolate Chips</p>

  <p id="resultpb"> Cup(s) of Peanut Butter</p>  

  <p id="resultsea"> Teaspoon(s) of Sea Salt</p>

Answer 1

需要"button"和id

之间的空格

<input type="button" id="calc" value="Get Ingredients">

Answer 2

通过在变量周围加上引号，您可以将它们转换为字符串，因此无法用于计算：

例如

var dcTotal= ("dc" * "pbc");
var pbTotal= ("pb" * "pbc");
var seaTotal= ("sea" * "pbc");

应该是

var dcTotal= (dc * pbc);
var pbTotal= (pb * pbc);
var seaTotal= (sea * pbc);

还要注意以下一行

document.getElementById("resultdc").innerHTML=dcTotal.toFixed(1);

将使用值（dcTotal.toFixed（1））替换（＆＃34; resultdc＆＃34;）div中的所有内容

你应该把你的html改成像......

<p><span id="resultdc"></span> Cup(s) of Dark Chocolate Chips</p>

将在跨度中填入所需的数字，而不是替换文本内容。

Firebug正在返回：document.getElementById（...）为null - 我做错了什么？

2 个答案: