【问题标题】:Issue in adding dropdown list for feets and inches and calculation?在添加英尺和英寸的下拉列表和计算时出现问题?
【发布时间】:2015-08-26 18:23:55
【问题描述】:

我为 BMR 计算器创建了一个代码,它可以在不添加下拉列表的情况下工作,但是当我为英尺和英寸以及其他表格(如 kg、cm 块)添加下拉列表时,单击计算按钮它不起作用。

请任何人帮助我。

我的代码:

   <!DOCTYPE html><html><head><meta http-equiv="content-type"  content="text/html;charset=utf-8"/><link rel="stylesheet" type="text/css"  href="easyui.css"><link rel="stylesheet" type="text/css" href="demo.css">   <script type="text/javascript" src="jquery.min.js"></script><script  type="text/javascript" src="jquery.easyui.min.js"></script><style   type="text/css">
 .panel-body {
   background-color: #ffffff;
   color: #000000;
  font-size: 17px;
   }
  .tabs-title {
   font-size: 15px;
  }
   </style>

 <div class="easyui-tabs" style="width:450px;height:250px">
   <div id="rechner" style="box-shadow: 2px 2px 5px 2px #444444; padding:15px; margin:10px; width:310px; border-radius:15px; font-family: Verdana,Arial,'sans-serif'; font-size: 11px;">
<p style="margin-top:0;padding-top:0;text-align:center;font-size:12px;font-weight:bold">Calculate your BMR in US metrics</p>
    <table>
        <tr><td>Gender:</td><td>

        <input type="radio" name="sex1" value="male" checked>Male<input type="radio" name="sex1" value="female">Female</td></tr>
        <tr><td>Age:</td><td>
        <input type="text" size="5" name="age1" id="age1" value="0" onBlur=checkPositiveInteger(this) onChange=checkPositiveInteger(this)></td></tr>
        <tr><td>Height:</td><td><input type="text" size="5" name="height1" id="height1" value="0" onBlur=checkNotNegative(this) onChange=checkNotNegative(this)> feet <input type="text" size="5" id="height2" value="0"  onBlur=checkNotNegative(this) onChange=checkNotNegative(this)> inches</td></tr>
        <tr><td>Weight:</td><td><input type="text" size="5" name="weight1" id="weight1" value="0" onBlur=checkPositive(this) onChange=checkPositive(this)> pounds</td></tr>
        <tr><td colspan="2"><a href="#" class="easyui-linkbutton"  onclick="calculate1()"><button type="button">Calculate</button></a></td></tr>
        <tr><td>Your BMR:</td><td><input type="text" size="10" id="bmr1"> calories/day</td></tr>
    </table>
</div>
<div id="rechner" style="box-shadow: 2px 2px 5px 2px #444444; padding:15px; margin:10px;width:310px;border-radius:15px; font-family:Verdana,Arial,'sans-serif';font-size:11px;background: url(http://www.bmi-rechner.net/images/box_bg.png);">
    <p style="margin-top:0;padding-top:0;text-align:center;font-size:12px;font-weight:bold">Calculate your BMR in EU metrics</p>
    <table>
        <tr><td>Gender:</td><td><input type="radio" name="sex" value="male" checked>Male<input type="radio" name="sex" value="female">Female</td></tr>
        <tr><td>Age:</td><td><input type="text" size="5" name="age" id="age" value="0" onBlur=checkPositiveInteger(this) onChange=checkPositiveInteger(this)></td></tr>
        <tr><td>Height:</td><td><input type="text" size="5" name="height" id="height" value="0" onBlur=checkPositive(this) onChange=checkPositive(this)> centimeters</td></tr>
        <tr><td>Weight:</td><td><input type="text" size="5" name="weight" id="weight" value="0" onBlur=checkPositive(this) onChange=checkPositive(this)> kilograms</td></tr>
        <tr><td colspan="2"><a href="#" class="easyui-linkbutton" onclick="calculate()"><button type="button">Calculate</button></a></td></tr>
        <tr><td>Your BMR:</td><td><input type="text" size="10" id="bmr"> calories/day</td></tr>
    </table>
</div>
  </div>
  <script>

 function calculate(){

 var age=document.getElementById("age").value;
var height=document.getElementById("height").value;
var weight=document.getElementById("weight").value;

var sex;
var x=document.getElementsByName("sex");
for(var i=0;i<x.length;i++){
    if(x[i].checked==true){
        sex=x[i].value;
        break;
    }
}
var bmr;
if(sex=="female"){
    //bmr=655+(9.6*weight)+(1.7*height)-(4.7*age);
    bmr=10*weight+6.25*height-5*age-161;
    document.getElementById("bmr").value=round(bmr);
}else if(sex=="male"){
    //bmr=66+(13.7*weight)+(5.0*height)-(6.8*age);
    bmr=10*weight+6.25*height-5*age+5;
    document.getElementById("bmr").value=round(bmr);
}else{
    alert("You must select a sex.");
}
}
 function checkPositive(field){
var number=field.value;
if(isNaN(number)||number.length==0){
    alert("This field must be a number.");
    field.focus();
}else if(number<=0){
    alert("This number must be positive.");
    field.focus();
}else{
 }
 }
