0

所以最近有人建议我不要使用 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>
4

2 回答 2

1

DOM 操作涉及创建文档元素并将它们插入到文档树中。如果您想使用 JS 进行大量工作，这应该成为您的第二天性：

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

您可能希望将文本附加到其他内容，但上述内容应该具有类似的效果，并且不会覆盖整个页面。

于 2013-01-22T02:09:51.677 回答
0

听起来您对 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() 选择的元素中，您可以获得更多控制权。

于 2013-01-22T02:45:30.900 回答