BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Как получить значение ID при клике по слову?

Как получить значение ID при клике по слову?

2017-12-10 / Вр:19:00 / просмотров: 5302

Да, понимаю, что звучит как-то загадочно, но не смог придумать лучшего названия для статьи. Хотя и статьей это не назовешь, уж больно она маловата.
Итак, в чем заключается результативность кода?
Например, вы можете прописать для каждого слова свой ID и в ID прописать значение. При клике по слову на экране появится значение, которое было прописано в ID.

Демонстрация (покликайте по именам):

Петя

Вася

Коля

Вы выбрали ничего

Ну, как вам результат?
Теперь сам код:

HTML:

<div id="drag" >
<p id="Петя">Петя</p>
<p id="Вася">Вася</p>
<p id="Может, хватит кликать.">Коля</p>
</div>

Вы можете прописать любую подсказку к ID.

JS (обработчик клика на div):

<script>
document.querySelector('#drag').addEventListener('click', function(e){ // Вешаем обработчик клика на div
var id = e.target.id; // Получили ID, т.к. в e.target содержится элемент, по которому кликнули
document.querySelector('#test strong').innerHTML = id;
});
</script>

HTML (вывод результата):

<span id='test'>Вы выбрали <strong>ничего</strong></span>

CSS (это код не важен, но можно использовать для красивого курсора при наведении мышки на слово):

p{
cursor: pointer;
}

Хочу сказать, что этот обработчик работает не только для параграфа «<p></p>», но и к спискам «<ul><li>», для этого поменяйте в HTML <div> на <ul> и <p> на <li>:

<ul id="drag" >
<li id="Петя">Петя</li>
<li id="Вася">Вася</li>
<li id="Может, хватит кликать.">Коля</li>
</ul>

Ну, если вы за красоту, то и в CSS нужно поменять:

li{
cursor: pointer;
}

Если подключить фантазию, то можно сделать вот такую штучку: обработчик, который будет отображать ID элементов. То есть, вам не нужно будет лезть в исходный код, чтобы посмотреть, какой ID у элемента.

Вот вам абсолютно готовый код:

<html>
<head>
<title> как узнать ID элемента</title>
<style>
div{
cursor: pointer;
}
</style>
</head>
<body id="drag">
<div id="Bloggood">Bloggood.ru
<div id="StepkinBlog">StepkinBlog.ru</div>
</div>
<div id="web-reactive">web-reactive.com</div>

<script>
document.querySelector('#drag').addEventListener('click', function(e){ // Вешаем обработчик клика на div
var id = e.target.id; // Получили ID, т.к. в e.target содержится элемент, по которому кликнули
document.querySelector('#test strong').innerHTML = id;
});
</script>
<br>
<span id='test'>ID этого элемента: <strong>вы не сделали выбор</strong></span>
</body>
</html>

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716