function checkPositiveInteger(field){
var number=field.value;
var number1=Math.floor(number);
if(isNaN(number)||number.length==0){
    alert("This field must be a number.");
    field.focus();
}else if(number<=0){
    alert("This number must be positive.");
    field.focus();
}else if(number-number1!=0){
    alert("This number must be a Integer.");
    field.focus();
}else{
}
}
function checkNotNegative(field){
var number=field.value;
if(isNaN(number)||number.length==0){
    alert("This field must be a number.");
    field.focus();
}else if(number<0){
    alert("This number must be positive or 0.");
    field.focus();
}else{
 }
 }
 function calculate1(){
var age=document.getElementById("age1").value;
var feet=document.getElementById("height1").value;
var inches=document.getElementById("height2").value;
var weight=document.getElementById("weight1").value;
weight=weight*0.4535924;
var height=30.48*feet+inches*2.54;
var sex;
var x=document.getElementsByName("sex1");
for(var i=0;i<x.length;i++){
    if(x[i].checked==true){
        sex=x[i].value;
        break;
    }
}
var bmr;
if(sex=="female"){
    //bmr=655+(9.6*weight)+(1.7*height)-(4.7*age);
    bmr=10*weight+6.25*height-5*age-161;
    document.getElementById("bmr1").value=round(bmr);
}else if(sex=="male"){
    //bmr=66+(13.7*weight)+(5.0*height)-(6.8*age);
    bmr=10*weight+6.25*height-5*age+5;
    document.getElementById("bmr1").value=round(bmr);
  }else{
    alert("You must select a sex.");
  }
     }
   function round(x){
return Math.round(x*1000)/1000;
     }
      </script></div></body></html>

我需要如下图所示的下拉菜单

【问题讨论】:

  • 我不知道我是否得到你要找的东西,这个 Plunker 对我来说工作得很好plnkr.co/edit/XVOmR6OqI3BG96MsC6ht
  • 我附上了图片。请以这种方式检查我需要的内容。
  • 很难帮助你,因为你有一个工作的例子,如果你发布不工作的东西会更好。但是你有没有看到你是否在“身高”和“体重”的不同字段中输入了相同的名称?发布带有错误的小提琴
  • 就像我得到的小提琴一样。请检查所附图像的高度,它有一个上下键,我尝试过这种方式,但它不起作用。请建议我。

标签: javascript html


【解决方案1】:

好的,试试这个:

<tr><td>Height:</td><td><input type="number" size="5" name="height" id="height" value="0" onBlur=checkPositive(this) onChange=checkPositive(this)> centimeters</td></tr>
<tr><td>Weight:</td><td><input type="number" size="5" name="weight" id="weight" value="0" onBlur=checkPositive(this) onChange=checkPositive(this)> kilograms</td></tr>

对我来说,这很奏效。

如果还有更多问题,我可以将mod保存在小提琴中。
更新
我已经在小提琴中分叉了 mod。

更新
我不知道为什么,但我不能再保存小提琴了,所以我在这里写下如果其他情况你必须做什么

if(number!=""||isNaN(number)||number.length==0){
    alert("This field must be a number.");
    field.focus();
}else if(number<=0){
    alert("This number must be positive.");
    field.focus();
}else{

你必须数数!=""。
更新
要取消 onchange 或 onblur 函数,您可以使用单击按钮“计算”并调用相同的函数,将相同的变量传递给它。
更新

function checkPositive(field){
    if (field.value=="")
        return;

用你所有的方法写这个。
我已经尝试再次 fork 小提琴,试试它是否已经接受了 mods。http://plnkr.co/edit/YS1KQ5BIILXhHdcaVE6G?p=preview


更新

http://plnkr.co/edit/cVK9V88YafVgD4jbqwHd?p=preview


这是防止负数的问题,但我认为这个问题现在已经完全回答了:)


更新
http://plnkr.co/edit/L4w29rrFMMtCmWaQWKTw?p=preview
必须这样做才能使数字不低于 0。

【讨论】:

  • 您是否检查过它已经存在于代码中的代码。如果您看到图像,您可以正确理解我的要求。我希望您能像我需要的图像那样理解我的问题。
  • 看着你的代码和你的小提琴,你写了 "input type="text" " 但你需要数字,还是我错了?
  • 好的。如果我删除代码中的 value="25" 会显示警报,并且删除后我删除了 onchange 代码不起作用。你能帮帮我吗]
  • fork fiddle 这样我就可以看到了:)
  • 我不想在脚本和html代码中添加onchange。你可以在这里看到我的代码:plnkr.co/edit/uWBLVdexYAont9Utw5i6?p=preview
猜你喜欢
  • 2014-04-30
  • 1970-01-01
  • 1970-01-01
  • 2011-01-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多