文檔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（）或追加（），你有更多的控制權。