Как сохранить элемент определенного типа от сохранения в массиве? - PullRequest
Новая
       31

Как сохранить элемент определенного типа от сохранения в массиве?

1 голос
/ 04 мая 2019

У меня есть код, который имеет введенные пользователем числа, которые хранятся в массиве.Я хотел бы знать, как запретить пользователю вводить отрицательное число в массиве и показывать красным цветом (желательно красным текстом под вводом), что он не может ввести отрицательное число

Мне удалось получитьмассив, чтобы определить, какой тип целого числа помещается в массив с помощью оператора 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>

Ответы [ 3 ]

1 голос
/ 04 мая 2019

Вы можете взять числовое значение и проверить, задана ли строка, или это значение является целочисленным или отрицательным.Затем вам нужна функция для отображения нужного сообщения определенного цвета.

Это решение имеет преждевременный выход, часто выход парадигма , где функция принимает условие и выходит, если условие выполнено, чтобы предотвратить переход к естественномуконец функции с использованием цепной 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>
1 голос
/ 04 мая 2019

Или, очень просто <input type="number" id="user_input" min="0">

1 голос
/ 04 мая 2019

Проблема здесь в том, что вы нажимаете значение в массиве перед проверкой его типа. Вы просто должны сделать это так, чтобы отрицательные числа не попали внутрь массива: 



        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);
...