文档Alternative？ DOM？

Question

所以我最近建议不要使用document.write。但我似乎无法弄清楚如何使用DOM操作使其在屏幕上打印文档。此功能可以使您按下按钮输入汽车行驶的英里数，并获得碳足迹。只有使用document.write才能在单击按钮后覆盖整个页面。我试过getElementbyId，但它似乎没有打印任何东西，所以我知道我可能没有正确使用它。在一个替代的任何想法，将完成的功能，而不会覆盖页面会更有益>

下面是代码我那里有文件撰写，是覆盖整个页面的一个：

<script> 

    $(document).ready(function() { 
     $(".button").click(function() { 

      var myNumber = 19.2; 
      var myAnswer = prompt ("How many miles did you travel?"); 
      document.write(" Your Carbon Foot print is:" + myAnswer * myNumber + "lbs"); 

      }); 
     }); 
     </script> 

Answer 1

DOM操作涉及到创建文档元素并将其插入到文档树中。这件事情，如果你想要做大量的工作，JS应该成为你的第二天性：

- document.write(... 
+ $("<span>").text(' Your Carbon Foot print ...').appendTo("body"); 

你可能想文本别的东西追加，但是上面应该有类似的效果，而不是覆盖整个页。

Answer 2

听起来像你是相当新的JQuery - 欢迎！

一旦你拥有jQuery中，都很少（如果有的话）需要回去使用document.write或其他低级别的DOM工具（尽管它仍然必须知道他们不时）

所以，从HTML开始。你可能喜欢的东西去：

<button id="calcbutton">Calculate Footprint</button> 
<div id="carbonresult"></div> 

我用一个ID来标识按钮，而不是类在你的例子（记住的ID应该是唯一的，类可以应用到多个元素），但是你的方式仍然可以工作。

对于那么脚本：

$(document).ready(function(){ 
    $("#calcbutton").click(function(){ 
     var convFactor = 19.2; 
     var milesTravelled = prompt("How many miles did you travel?"); 
     var resultMsg = " Your Carbon Footprint is: " + milesTravelled * convFactor 
     $("#carbonresult").text(resultMsg); 
    }); 
}); 

通过使用jQuery的结果放在您所选择的元素中使用的.text（）和.html（）或追加（），你有更多的控制权。