JavaScript#3-DOM

「Google Colaboratory」を使用して、DOM操作を学びました。DOM操作を学ぶことで、HTMLのコードを変化させることができます。

学習で使用したコードは、以下のとおりです。

%%html

<h4 id="msg">趣味は？</h4>

<input type="text" id="data">

<button onclick="doAction();">Click</button>

<script>

function doAction() {

const data = document.querySelector('#data').value;

const res = '私の趣味は、' + data + 'です！';

document.querySelector('#msg').textContent = res;

}

</script>

これを実行する(表示される「Click」のボタンを押す)と、
冒頭の「趣味は？」が
「私の趣味は、data(入力したもの）です！」に変化します。