javascript - 如何防止特定类型的元素存储在数组中？

Question

我的代码包含一个存储在数组中的用户输入数字。我想知道如何防止用户在数组中输入负数并以红色显示(最好是输入下方的红色文本)他们不能输入负数

我能够使用 if...else 语句让数组识别放入数组的整数类型，但我似乎无法让数组弹出负数。

<input type="number" id="user_input">
<button type="button" id="myBtn">Click to store</button>

<script>
  const myArray = [];

  const addData = () => {
    let inputData = document.getElementById('user_input');
    myArray.push(parseInt(inputData.value));
    console.log(myArray);

    if (inputData.value <= 0) {
      console.log("negative int")
    } else if (inputData.value == 0) {
      console.log('nothing entered')
    } else {
      console.log("positive int")
    }

    inputData.value = "";
  }
  document.getElementById('myBtn').addEventListener('click', addData);
</script>

Answer 1

您可以获取数值并检查字符串是否已给定，或者该值是否为整数值或负数。然后你需要用某种颜色显示想要的消息的功能。

此解决方案具有一个 exit early, exit often paradigm ，其中函数采用条件并在满足条件时退出，以防止通过使用链式 else ... if ... else 结构转到函数的自然结束。

简而言之，这种方法无需 else 部分即可工作，这在这里是可能的。

const
    myArray = [],
    addData = () => {
        const setMessage = (string, color = '#000000') => {
            message.style.color = color;
            message.innerHTML = string;
        }
 
        let inputData = document.getElementById('user_input'),
            message = document.getElementById('message'),
            value = +inputData.value;
  
        if (inputData.value === '') {
            setMessage('nothing entered', '#bb0000');
            return;
        }
        inputData.value = "";
        if (value !== Math.floor(value)) {
            setMessage('no int', '#bb0000');
            return;
        }
        if (value <= 0) {
            setMessage('negative int', '#bb0000');
            return;
        }
        myArray.push(value);
        console.log(myArray);
        setMessage('positive int');
}

document.getElementById('myBtn').addEventListener('click', addData);

<input type="number" id="user_input">
<button type="button" id="myBtn">Click to store</button>
<p id="message"></p>