我的if语句给了我错误的输出

时间:2017-11-25 22:07:17

标签: javascript if-statement parameters boolean

window.onload = start;


function start() {

  document.getElementById("kalk").onclick = find;
  find(1, 9999);
}

function find(min, max) {
  var factor = document.getElementById("tall").value;
  var factor2 = document.getElementById("tall2").value;

  var x = factor * factor2;

  document.getElementById("utskrift").innerHTML = x;

  if (x >= min && x <= max) {
    document.getElementById("msg").innerHTML = "Number is in interval."
  } else {
    document.getElementById("msg").innerHTML = "Number is not in interval."
  }
}
<h2>Gang to tall</h2>

T1 <input type="number" id="tall" /> T2 <input type="number" id="tall2" />

<button id="kalk">Finn tall i intervall</button> Sum: <span id="utskrift"></span>

<p id="msg"></p>

所以通过阅读这段代码..我想要做的是有两个输入,其中我乘以其中输入的数字。在我的“Find()”参数中,我有两个参数说明数字应该在1-9999之间。在我的“函数查找”中,我将这些参数称为min和max。进一步向下的代码我询问输出是否在这些数字之间是在最小值和最大值之间给出“数量在间隔中”。问题是当我甚至在这些参数中的数字时,我得到了我的其他声明。反正有没有解决这个问题或在参数中输入感觉?

由于

2 个答案:

答案 0 :(得分:1)

您正在将函数find直接附加到click事件侦听器。该函数需要两个参数minmax

function find(min, max)

但是当发生点击时,它会收到一个事件监听器,它只是一个参数,它是一个事件对象。因此min将成为一个事件对象,而max将为undefined,而您的if语句将无效。您可以通过将min内的maxfind记录到控制台来查看此信息。

将函数find调用另一个函数并将后者作为事件监听器附加:

document.getElementById("kalk").onclick = function(event) { // the event listener function recieves the event object as the only parameter (not that argument event here is not necessary, I just added it for explanation)
   find(1, 90000);                                          // when this function get executed (when a click happens) then call find with proper parameters
}

答案 1 :(得分:1)

嗯,首先你必须记住HTML中的“T”代表“文本”。 HTML ...字符串中只有一种数据类型。当您从HTML获取值并希望将其用作JavaScript中的数字时,您必须将其转换为数字。

接下来,您实际上没有正确组织您的功能。 find不应该只在页面加载后立即运行。您希望在单击按钮时运行它。这样,minmax值会在您需要时传递。

最后,当您实际计算产品时,HTML静态地说“Sum”。

请参阅评论中的其他最佳实践项目。

<html>

<head>

</head>

<body>
  <h2>Gang to tall</h2>

T1 <input type="number" id="tall"/>
T2 <input type="number" id="tall2"/>

<button id="kalk">Finn tall i intervall</button>

Product: <span id="utskrift"></span>

<p id="msg"></p>

<!-- It's a good idea to place your scripts just before the closing
     body tag. That way, the HTML has been loaded by the time the
     JavaScript runs. -->
<script>
  document.getElementById("kalk").onclick = result;
  
  // Get your DOM references just once so you don't have to re-scan the DOM
  // for them every time the button is clicked. 
  
  // Also, just reference the elements themselves, not properties (.value) of
  // the element because if you just reference the property and later decide 
  // you need some other property, you'll have to re-scan the DOM for the same
  // element again. This way, you maintain a reference to the element and can
  // get any property you need at any time.
  var factor = document.getElementById("tall");
  var factor2 = document.getElementById("tall2");  
  var product = document.getElementById("utskrift");
  var msg = document.getElementById("msg");

  function find(min,max){
    // All values coming from HTML are strings. You should always 
    // explicitly convert them to numbers when numbers are expected.
    var x = parseInt(factor.value, 10) * parseInt(factor2.value,10);

    // .innerHTML is for when you are assigning a string that contains HTML.
    // It tells the HTML parser to parse the string for HTML. If you are not
    // including HTML, use .textContent, which doesn't do this extra parsing.
    product.textContent = x;
    if (x >= min && x <= max) {
      msg.textContent = "Number is in interval."
    } else {
      msg.textContent = "Number is not in interval."
    }
}

function result(){
  find(1, 9999);
}

</script>
</body>
</html>