- 締切済み
<li>タグのクリックされたテキストを取得する方法
HTMLのリストの要素をクリックされた時にそのテキストを取得する方法が知りたいです。 取得したテキストを別枠に表示したいです。 jqueryを利用せずjavascriptのみで実装する事は可能でしょうか？ <ul> <li>文字１</li> <li>文字２</li> <li>文字３</li> </ul>
- ifonesapp
- お礼率77% (99/128)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- fji-jp
- ベストアンサー率84% (11/13)
jqueryを利用せずjavascriptのみで実装する事は可能です。 以下、一例を示します。 <html> <head> <script> window.onload = function() { for (var item of document.getElementsByTagName('li')) item.onclick = function() {document.getElementById('rslt').innerText = this.innerText;} } </script> </head> <body> <ul> <li>文字１</li> <li>文字２</li> <li>文字３</li> </ul> <div id="rslt"></div> </body> </html>
- ngwaver
- ベストアンサー率26% (324/1203)
index.html <body> <ul> <li>文字１</li> <li>文字２</li> <li>文字３</li> </ul> <p class="target">別枠</p> <script src="main.js"></script> </body> main.js const liGroup = document.querySelectorAll("li"); const target = document.querySelector("p"); for (var i = 0, len = liGroup.length; i < len; i++) { liGroup[i].addEventListener("click", (e) => { console.log(e.target.textContent); target.innerText = e.target.textContent; }); } >jqueryを利用せずjavascriptのみで実装する事は可能でしょうか？ jQueryはJavaScriptで書かれているので、jQueryで出来てJavaScriptで出来ないことはないはずです。
