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

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

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

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

Q&A

解決済

1回答

1505閲覧

for文の使い方

lasus

総合スコア10

JavaScript

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

0グッド

0クリップ

投稿2016/05/17 16:56

編集2016/05/17 17:07

###前提・実現したいこと
クリックするたびに、関数を実行させたい。

###発生している問題
・リスト項目をクリックすると「削除しますか?」というメッセージが出て、
OKをクリックすると削除するプログラムを作りました。

・1回目のクリックだと実行(削除)されるんですが、2回目のクリックではメッセージも出ません。

###聞きたいこと
・前に画像をクリックするたびに画像が変わるPGMを作り
それを参考に作ったのですが、for文の使い方が変なのでしょうか。

・関数を作ったら、関数名()という風に書かないと実行されないのに
for文はずっと実行されている状態なのでしょうか?(変な聞き方ですみません…)

###JavaScriptのソースコード
・memo_listは配列で、中身は別ページから入れています。

/*=================== メモ取得(配列) =====================*/ var list = JSON.parse(localStorage.getItem('memo_list')); /*=================== トップ画面にリスト出力 =====================*/ var topView = function(){ for(var i = 0; i < list.length; i++){ var li = document.createElement('li'); ///idに配列のインデックス番号をつけておく li.id = "memo" + i; li.textContent = list[i]; document.getElementById('list').appendChild(li); }; }; topView(); /*=================== メモクリックで削除 =====================*/ var thumbs = document.querySelectorAll('li'); for(var i = 0; i < list.length; i++){ thumbs[i].onclick = function(){ var delMemo = window.confirm('削除しますか?'); if(delMemo){ ////id="memoxxx" ←memoの4 10は多めに桁を取っただけ var idNo = (this.id).substring(4,10); ///配列から指定のメモを削除 list.splice(idNo,1); ///ローカルストレージに入れる localStorage.setItem('memo_list',JSON.stringify(list)); ///listを初期化する var element = document.getElementById("list"); while(element.firstChild){ element.removeChild(element.firstChild); } topView(); }else{ return false; }; }; }

###HTMLのソースコード

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>メモ帳</title> <body> <div id="TopPage"> <head><h1>メモ帳</h1></head> <div><ul id="list"></ul></div> </div> <script src="top.js"></script> </body> </head> </html>

###補足情報(言語/FW/ツール等のバージョンなど)
(何故か)chromeだと動きません。firefoxかoperaだと動きます。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/05/17 16:58

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
lasus

2016/05/17 17:06

ご指摘ありがとうございます。
guest

回答1

0

ベストアンサー

今のコードは、クリックイベントを付けた要素をクリックイベント中に全削除し、リストだけ再構築(topView(); )しているのでイベントが一度しか起こらないのでは。

「メモクリックで削除 」の部分を関数化し、topView(); の後に必ず実行するようにすれば改善されると思います。

投稿2016/05/17 17:03

kei344

総合スコア69398

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lasus

2016/05/18 15:24

できました!ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問