Как менять надпись на кнопе или просто надпись после нажатия?

Question

[Илья Деревянных]

Нужно просто добавить список городов на сайт и чтобы при нажатии на него менялось название города. Т.е. будет один и тот же сайт, но надо чтобы можно было менять название города в шапке.
Как это можно реализовать?

Answer 1

[defriz]

JS:

onload = function () { // выполнит код, когда прогрузится вся страница
	const utils = {
		random: (x, y) => {
			return y ? Math.round(Math.random() * (y - x)) + x : Math.round(Math.random() * x);
		},
		pick: (array) => {
			return array[utils.random(0, array.length - 1)];
		}
	}; // функции
	const cities_names = ['Москва', 'Санкт-Петербург']; // можно добавить ещё больше названий
	document.getElementById('header').innerHTML = `<h1>${utils.pick(cities_names)}</h1>`; // изменение div на случайный элемент из массива (в нашем случае строку)
};

HTML:
<div id="header"></div>

Answer 2

[Артем Золин]

PHP:

$cities_names = ['Новокрибирск', 'Керамзин', 'Ос Альта', 'Новый Зем'];

echo '<span id="city-name">' . $cities_names[0] . '</span>';

echo '<select id="cities" name="cities" class="selector">';
foreach ( $cities_names as $keyC => $cities_name  ) {
	echo '<option value="' . $cities_name . '">' . $cities_name . '</option>';
}
echo '</select>';

JQ:

jQuery(document).ready(function ($) {

	// устанавливаем значение из localStorage, если оно есть
	var cityData = localStorage.getItem( 'cityData' );
	if ( null !== cityData ) {
		$( '#city-name' ).html( cityData );
	}

	// функция изменения селекта
	$( '.selector' ).change( function(e) { 

		var value = $(this).val();

		$( '#city-name' ).html( value ); // меняем город
		localStorage.setItem( 'cityData', value ); // добавляем его localStorage

	});

});