【Java script問題集】1-11 li要素の値を全て取得してみよう

1-11.html

<!DOCTYPE html>
<html lang="jp" dir="ltr">
<head>
<meta charset="utf-8">
<title>1-11</title>
<script src="1-11.js" language="javascript" type="text/javascript"></script>
<body>
   <div>
      <ul id="shiritori">
         <li>りんご</li>
         <li>ごりら</li>
         <li>らっぱ</li>
         <li>ぱいぷ</li>
         <li>ぷりん</li>
      </ul>
      <div><button tydive="button">クリックで値取得！</button></div>
         <p></p>
      </div>
</body>
</html>

 1-11.js

$(function() {
    $('button').click(function() {            // button要素をクリックしたら発動
    var shiritori = $('#shiritori').text();   // 選択したテキストを変数に格納
    $('p').text(shiritori);                   // p要素にテキストを出力
    });
});

 実行結果(ボタン押下前)

f:id:mkyosuke:20200629114828p:plain

 実行結果(ボタン押下後)

f:id:mkyosuke:20200629114902p:plain