使用if语句时无法获得警报以正确显示

时间:2019-02-02 23:29:19

标签: javascript

在上周在这里获得的帮助下,我能够获得此代码的不同版本。我正在学习,所以我决定使用一次for循环来重构它,以遍历整个数组。在我添加“ else”以警告用户他们输入了错误的数据之前,它本身似乎还不错。

我看到在for循环中,它以迭代的次数循环,但是无论我在哪里放置警报,它似乎都覆盖了所有内容。无论输入什么内容,它都会首先弹出,然后必须单击5次才能在数组中显示数据。 我愿意接受其他方法,而不是仅设置使用警报。

我尝试编写这样的函数,以便可以将调用移至测试位置:

    function inValidAlert(){
     let cylFindInvalid = 
     document.getElementById("cylEnter").value.toUpperCase();
     if(cylFindInvalid != cylArray.name){
        let displayIt = document.getElementById("displayCyl");
        displayIt.innerHTML = displayIt.innerHTML + "Enter a valid 
        cylinder type";
      }
    }

我将invalidAlert()放置在listCylinders函数内部,函数外部等等...这给了我与编写警报相同的结果,但是无论如何都给了我一些练习...

对于某些人来说,这似乎毫无道理,但是我正在学习Javascript,需要帮助来弄清楚这一点:)

显示的代码无需警报语句即可工作。因此,用户在数组中输入其'name'属性为1的圆柱体类型。 LD,RD,GD等... 如果有效,则对象(数组中)中的数据显示在屏幕上。 但是,如果看到无效条目,我希望弹出警报显示“无效数据”或类似内容。弹出窗口将起作用,但是在错误的时间,或者如果在for循环内,则单击多次以清除弹出窗口。如果我使用“ break”,则警报将覆盖整个if语句,并且无论输入什么内容都会触发。

那么我将如何正确触发警报?也许for循环是错误的整体方法?让我知道是否也需要发布HTML。我是新手,正在尝试在这里学习绳索,请放轻松。

function listCylinders() {
  let display = document.getElementById("displayCyl");
  for (var i = 0; i < cylArray.length; i++) {
    let cylCompare = document.getElementById("cylEnter").value.toUpperCase();
    if (cylCompare == cylArray[i].name) {
      display.innerHTML = display.innerHTML + cylArray[i].name + ":" + "<br>" + cylArray[i].brand +
        "<br>" + cylArray[i].cylinder + "<br>" + cylArray[i].pins + "<br>" + cylArray[i].type;
    } else {
      alert("Enter a valid cylinder type");
    }
  }
}
//function used to disable the button after it is used once.
const setbutton = document.getElementById('button1');
setbutton.addEventListener('click', disableButton);

function disableButton() { 
  setbutton.disabled = true;
}
//function that will clear the form as well as the display when clicked.

function clearCyl() {
  var cylDisplay = document.getElementById("displayCyl");
  document.getElementById("cylForm").reset();
  cylDisplay.innerHTML = "";
  setbutton.disabled = false;
}
//cylinder type properties shown as individual objects inside of an array.
var cylArray = [{
    name: 'LD',
    brand: 'Schlage, Falcon',
    cylinder: ' Without cylinder',
    pins: ' 6 Pin',
    type: ' KIL'
  },
  {
    name: 'RD',
    brand: 'Schlage-Everest 29 S123 (Standard)',
    cylinder: ' With cylinder',
    pins: ' 6 Pin',
    type: ' FSIC'
  },
  {
    name: 'PD',
    brand: 'Schlage-Everest 29 S123 (Standard)',
    cylinder: ' With cylinder',
    pins: ' 6 Pin',
    type: ' KIL'
  },
  {
    name: 'JD',
    brand: 'Schlage',
    cylinder: ' Without cylinder',
    pins: ' 6 Pin',
    type: ' FSIC'
  },
  {
    name: 'GD',
    brand: 'Schlage-Everest 29 R Family keyways',
    cylinder: ' With cylinder',
    pins: ' 7 Pin',
    type: ' SFIC'
  }
];

1 个答案:

答案 0 :(得分:1)

从逻辑上讲,它将始终发出至少5次警报。这是因为cylCompare永远不会更改,因此它永远不会等于循环数组中的其他5个.name属性。因此cylCompare == cylArray[i].name只能在您的六个迭代之一中为真。因此,警报连续显示5次。

相反,您想要做的是,如果用户输入与数组中的单个项目不匹配,那么您将要说这是无效的。您可以先假设它无效,然后再找到匹配项,将其更改为有效:

function listCylinders() {
  let display = document.getElementById("displayCyl");
  let valid = false; // We assume this isn't valid
  // You can move this outside of the loop, and trim in case the user entered spaces
  let cylCompare = document.getElementById("cylEnter").value.toUpperCase().trim();
  for (var i = 0; i < cylArray.length; i++) {
    if (cylCompare == cylArray[i].name) {
      valid = true; // We find a match in one of our array items, so it's valid
      display.innerHTML = display.innerHTML + cylArray[i].name + ":" + "<br>" + cylArray[i].brand +
        "<br>" + cylArray[i].cylinder + "<br>" + cylArray[i].pins + "<br>" + cylArray[i].type;
    }
  }
  if(!valid) alert("Enter a valid cylinder type"); // If we never found a match then we alert
}