替代文件？ DOM？

Question

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

下面是我只用document.write编写的代码，该代码覆盖了整个页面：

<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（）或append（）将结果放置在您选择的元素内，您将拥有更多的控制权。