为什么使用 document.write 不在浏览器上显示文本

Question

我有这段代码，一个是 js 文件，另一个是 html 文件，问题是当我运行代码时浏览器不显示函数中的文本 document.write (...)，有人可以帮助我吗？

function prose(name, campany){
    this.name= name;
    this.company = company;
    this.rate = rate; 
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script  type="text/javascript" src="main.js"></script>
    
</head>
<body>
    
    <script> 
        var y = new prose("JavaScript", "Packt Publishing");
        y.rate(50);
        document.write("The name of the book is " + y.name+ "<br>");
        document.write("The name of the publishing company is : " + y.company + "<br>");
        document.write("The cost of the book is $" + y.sellingPrice+ "<br>");
    </script> 
       
    <!--Ejemplo 5
    <a href="javascript:PacktPub()">Click Here</a> -->
</body>
</html>

Answer 1

此代码有效

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

  </head>

  <body>

    <script>
      function prose(name, company) {
        this.name = name,
          this.company = company,
          this.rate = 0
      }

      var y = new prose("JavaScript", "Packet Publishing");
      y.rate = 30;
      document.write("The name of the book is " + y.name + "<br>");
      document.write("The name of the publishing company is : " + y.company + "<br>");
      document.write("The cost of the book is $" + y.rate + "<br>");

    </script>

    <!--Ejemplo 5
    <a href="javascript:PacktPub()">Click Here</a> -->
  </body>

</html>

您有一些语法错误 (campany -> company, rate -> sellingPrice)。

Answer 2

你有几个错误。首先，您引用的是 company 并且它不存在，因为您写 campany.

更改为：

function prose(name, company)

其次，prose 是一个函数，而不是 class，因此它无法识别您正在调用的 new。要解决此问题，请删除 new 或将其更改为 class:

let prose = (() =>{

    function prose(name, company, rate) {
        this.name= name;
        this.company = company;
        this.rate = rate; 
    }

    return prose;

})();

并修正您设置费率的方式。

y.rate = 50;

Answer 3

这应该可以解释一切

<body>
  <script>
    // Defines an object prototype called prose
    function prose(name, company){
      // Any parameter names used inside the constructor must exist in its
      //  signature above
      this.name = name;
      this.company = company;
      // prose.rate is initially set to an empty string because no rate 
      //  argument is passed in 
      this.rate = "";
    }

    // Constructs a new object using the `prose` prototype. (Note that 
    //   JS now also has 'class' syntax available.)
    const y = new prose("JavaScript", "Packt Publishing"); 
       // It would be better to use a more descriptive identifier than `y`

    // Assigns a new value to the rate property of the new object.
    y.rate = 50;


    // We will not use `document.write()` because it replaces all 
    //  existing page content each time it is used
    // The paragraph element (and others) could be included in static 
    //  HTML instead of added dynamically using javascript as we do here

    // Defines nodes to add to the document
    const myParagraph = document.createElement("p");
    const nameText = document.createTextNode("The name of the book is: " + y.name);
    const companyText = document.createTextNode("The name of the publishing company is: " + y.company);
    //priceText includes a fallback string in case y.sellingPrice does not exist
    const priceText = document.createTextNode("The selling price of the book is: " + (y.sellingPrice || "(unknown)"));
    const rateText = document.createTextNode("The rate of the book is: " + y.rate);

    // This function can be called repeatedly to create & append a line break
    function appendLineBreakTo(parentElement){
      const lineBreak = document.createElement("br");
      parentElement.appendChild(lineBreak);
    }

    // Adds all the text nodes inside the newly created paragraph element
    myParagraph.appendChild(nameText);
    appendLineBreakTo(myParagraph); //Calls function to add <br/>

    myParagraph.appendChild(companyText);
    appendLineBreakTo(myParagraph);

    myParagraph.appendChild(priceText);
    appendLineBreakTo(myParagraph);

    myParagraph.appendChild(rateText);
    appendLineBreakTo(myParagraph);

    // Gets a reference to an HTML element that already exists in the DOM
    const body = document.querySelector("body");

    // Adds the paragraph element (with all of its new text nodes) to 
    //  the existing element
    body.appendChild(myParagraph);
  </script>
</body>

为什么使用 document.write 不在浏览器上显示文本

why using document.write doesn't show text on the browser

javascript

html

document.write