Как вывести на страницу typeof input?

Question

aelkov @aelkov

JavaScript

Как вывести на страницу typeof input?

Здравствуйте. Задача заключается в выводе на страницу в div типа данных (typeof), введенных пользователем в input. Задание звучит так: "Дан input i-12. По нажатию кнопки получите значение из input в переменную, а затем выведите в out-12 typeof полученной переменной."

Я пробовал двумя разными способами, у меня не получилось.
В HTML:

<label for="">Input your data:</label>
    <input class="i-12"></input>
    <button id="b-12">GO</button>
    <div class="out-12"></div>

В JS:
1.Первый способ (через if/else):

let i12 = document.querySelector('.i-12').typeof;
let b12 = document.querySelector('#b-12');
let div12 = document.querySelector('.out-12');

b12.onclick = function f12() {
       if (i12 = String) {
        div12.innerHTML = 'string';
    } else if (i12 = Number) {
        div12.innerHTML = 'number';
    } else {
        div12.innerHTML = 'none';
    }
}

2.Второй способ:

let i12 = document.querySelector('.i-12');
let b12 = document.querySelector('#b-12');
let div12 = document.querySelector('.out-12');
b12.onclick = function f12() {
    div12.innerHTML = typeof i12;
}

Помогите разобраться, пожалуйста:)

Вопрос задан более двух лет назад
233 просмотра

2 комментария

Подписаться 1 Простой 2 комментария

Решения вопроса 1

4 комментария

aelkov @aelkov Автор вопроса

Спасибо, что отозвались. Я видимо неверно сформулировал вопрос. Задание звучало так: "Дан input i-12. По нажатию кнопки получите значение из input в переменную, а затем выведите в out-12 typeof полученной переменной".
Я учел Вашу конструкцию и получил такой код JS:

let i12 = document.querySelector('.i-12');
let b12 = document.querySelector('#b-12');
let div12 = document.querySelector('.out-12');
const types = {                                    /* ключ :  ' что выводить'  -  отредактируйте сами*/
    'undefined': 'undefined',
    'object': 'object/oser',
    'boolean': 'bool',
    'number': 'number',
    'string': 'string',
    'symbol': 'symbol',
    'function': 'func',
}

b12.onclick = function f12() {
    let current_type = i12.value; // значение input
    if (typeof types[typeof current_type] !== "undefined") {   // если существует такой ключ в объекте, то
        div12.innerHTML = types[typeof i12] + '';               //  выводим в блоке  div12
    } else {                                                     //   иначе
        div12.innerHTML = '';                                 //  очищаем блок      div12   -  value = ""
    }
}

Однако, при вводе любых данных в input ( цифр, букв, символов) JS выдает в div object/oser. Если удалить строку 'object': 'object/oser', то выводит undefined. Если удалить строку 'undefined': 'undefined', то все равно будет undefined.

Написано более двух лет назад

Rst0 @Rst0

aelkov, все что можно ввести в такой input (там string по умолчанию как ни крути) должно определяться

<!DOCTYPE html>
<html>
    <head>
        <title>INPUT TYPEOF</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes">
    </head>
    <body>
        <label for="">Input your data:</label>
        <input class="i-12" value="" validate="false"/>
        <button id="b-12">GO</button>
        <div class="out-12" style="color: blue;text-transform: uppercase;"></div>
        <script>
            const i12 = document.querySelector('.i-12');
            const b12 = document.querySelector('#b-12');
            const div12 = document.querySelector('.out-12');
            const types = {
                'undefined': 'undefined',
                'number': 'number',
                'string': 'string',
                'float': 'float',
            }

            function check(val) {
                if (Object.prototype.toString.call(val) == '[object Array]') {
                    return 'array';
                } else if ((val ^ 0) == val && val != '') {
                    if (Number.isInteger(Number(val))) {
                        return 'number';
                    }
                } else if (Array.isArray(val.split('.'))) {
                    var sp = val.split('.');
                    if (sp.length == 2 && val.replace(/[^\d\.-]/g, '').length === val.length) {
                        return 'float';
                    }
                }
                return (val === '') ? '' : 'string';
            }
            document.addEventListener('keydown', (event)=>{
                // клавиша enter
                if (event.code == 'Enter') {
                    let enter = new Event("click");
                    b12.dispatchEvent(enter);
                }
            }
            );
            b12.onclick = function f12() {

                let current_type = i12.value;

                if (typeof types[check(current_type)] !== "undefined") {
                    div12.innerHTML = types[check(current_type)] + '';
                } else {
                    div12.innerHTML = '';
                }
            }
        </script>
    </body>
