- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 JS 的新手,我正在尝试进行简单的体重计算。它需要用户的高度和体重进行计算并将其显示在屏幕上。我已经做到了。现在我的问题是我想在“清除信息”按钮下将结果显示为文本。我想使用 DOM 来做到这一点。
请帮忙!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 4 Starter File</title>
<style>
h1 {text-align: center;}
#calculator
{
width: 600px;
margin: 0px auto;
border: 2px solid #000;
padding: 20px;
}
#values
{
width: 600px;
margin: 50px auto;
pading: 20px;
}
ul {margin-top: 5px;}
</style>
<script>
// code to be called when button is clicked goes here
function calculateResult() {
// this gets the weight
var weight = document.getElementById("weight").value;
//this gets the height
var height = document.getElementById("height").value;
// this calcualtes thet total with a
var calculate = (weight / Math.pow(height,2)) * 703;
//rounds to the 2
var New = calculate.toFixed(2);
New = parseInt(New);
alert(New);
// alert(" your weight is" + weight);
if(calculate <=18){
("your BMI IS: " + calculate );
// alert("your less then 18");
}
}
window.onload = function() {
// reference the button to be clicked
var btnCalculate = document.getElementById("calculate");
// calls the function when the button is clicked
btnCalculate.onclick = calculateResult;
}
</script>
</head>
<body>
<header>
<h1>Body Mass Index (BMI) Calculator</h1>
</header>
<section id="calculator">
<p>
To determine if you're at a healthy weight, enter the following information
and calculate your body mass index (BMI). <span>Enter numbers only please</span>
</p>
<form>
<label for="weight" >Weight (lbs):</label>
<br>
<input type="text" id="weight">
<br>
<br>
<label for="height" >Height (inches):</label>
<br>
<input type="text" id="height">
<br>
<br>
<input type="button" id="calculate" value="Click to Calculate Your BMI"> <br>
<br>
<input type="reset" value="Clear the Information">
<p style="color: red">The total is <span id= "total"> </span></p></p>
</section>
<section id="values">
BMI values are as follows:
<ul>
<li>Below 18: Underweight</li>
<li>Between 18 and 24.9 : Normal</li>
<li>Between 25 and 29.9 : Overweight</li>
<li>Over 30 : Obese</li>
</ul>
</p>
</section>
<script type="text/javascript">
</script>
</body>
</html>
最佳答案
为了实现这一点,您可以使用 innerHTML 属性。这将返回或设置元素的 HTML 内容。
所以我要做的是将 alert(New);
切换为 document.getElementById("total").innerHTML = New;
在你的 计算结果()
函数。
这会将 id == "total"的 span 元素的 HTML 内容更改为变量 "New"的值。
所以它看起来像这样。
function calculateResult() {
// this gets the weight
var weight = document.getElementById("weight").value;
//this gets the height
var height = document.getElementById("height").value;
// this calcualtes thet total with a
var calculate = (weight / Math.pow(height,2)) * 703;
//rounds to the 2
var New = calculate.toFixed(2);
New = parseInt(New);
document.getElementById("total").innerHTML = New;
关于javascript - 如何写一个不死边界的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28685492/
我有类似下面的代码: ... id: myComponent signal updateState() property variant modelList: [] Repeater { mo
我正在处理一些我无法展示的私有(private)代码,但我已经制作了一些示例代码来描述我的问题: 主.c: #include #include #include #include typede
这个问题在这里已经有了答案: 关闭10 年前。 Possible Duplicate: what are the differences in die() and exit() in PHP? 我想
在编写 Perl 模块时,在模块内部使用 croak/die 是一个好习惯吗? 毕竟,如果调用者不使用 eval block ,模块可能会使调用它的程序崩溃。 在这些情况下,最佳做法是什么? 最佳答案
我有一些搜索线程正在存储结果。我知道当线程启动时,JVM native 代码会代理在操作系统上创建新 native 线程的请求。这需要 JVM 之外的一些内存。当线程终止并且我保留对它的引用并将其用作
我刚刚花了很多时间调试一个我追溯到 wantarray() 的问题。 .我已将其提炼为这个测试用例。 (忽略 $! 在这种情况下不会有任何有用信息的事实)。我想知道为什么wantarray在第二个示例
我看到一些代码是这样做的: if(something){ echo 'exit from program'; die; } ...more code 和其他只使用 die 的人: if
我正在尝试将此表格用于: 如果任何 $_POST 变量等于任何其他 $_POST 变量抛出错误。 如果只有几个,那不是问题,但我有大约 20 个左右所以如果我想这样做,我将不得不像这样 但这
每次我运行: hadoop dfsadmin -report 我得到以下输出: Configured Capacity: 0 (0 KB) Present Capacity: 0 (0 KB) DFS
我是一名优秀的程序员,十分优秀!