質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

createElementで生成したliタグに内にチェックボックスを設置したい

nao__funky
nao__funky

総合スコア51

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

126閲覧

投稿2022/05/22 11:40

編集2022/05/22 22:26

前提

Vanila JSを用いて、簡単なtodoリストを作成している。inputタグに入力された内容をulタグ内にliタグとして生成する指定をおこなっている。

実現したいこと

inputタグに入力された内容をliタグで生成する指定までは、実現した。ここに生成されたliタグ内にチェックボックスを設置したい。

発生している問題・エラーメッセージ

チェックボックスが出現しない。原因がわからないため、対処できない。

該当のソースコード

--HTML-- <div class="container"> <h1 class="text__color">TODO</h1> <form action="#" id="form" class="form__width"> <input type="text" id="input" placeholder="TODOを入力" autocomplete="off" /> </form> <ul id="ul" class="list__group text__sec"></ul> </div> --HTML-- --CSS-- body { height: 100vh; background-color: #efeeee; } .container { width: 100%; margin: 0 auto; } .text__color { color: rgb(98, 246, 244); font-weight: bold; padding: 50px 0; font-size: 40px; text-align: center; } .form__width { max-width: 200px; width: 100%; margin: 0 auto; } .list__group-item { background-color: #fff; width: 80%; margin: 2% auto; border: 1px solid #000; padding: 16px 40px; } --CSS-- --JavaScript-- $(function () { const form = document.getElementById('form'); const input = document.getElementById('input'); const ul = document.getElementById('ul'); const todos = JSON.parse(localStorage.getItem('todos')); //ローカルストレージからデータを取り出す指定 if (todos) { //取り出したデータをli要素を生成する関数に代入 todos.forEach((todo) => { add(todo); }); } form.addEventListener('submit', (event) => { event.preventDefault(); //ホームでenter押すとリロードされる add(); }); function add(todo) { let todoText = input.value; if (todo) { todoText = todo; } if (todoText) { //空白の内容を送られても、エラー回避 const li = document.createElement('li'); const check = input.setAttribute('type', 'checked'); li.innerText = todoText; li.classList.add('list__group-item'); li.addEventListener('contextmenu', (event) => { event.preventDefault(); li.remove(); saveDate(); }); li.addEventListener('click', () => { li.classList.toggle('text__decoration-line-thought'); }); ul.appendChild(li, check); input.value = ''; input.focus; saveDate(); } } function saveDate() { const lists = document.querySelectorAll('li'); let todos = []; lists.forEach((list) => { todos.push(list.innerText); //空白の配列にまとめる }); localStorage.setItem('todos', JSON.stringify(todos)); //ローカルストレージにデータを保存 } }); --JavaScript--

試したこと

定数checkを定めて、ul.appendchild(li,check)とやれば、生成されるかと考えたがうまくいかなかった。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

maisumakun

2022/05/22 12:34

現状のコードでは、どこでチェックボックスの設置を行おうとしていますか?
nao__funky

2022/05/22 12:46

生成されるliタグ内に設置したいです。表示されたテキストの先頭に起きたいです。
maisumakun

2022/05/22 12:51

いや、そういう意味ではなくて、それを実現しようとした「コード」はどこに書かれているか、というところが質問です。
nao__funky

2022/05/22 12:57

ul.appendChild(li, check);と指定してみました。一つの要素をcreateElementで生成するということはできるのですが、生成した要素の中に別の要素を作るやり方がわかりません。
maisumakun

2022/05/22 13:01

> ul.appendChild(li, check);と指定してみました。 それは、どこに書きましたか?
nao__funky

2022/05/22 13:07

function add(todo) { let todoText = input.value; if (todo) { todoText = todo; } if (todoText) { //空白の内容を送られても、エラー回避 const li = document.createElement('li'); const check = input.setAttribute('type', 'checked'); li.innerText = todoText; li.classList.add('list__group-item'); li.addEventListener('contextmenu', (event) => { event.preventDefault(); li.remove(); saveDate(); }); li.addEventListener('click', () => { li.classList.toggle('text__decoration-line-thought'); }); ul.appendChild(li, check); input.value = ''; input.focus; saveDate(); } } add関数と定めた中に記述しました。これではliタグの中に生成されないことがわかりました。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。