Сергей delphinpro

Не у всех HTML тегов есть собственное содержимое, поэтому не во всех случаях стоит ждать корректного результата при использовании псевдоэлементов на следующих тегах <img>, <input type="text">, <input type="email">, <input type="password">, <input type="datetime">, etc.

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

<div class="inputbox">
   <input type="text">
</div>

.inputbox::after { 
  /* ...стили для псевдоэлемента */ 
}

https://codepen.io/AnnaSummer/pen/qBoRVyz
И тут https://qna.habr.com/q/1149992

ReactDev,

я пробывал разные варианты, пожалуйста, не судите строго

в истории вопросов вижу у вас вопросы по реакту и жс, и по этому слегка странно видеть такой гигантский провал в знаниях по банальной хтмл разметке...
В принципе все косяки я вам перечислил в первом комментарии. Яваскрипт убрать, форму (одну!, там не нужно 2 формы) привести в порядок, кнопку вернуть на законное место, прочитать про формы с файлом любой толковый онлайн ресурс для общего развития.

Захотеть сделать что-нибудь конкретное и начать делать это.

Есть такая штука - replace-jquery, которая в той или иной степени может помочь в некоторых случаях, но это не 100-процентный конвертер или что-то в этом духе.

Вообще самым лучшим способом будет ручное переписывание кода. Статей описывающих как и чем заменить методы Jquery , достаточно чтобы справиться со столь "сложной" задачей. Да, количество кода на нативном JS будет больше и ручная "конвертация" займёт время, но это не столь критично. Я бы сказал бы что будет даже полезно, но это смотря с какой стороны смотреть на это всё.

ИМХО, но в большинстве случаев, разгребать тонну кода, ради простого функционала, бессмысленно, ведь можно написать всё с нуля, возможно даже лучше... просто нужно понять, что нужно сделать и какой результат ожидается.

Но вылазит то один баг, то другой. Уже нервишки здают...

У вас очень маленький объём кода, но качество конечно оставляет желать лучшего. Попробуйте разбить код на мелкие функции, проверьте на работоспособность, после чего переписывайте на нативный JS. Таким образом вам будет проще решить эту задачу. Тут работы на пару часиков...

Есть ли хорошие конвертеры из jquery в js?

Нет и не будет, потому что JQuery это всего лишь библиотека написанная на JS, а не какой-то там инопланетный артефакт.

В вашем случае лучший конвертер - компетентный программист.

во первых - у вас ошибка в коде, отсутствует кавычка: 'password,
Во вторых - вопрос в корне не верный, если мы говорим о коде. Основное правило при работе с данными от пользователя - данным от пользователя нельзя доверять никогда.
Отсюда же и второе правило - любые данные в запросах, если это переменные пришедшие из кода, а не прописанные буквами и цифрами в запросе, должны быть через подготовленные выражения, вы не можете гарантировать что где-то не пропустите пользовательский ввод в запрос.

Нужно, разумеется.
Это как в одном пошлом анекдоте про поручика Ржевского,
- Запрос есть? Значит нужно.

Если кажется, что защита слишком сложная, то либо вариант предложенный Сергей delphinpro в комментариях,

$stmt = mysqli_prepare($connect, "INSERT INTO `bd` (`id`, `name`, `tel`) VALUES (NULL, ?, ?)");
mysqli_stmt_execute($stmt, [$_POST['name'],  $_POST['tel']]);

Либо, поскольку это ещё не везде работает, пишется маленькая функция на 5 строк, и кладётся в файл, где прописано соединение с БД

function prepared_query($mysqli, $sql, $params, $types = "")
{
    $types = $types ?: str_repeat("s", count($params));
    $stmt = $mysqli->prepare($sql);
    $stmt->bind_param($types, ...$params);
    $stmt->execute();
    return $stmt;
}

И дальше просто

$sql = "INSERT INTO `bd` (`name`, `tel`) VALUES (?,?)";
prepared_query($connect, $sql, [$_POST['name'], $_POST['tel']]);

Просто, быстро, аккуратно, безопасно

Не стал считать какая строка у Вас тут 31ая...
Ошибка означает, что querySelector* или переменная, на которой это вызывается - вернули null.
То есть элемент не найден в разметке.

Минутка лишних усложнений и новых концепций.

В JavaScript примитивные значения (числа, например) копируются/передаются «значением», не сохраняя никакой связи с оригиналом. А объекты (например, массив) передаются «ссылкой» на оригинал.

Судя по неудачной попытке, был расчёт, что изменив elem, изменится и его «оригинал» – элемент массива. Но нет. Число возвели в квадрат, но в массиве всё осталось по-прежнему.

Будь elem не числом, а объектом, трюк сработал бы.

А в случае с примитивами (числом, строкой) надо как-то вложить квадратное значение обратно в массив в нужную ячейку. Этого-то и не хватает в коде.

items.map(el => el.id);

Часть проблем высосана из пальца, как очень смешной п.2 - разница в одну точку с запятой, а уже "гораздо длиннее", карл. При том что если класс использовать в коде хотя бы дважды, то вот тут как раз действительно получится "гораздо длинее"

use \Framework\Main\UI\Extension;
Extension::load([ 'vendor.module.components.cabinet.personal' ]);
Extension::unload([ 'vendor.module.components.cabinet.personal' ]);
vs
\Framework\Main\UI\Extension\Extension::load([ 'vendor.module.components.cabinet.personal' ]);
\Framework\Main\UI\Extension\Extension::unload([ 'vendor.module.components.cabinet.personal' ]);

и будешь постоянно спотыкаться в коде об эти палочки.

А часть решается не просто, а очень просто: вместо того, чтобы писать код в Блокноте Виндоус, надо в кои-то веки освоить работу с нормальной IDE. Которая
- автоматом скрывает блок use
- по ctrl+наведение курсора показывает полный путь, а по ctrl-click сразу переходит в определение метода
- подсвечивает неиспользуемые неймспейсы, и не проблема их удалить

Минусы как бы очевидны:

нет, не очевидны, по крайней мере миллионам разрабов

1 Код становится трудно читаем. По месту использования не всегда понятно что имеется ввиду под Order::load() - \Framework\Sale\Order::load или \Vendor\Project\Sale\Order::load - приходится проматывать к верху файла.

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

2 Код становиться длиннее - там где было бы просто:
\Framework\Main\UI\Extension::load([ 'vendor.module.components.cabinet.personal' ]);
приходится писать:
use \Framework\Main\UI\Extension;
Extension::load([ 'vendor.module.components.cabinet.personal' ]);

Код становится длиннее в проектах где 2 контроллера и в них по 1 экшену. Там где Extension::load будет вызываться больше одного раза, очевидно экономия на эксплуатации клавиатуры заметно увеличивается. А в больших проектах создание объекта может (и будет) повторяться многократно.

4 Код становиться замусоренным, так как верхушки файлов запросто превращаются во что-то вроде:

Если не обращать внимание на отсутствие пункта 3, то... нет, не могу не обращать внимание, вот же торопыга....
Во первых - данная портянка очень аккуратно прячется любой адекватной ИДЕ,
Во вторых - это правильно и логично, хранить все импорты в одном месте
В третьих - если ты пишешь неимпортированный класс в коде - ИДЕ обычно предлагает варианты внесения его в блок импорта, и все выглядит аккуратно.

И хрен его знает используются импортированные классы ниже ещё или уже нет, ведь никто не убирает этот мусор.

Хрен не знает, а ИДЕ замечательно знает и даже подсвечивает серым цветом неиспользуемые.

alert(document.querySelectorAll(".type").length);