</html>

Написано более двух лет назад

aelkov @aelkov Автор вопроса

Rst0, ЗАРАБОТАЛО. СПАСИБО!!!!!! я два дня бился

Написано более двух лет назад
Rst0 @Rst0

незафто)

Написано более двух лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Как ограничить доступ определенному пользователю в своем телеграмм боте?
- 1 подписчик
- 9 часов назад
- 54 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как сделать ширину блока по ширине контента?
- 1 подписчик
- 15 часов назад
- 60 просмотров
1

ответ
JavaScript

Простой
Как найти и сгруппировать элементы с одинаковым классом?
- 1 подписчик
- вчера
- 81 просмотр
1

ответ
JavaScript

+2 ещё

Средний
Как скроллить определенный блок Div?
- 1 подписчик
- 27 дек.
- 137 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как написать текст на окружности и посчитать точки?
- 1 подписчик
- 26 дек.
- 97 просмотров
0

ответов
JavaScript

Средний
Как остановить весь скрипт js при выполнении условия tampermonkey?
- 1 подписчик
- 26 дек.
- 82 просмотра
2

ответа
JavaScript

Средний
.stopPropagation() на самом деле не останавливает распространение события?
- 1 подписчик
- 26 дек.
- 124 просмотра
1

ответ
JavaScript

Простой
Нужно ли проверять импорт модуля js на повторную загрузку?
- 1 подписчик
- 26 дек.
- 60 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему у меня не может найти URL_TO_BOT?
- 1 подписчик
- 25 дек.
- 57 просмотров
0

ответов
JavaScript

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 25 дек.
- 64 просмотра
2

ответа
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

Разработка бекенда на NestJS

29 дек. 2024, в 10:50

50000 руб./за проект

Адаптировать индикатор написанный на Pine к терминалу TigerTrade

29 дек. 2024, в 09:49

5000 руб./за проект

Подружить простую Hmi Droid панель с прогой плк

29 дек. 2024, в 09:44

5500 руб./за проект

тип данных из инпута зависит от типа инпута.
htmlbook.ru/html/input/type
Это понятно. Задача заключается в том, чтобы вывести тип импута независимо от того, что указано в HTML. type вообще может быть не заполнен в HTML. Например, если пользователь ввел цифры, выводится number. Если буквы, то string. Если символы, то object. И т.д.
Type в input в html нужен для валидации кода. JS по сути наплевать, что там указано.

Answer 1 · 2022-02-17 21:57:02

const types = {                                    /* ключ :  ' что выводить'  -  отредактируйте сами*/
    'undefined': 'undefined',
    'object':   'object/oser',
    'boolean':   'bool',
    'number':    'number',
    'string':    'string',
    'symbol':    'symbol',
    'function':  'func',
}
let current_type = i12.value;                                            // значение input
if (typeof types[typeof current_type] !== "undefined") {    // если существует такой ключ в объекте, то
     div12.innerHTML = types[typeof i12]+'';                     //  выводим в блоке  div12
}else{                                                                                //   иначе
     div12.innerHTML = '';                                                   //  очищаем блок      div12   -  value = ""
}

Как вывести на страницу typeof input?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт