はじめに
初学者の私が、アクティブラーニング兼備忘録の為にJavaScriptのメソッドをまとめる記事です。
少しずつ追記していきます。
目次
- getElementById
- 基本構文
- innerHTMLで活用
- onClickで活用
getElementById
getElementByIdメソッド
HTMLタグで指定した任意のIDにマッチするドキュメント要素を取得する。
これが一番よく使う気がします。
基本構文
<html>
<body>
<p id='hey'>Hello world</p>
<script>
console.log(document.getElementById('hey'));
</script>
</body>
</html>
<p id='hey'>Hello world</p>
innerHTMLで活用
<html>
<body>
<p id='hey'>こんにちは</p>
<input type='button' value='Click' onclick='myfunc()'>
<script>
let myfunc = () => {
const myp = document.getElementById('hey');
myp.innerHTML = 'こんばんは';
}
</script>
</body>
</html>
ボタンを押すと「こんにちは」から「こんばんは」になる
onClickで活用
<html>
<body>
<p>push button</p>
<input type='button' id='myid' value='Click'>
<script>
let mybutton = document.getElementById('myid');
let myfunc = () => {
mybutton.value = 'Hello world';
}
mybutton.onclick = myfunc;
</script>
</body>
</html>
ボタンを押すと、ボタンに書いてある「Click」が「Hello world」になる