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

Question

I'm trying to create a unit conversion calculator for a three-ingredient recipe, but can't get the calculations to run through after hitting 'get ingredients' button. Firebug is returning the getElementById lines as 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);
    }
}

portion of 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

by putting quotes around your variables, you ar econverting them into strings and therefore not able to be used for calculations:

eg

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

should be

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

also note that the following line

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

will replace all content in the ("resultdc") div, with the value (dcTotal.toFixed(1))

you should change your html to something like..

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

which will fill in the desired number into the span and not replace the text content.