Как вывести на страницу 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;
}

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

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

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

Средний
Почему не срабатывает горячая клавиша в расширение?
- 1 подписчик
- 44 минуты назад
- 13 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему react-hook-form не отображает ошибки zod в определенных моментах?
- 1 подписчик
- 2 часа назад
- 20 просмотров
0

ответов
JavaScript

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

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 160 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 81 просмотр
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- 20 нояб.
- 50 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 20 нояб.
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 20 нояб.
- 48 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Cypress «syntax error, unrecognized expression». Что за ошибка и как решить?
- 1 подписчик
- 19 нояб.
- 38 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

На сайте на modx сделать три задачи

22 нояб. 2024, в 13:15

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

Убрать ошибку settings.php при входе в админку Битрикс 1с

22 нояб. 2024, в 13:09

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

Разработать дизайн сайта

22 нояб. 2024, в 12:53

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

тип данных из инпута зависит от типа инпута.
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?

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

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

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