JSFiddle - React, Tailwind, and code Playground

HTML

<script>
 //JavaScript
 
 	//значение "залупа" из поля zalupa-field - в переменную zalupavar
    function to_var(){
    	var zalupavar = ''; //clear
        
		var element_by_id = document.getElementById("zalupa-field");
        if(element_by_id!==null){
        	zalupavar = element_by_id.value;
        }
        else{
        	zalupavar = 'element with id залупа-field - not found...';
        }
		console.log('zalupavar: ', zalupavar);
    }
 </script>
 
 
 <!--
   HTML
 -->
 
 <form action="" name="test" method="post" onsubmit="to_var();">
  <!--
	'action = ""' - отправка формы на эту же страницу
	'onsubmit="to_var();"' - при отправке формы, выполнить функцию to_var()
	'method="post"' - отправить форму как POST-запрос.
 -->
  <p>
      <b>Залупа-field</b>
	  <!-- input содержит id="zalupa-field" по которому скрипт найдёт этот элемент -->
      <input id="zalupa-field" type="text" size="40" value="Залупа" title="Поле ввода текста, с этой твоей залупой.">
  </p>
	<p>
		<!-- отправить форму POST-запросом (работает если сохранить HTML в HTML-файл, а тут ошибка)-->
		<input type="submit" value="Отправить POST-запросом">
		<!--
			Или же, без отправки формы и перезагрузки страницы,
			вызывать функцию, оставаясь на этой странице
		-->
		<input type="button" value="Отправить без POST-запроса" onclick="to_var();">

		<!-- удалить дефолтный атрибут "value" c элемента input, имеющего id zalupa-field-->
		<input type="reset" value="Очистить" onclick='document.getElementById("zalupa-field").removeAttribute("value");'>
	</p>
 </form>