JavaScript初心者のメモとして「JavaScriptで押したボタンの文字を変更する方法」を残します。
様々な場所で使用されているボタンを押したらボタンの文字が変化する方法をメモしておきます。基本的に記載してあるコードをそのままコピーすればパソコンで実装できるように全て省略なしでコードを書いています。
#ボタンを押して文字を変更する方法
ボタンを押して文字を変更するHTMLです。
クリックするボタンを作ります。
ボタンにはid="btnをつけてJavaScriptで取得できるようにしておきます。
hello.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ToDoリスト</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
//注目部分
<button id="btn">変化</button>
//
<script src="js/main.js"></script>
</body>
</html>
次にJavaScript全体のコードです。
main.js
'use strict'
{
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
btn.textContent = '押されました';
})
}
btnのidを取得して操作ができるようにしておきます。
const btn = document.getElementById('btn');
addEventListenerでクリックした際にどうしたいかを指定します。
今回はボタンを押したらボタンの文字が変わるように設定します。
textContentを使用し中のテキストを変更します。
btn.addEventListener('click', () => {
btn.textContent = '押されました';
以上がボタンを押した際にボタンの文字を変更する方法です。
これ以外にボタンを押したら、他の箇所の文字を変更したりすることも可能です。
それは改めてメモしたいと思います。
最後までお読みいただきありがとうございました。