在不删除当前页面内容的情况下使用onClick两次

Question

我在这方面绝对是个初学者。这门课是我获得商科学位的必修课。所以，如果这个问题听起来很愚蠢，我很抱歉。

我基本上需要做一个简单的体重指数计算器网页。

网页的顶部有BMI计算器，下面有一个名为calculate bmi的按钮，提示用户输入身高和体重。然后，它显示结果以及用户输入的高度和白色。

问题是，当它显示结果时，它会擦除顶部的BMI写入。

我知道这是一个简单的答案，但我不知道它是什么。

下面是我一直在使用的代码- http://pastebin.com/ftrWYU6L

Answer 1

请参阅W3C WSC (特别是关于遍历DOM和修改HTML的部分)。

如果你想使用DOM来修改已有的文档，那么document.write会把所有已有的文档都清除掉。

Answer 2

不使用结果，而是创建一个document.write，给它一个类似"results“的ID，然后在JavaScript上，你将使用document.getElementById("results").innerHTML =一个包含你要写到屏幕上的内容的字符串；

这里有一个快速、肮脏且未经测试的修复方法：http://pastebin.com/2NLrMUFh

Answer 3

您正在重写按钮中的整个网页。相反，这通常是通过网页中内置的3个文本框(html中的输入标签)和一个按钮来完成的。该按钮将从身高和体重输入框中获取.value，并将结果存储到BMI.value字段中。

在伪代码中，

button_click()
{
  float height = heightTextBox.value;
  float weight = weightTextBox.value;
  float BMI = BMImojo(height, weight);  // yours to write
  BMITextBox.value = BMI;
}

网页不会重建，只有一个输出显示会发生变化