JavaScript — меняем html. Ну что же, наконец пришла очередь постепенно разучивать и этот язык. JavaScript работает с DOM (Document Object Model). То есть со страницей напрямую. Он способен получать элементы и менять их. Сегодня мы научимся получать и менять html элемента по его id.
JavaScript — меняем текст html
Прежде всего стоит понять, что JavaScript весьма функциональный язык, который поддерживает объектно-ориентированный подход. Мы будем учиться работать со страницей. Первое что нужно сделать для изменения внутреннего html это заиметь на этой странице какой-нибудь блок. Давайте напишем его:
Этот блок имеет следующие настройки:
|
1 |
<div id="someclass" class="card" style="border: 1px solid #000;"> |
Теперь напишем функцию, которая будет получать внутренний html блока выше:
|
1 2 3 |
function GetDivById() { document.getElementById('someclass') } |
Таким образом функция при вызове будет искать на странице DOM-а элемент с id=someclass. Но этого недостаточно. Для того, чтобы изменить содержимое блока необходимо дописать инструкцию, которая будет менять внутренний html. Для этого модернизируем нашу функцию следующим образом:
|
1 2 3 4 5 |
function GetDivById() { document.getElementById('someclass').innerHTML = 'Смотри! Все получилось и теперь я выгляжу совершенно по-другому. Ты всего лишь нажал на кнопку, а я поменялся! Таким образом JavaScript взаимодействует со страницей. Но я останусь здесь ровно до того момента, пока ты не уйдешь со страницы. Если страница обновится, то я вернусь в изначальный вид.'; } |
Хорошо. Теперь функцию GetDivById() нужно вызвать. Давайте создадим простую кнопку и сразу прикрутим к ней функцию:
|
1 |
<button id="checkBtn" class="btn btn-success" style="margin: 15px;" type="submit" onclick='GetDivById()'>Проверить</button> |
Так как вордпресс удаляет потенциально вредоносный код, в данный момент мы не можем вам продемонстрировать работу JavaScript-а, но вы можете создать отдельный файл, куда можете поместить весь имеющийся код и проверить его работоспособность. В результате после нажатия на кнопку мы поменяем текст html с помощью функции JavaScript внутри блока someclass на текст из функции GetDivById().
Что же, на этом все. Это первая статья по JavaScript, в дальнейшем их станет гораздо больше. Так же мы планируем выпустить ряд видеороликов по этому языку. Спасибо за внимание, не забывайте про группу в ВК и канал на ютубе!