Сергей delphinpro

Куда «экранировать»? Зачем «экранировать»? Вы хотите, чтобы стиль магически применялся только к лежащей рядом с ней кнопке? Так не работает. Используйте классы или идентификаторы, если не хотите инлайново писать. Ну или какой-то сложный селектор. Короче, в стиле должно быть явно указано какую button вы имеете в виду от корня документа.

const xxx = str => Array
  .from(str, (n, i) => n.toUpperCase() + n.toLowerCase().repeat(i))
  .join('-');

или

const xxx = str => str
  .toUpperCase()
  .split('')
  .reduce((acc, n, i) => `${acc}${i ? '-' : ''}${n}${Array(-~i).join(n.toLowerCase())}`, '');

или

const xxx = str => str
  .toUpperCase()
  .replace(/(?<=.)./g, (m, i) => '-'.concat(m, ...Array(i).fill(m.toLowerCase())));

Чтобы дочерние элементы были одной высоты (по максимальному в строке), им не нужно задавать display: flex.

Не понятно на самом деле какое нужно объяснение? Так работает flexbox. Точка.
Но это поведение можно изменить с помощью align-items, у которого по умолчанию значение stretch. Даже если оно явно не указано.

Одного хватит. Который будет работать с вычисляемым свойством, представляющим объединённые данные.

Не у всех 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 не числом, а объектом, трюк сработал бы.

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