Question

我正在制作一个页面，用户可以回答有关他们销售的产品的问题（使用单选按钮）。当他们点击页面底部的按钮时，会弹出价格报价。我写了一个javascript函数，当用户点击按钮时执行。它计算价格并使用document.write显示它，但每当用户点击按钮时，它会打开一个新页面并显示我告诉它的内容。

function getQuote(){
    document.write("Your Quote Is: $", price, ".00");
}

这是按钮的代码：

<button type="button" onclick='getQuote()'>Display Quote</button>

但是当我按下按钮时，会出现一个新页面，它只显示我在document.write短语中添加的格式的引用。

我尝试使用.innerHTML将document.write发送到页面的其他部分，但同样的问题仍然存在。

我该怎样做才能确保报价显示在页面上，我想要的位置？

Answer 1

document.write存在没有问题，它正在按照预期执行的操作：

使用新内容覆盖页面。

如果您不想要这样做，那么您必须给它一些上下文来写信。

例如：

function getQuote(){
    var textArea = document.getElementById('textArea');
    textArea.innerHTML = "Your Quote Is: $", price, ".00";
}

将您的文本放入带有id="textArea"

的DOM元素中

Answer 2

您应该引用该元素，并设置其内容，而不是使用document.write。

<button type="button" onclick='getQuote.call(this)'>Display Quote</button>

function getQuote(){
     this.firstChild.data = "Your Quote Is: $" + price + ".00";
}

如果要写入其他元素，则应选择该元素，并可能使用相同的技术。

Answer 3

文档完整呈现并关闭后，使用document.write()将清除当前文档并开始新文档，删除所有以前的内容。

将内容放入现有文档中需要使用DOM操作函数，而不是document.write()。如果，您要做的是更改按钮的文本，您可以这样做（假设price是一个包含价格的全局变量）：

<button type="button" onclick='getQuote(this)'>Display Quote</button>

function getQuote(obj) {
    obj.innerHTML = "Your Quote Is: $" + price + ".00";
}

如果你想把价格放在页面上的其他对象上，那么你给这个对象一个id，然后你可以得到那个对象并将价格设置成如下：

<button type="button" onclick='getQuote()'>Display Quote</button>
<div id="quotedPrice"></div>

function getQuote() {        
    document.getElementById("quotedPrice").innerHTML = "Your Quote Is: $" + price + ".00";    
}

您可以在此处查看这些工作的论坛：http://jsfiddle.net/jfriend00/ED5V9/

Document.write问题

3 个答案: