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

这里的问题是，您要在检查类型之前将其推入数组中。您只需要这样做就可以防止负数进入数组：



        const myArray = [];


        const addData = () => {
            let inputData = document.getElementById('user_input');
            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")
                myArray.push(parseInt(inputData.value));
            }

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

Answer 2

您可以获取数值并检查是否给出了字符串，或者该值是整数值还是负数。然后，您需要使用某种颜色显示所需消息的功能。

此解决方案具有exit early, exit often paradigm，该函数接受条件并在满足条件时退出，以防止通过使用链接的else ... if ... else结构到达函数的自然末端。 / p>

简而言之，这种方法不需要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>

Answer 3

或者，非常简单地<input type="number" id="user_input" min="0">

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

3 个答案: