Question

我有一个网页，上面有两个文本框，一个按钮和一个段落。我想要发生的是，如果用户在textbox1中键入一个数字，然后在textbox2中键入另一个数字，并按下名为calculate的按钮。它会显示一个声明，说明该数字是否低于，高于或等于textbox1中的数字。这就是我所拥有的，但它不起作用。它不断返回。

<input type="text" id="textbox1" value="Enter a number" onfocus="javascript:this.value='';">
<input type="text" id="textbox2" value="Enter another number" onfocus="javascript:this.value='';">
<button onclick="calculate()">Calculate</button>
<p id="demo"></p>
<script>
 function calculate(){
 var x="";
 if (textbox1>textbox2){
  x="more than";
  }
 else if (textbox1=textbox2){
  x="Same";
  }
 else{
  x="Lower";
  }
 document.getElementById("demo").innerHTML=x;
 }
</script>

有谁知道为什么？谢谢

Answer 1

您应该像这样编辑代码：

<input type="text" id="textbox1" value="Enter a number" onfocus="javascript:this.value='';">
<input type="text" id="textbox2" value="Enter another number" onfocus="javascript:this.value='';">
<button onclick="calculate()">Calculate</button>
<p id="demo"></p>
<script>
 function calculate()
{
var textbox1 = parseFloat(document.getElementById('textbox1').value);
var textbox2 = parseFloat(document.getElementById('textbox2').value);
var x="";
if (textbox1>textbox2)
  {
  x="more than";
  }
else if (textbox1==textbox2)
  {
  x="Same";
  }
else
  {
  x="Lower";
  }
 document.getElementById("demo").innerHTML=x;
}
</script>

在原始脚本中，textbox1和textbox2未定义（函数不知道它们是什么）。

Answer 2

使用此：

function calculate() {
    var x = "";
    if (Number(textbox1.value) > Number(textbox2.value)) {
        x = "more than";
    } else if (Number(textbox1.value) == Number(textbox2.value)) {
        x = "Same";
    } else {
        x = "Lower";
    }
    document.getElementById("demo").innerHTML = x;
}

演示：http://jsfiddle.net/KDLvJ/1

Answer 3

您正在此处执行作业（=）：

else if (textbox1=textbox2)

应该是比较（==）：

else if (textbox1==textbox2)

它应该是textbox1.value和textbox1.value

<强> jsFiddle example

Answer 4

当你获得实际的DOM对象时，你忘记了.value，但是它们的值。所以只需修改

if (textbox1>textbox2)

到

if (textbox1.value>textbox2.value)

Answer 5

他们是字符串，所以你需要它们作为数字：

// retrieve the textboxes (inputs)
var tb1 = document.getElementById('textbox1'),
    tb2 = document.getElementById('textbox2');

// save the values as numeric
var tb1v = new Number(tb1.value),
    tb2v = new Number(tb2.value);

// eventual result
var x = '';

// Are they numbers? When you use `new Number` and the value isn't
// numeric, you can check the value using isNaN (is Not-a-Number)
if (isNaN(tb1v) || isNaN(tb2v)){
  x = 'Invalid number(s)';
} else{
  // now compare
  if (tb1v > tb2v){
    x = 'more than';
  } else if (tb2v > tb1v) {
    x = 'Lower';
  } else {
    x = 'Same';
  }
}

// output it to screen
document.getElementById('demo').innerHTML = x;

Working example

如果变量输入不同，则显示消息

5 个答案: