JS：メモ帳アプリのタイトルと本文の取得について

JavaScriptを使ってタイトルと本文がセットになったメモ帳アプリを作ろうとしています。
初学者のためあまりわかっていないのですが、タイトルもしくは本文のみなら表示ができました。

「タイトルと本文をセットで表示」をするためにはどうすればいいでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>document</title>
8</head>
9<body>
10    <header>
11        <h1 class="head">TODOリスト</h1>
12    </header>
13    <main>
14        <div id="memo-main">
15            <input type="text" placeholder="タイトル" id="title">
16            <br>
17            <textarea placeholder="本文" id="body"></textarea>
18            <br>
19            <button id="button">送信</button>
20        </div>
21        <section>
22            <ul id="list"></ul>
23        </section>
24    </main>
25    <script src="app.js"></script>
26</body>
27</html>

JavaScript
1const title = document.getElementById("title");
2const body = document.getElementById("body");
3let memo-list = new Array();
4memo-list = document.getElementById("list");
5const li = document.createElement('li');
6
7document.getElementById("button").onclick = function() {
8    li.innerHTML = title.value;　//ここを「タイトルと本文」にしたいです
9    items.appendChild(li);
10};

＋などでやってみたのですがうまくいかず、、もしご存知の方がいらっしゃればお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

別の要素なので別々にとればいいのでは？

js
1    li.innerHTML = title.value + body.value;

※どう表示したいのか分からないのでくっつけただけ。

ついでに、変数名に-は文法エラーです。MDN：変数
ついでに、提示のコードは定義した変数を参照してない箇所があり、そのままでは動きません。

蛇足ですが、あまりidそのままの変数名は良くないかと思いますし、
クリックの外で要素を作ってるので続けてクリックしても追記はされません。

要素を参照したり作ったりはイベント内で行ってください。

投稿2020/12/13 21:01

m.ts10806

総合スコア80875

gomasan

2020/12/14 02:32

> 別の要素なので別々にとればいいのでは？ →一つにするという考えばかりありましたが、このアドバイスで２つ並べたらうまくいきました。。またそれ以外の補足もありがとうございます>< 知らなかったことばかりでとても勉強になりました。。！

m.ts10806

2020/12/14 02:49

「要素の操作」「変数の扱い」「オブジェクト、プロパティ」についておさえておいたほうが良いかもしれません。

m.ts10806

2020/12/18 13:41

低評価された方明らかな理由があるならきちんとコメントするかより正しい回答をしてください。低評価だけして逃げるのは単なる卑怯者です。

gomasan

2020/12/19 03:58

>「要素の操作」「変数の扱い」「オブジェクト、プロパティ」についておさえておいたほうが良いかもしれません。補足までありがとうございます(TT) こう言った基礎的な考え方が無かったので、とても勉強になります。

m.ts10806

2020/12/19 04:23

他の言語でも同じですが、やはりオブジェクトの扱い方がキモですのでいったんやりたいことを離れてでも学習しておくべきと思います。

gomasan

2020/12/23 09:56

かしこまりました。ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

JS：メモ帳アプリのタイトルと本文の取得について

関連した質問