Антон

function savetxt(urlParam)
{
  let stroka = urlParam;
  var blob = new Blob([stroka], {type: "text/plain"});
  var link = document.createElement("a");
  link.setAttribute("href", URL.createObjectURL(blob));
  link.setAttribute("download", "save.txt");
  link.click();
  console.log("save.txt saved")
}

savetxt(location.origin)

$(document).on('click', "input[type='checkbox']", function(){

$(document).on('click', '#button', function(){
  let txt = 'Hello';
  $.ajax({
    url: 'test.php',
    type: 'POST',
    data: { txt },
    success: function(data){
     $('p.out').text(data);
   },
    error: function(){
  console.log('ERROR');
    }
 })
})

$('#button').click(async function() {
	
	var txt = 'Привет, мир!';
	
	var response = await $.ajax({
		url: 'test.php',
		type: 'POST',
		contentType: 'text/plain; charset=UTF-8',
		data: txt
	});
	
	$('p.out').html(response);
	
});

<?php

// Включаем отображение ошибок:
ini_set('error_reporting', E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);

// Указываем браузеру, что ответ сервера
// является обычным текстом в кодир. UTF-8:
header('Content-Type: text/plain; charset=UTF-8');

// Записываем в переменную то,
// что отправил нам браузер по AJAX:
$received = file_get_contents('php://input');

// Выводим полученный текст (отдаем его в браузер):
echo 'Из фронта (браузера) был получен следующий текст: ' . $received;

// Возвращается dom node - прям этот элемент из DOM
document.querySelector('Ваш элемент') 
// Вы прям на эту ноду вешаете событие
document.querySelector('Ваш элемент').addEventListener('click',f())

// Возвращается "Масив" элементов - тип масив
document.querySelectorAll('Ваш элемент')
// У массива нет метода addEventListener - ошибка
document.querySelectorAll('Ваш элемент').addEventListener('click',f())

document.querySelectorAll('Ваш элемент').forEach(item=>{
// Item - каждый элемент в массиве и он же является node елементом из DOM 
item.addEventListener('click',f())
})