Question

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

下面是我只有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（），您可以获得更多控制权。

文件替代？ DOM？

2 个答案: