Главная » Вебмастеру » Как получить значение 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>