简体   繁体   English

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

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

I have this code one is a js file, the other is html file, the problem is when i run the code the browser doesnt show the text in functions document.write(...), someone can help me? 我有这段代码,一个是js文件,另一个是html文件,问题是当我运行代码时,浏览器没有在function 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> 

This code works 此代码有效

<!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>

You had some syntax errors (campany -> company, rate -> sellingPrice). 您有一些语法错误(campany-> company,rate-> sellingPrice)。

You have several mistakes. 你有几个错误。 First of all, you are referencing company and it does not exist as you wrote campany . 首先,您正在引用company ,并且在编写campany不存在。

Change to: 改成:

function prose(name, company)

Second, prose is a function, not a class, so it does not recognize the new you are invoking. 其次, prose是一个函数,而不是一个类,因此它不能识别您正在调用的new东西。 To fix that, either remove the new or change it to be a class: 要解决此问题,请删除new或将其更改为类:

let prose = (() =>{

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

    return prose;

})();

And also fix the way you are setting the rate. 并修复您设置费率的方式。

y.rate = 50;

This should explain everything 这应该解释一切

<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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM