javascript - 为什么使用 document.write 不会在浏览器上显示文本
问题描述
我有这个代码一个是 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>
解决方案
这应该解释一切
<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>
推荐阅读
- android - 待定意图打开错误的活动
- python-3.x - 代码生成二维直方图,但结果与 hist2d 不匹配
- python - 如何使用 ThreadPoolExecutor 递归遍历目录?
- python - Python Snake 教程,尾巴/速度
- amazon-web-services - 如何从 AWS 控制台重命名 AWS RDS 参数组
- apache-kafka - 仅一次添加到 Kafka 主题
- c++ - 如何在屏幕上显示分数 C++ SDL
- javascript - Javascript混合内存地址?(重置数组不起作用)
- mysql - 使用环境变量执行 MySQL init 命令创建数据库
- python - 如何根据字符串中的两个字符“[”和“]”进行拆分