时间戳

首页 > 解决方案 > 使用 if 语句时无法正确显示警报

javascript - 使用 if 语句时无法正确显示警报

问题描述

在上周收到的帮助下，我能够获得此代码的不同版本。我正在学习，所以我决定这次使用 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，需要帮助来解决这个问题：)

显示的代码在没有警报语句的情况下工作。因此，用户在数组中输入具有“名称”属性的圆柱体类型。LD、RD、GD 等...如果有效，则对象（数组中）中的数据将显示在屏幕上。但是，如果看到无效条目，我希望弹出警报以显示“无效数据”或类似内容。如果在 for 循环内，弹出窗口将起作用，但在错误的时间或多次单击以清除它。如果我使用“中断”，则警报会覆盖整个 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'
  }
];

标签： javascript

解决方案

从逻辑上讲，在您的循环中，它总是会发出至少 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
}

推荐阅读