[過去ﾛｸﾞ] + JavaScript の質問用スレッド vol.117 + (1001ﾚｽ)
上下前次1-新
抽出解除 ﾚｽ栞
このｽﾚｯﾄﾞは過去ﾛｸﾞ倉庫に格納されています｡
次ｽﾚ検索 歴削→次ｽﾚ 栞削→次ｽﾚ 過去ﾛｸﾞﾒﾆｭｰ
ﾘﾛｰﾄﾞ規制です｡10分ほどで解除するので､他のﾌﾞﾗｳｻﾞへ避難してください｡
122(6): デフォルトの名無しさん [sage] 2014/08/10(日) 04:01:46.88 ID:Sc++4qqi(2/11) AAS
>>110,116110(2): 94 [] 2014/08/10(日) 03:11:32.98 ID:TNaWGn4J(10/16) AAS
結局やりたいことはというと
「ボタンを押したら下部のテーブルに文字が出る。
もともと出ていたトップページの文字は消える」
ということをやりたいのです。
ひどいコードとのことでしたが、
もっとシンプルなコード、もっとちゃんとしたコードを
内容全部とは言わないのでヒント(使う機能など)だけでも教えて頂けると非常に助かります。
116(1): 94 [] 2014/08/10(日) 03:36:41.21 ID:TNaWGn4J(12/16) AAS
>>112さん
はい、このコードは捨てることにします。
数時間ググり続けてるんですけどね…
デバッグも、特に異常は表示されません。
表示したい機能を考えた上で、一から作り直そうと思います。
>>113さん
やはりそうですか…しかしjQueryを使っていないので、
このままこのコードを使うことはできないみたいです。
諦めて一から作り直します。
みなさん、ご指導本当にありがとうございました。
これからJavascriptの勉強、１から頑張っていきます。
俺ならこうする
外部ﾘﾝｸ:jsfiddle.net
127(1): デフォルトの名無しさん [sage] 2014/08/10(日) 04:26:48.23 ID:Sc++4qqi(5/11) AAS
>>122はJavaScript無効環境では無意味なボタンが残る問題があってまだ改善する余地がある
基本は何もボタンを用意せず、JavaScriptで必要なフォームボタンを生成してやるのが一番いいだろうな
129(1): デフォルトの名無しさん [sage] 2014/08/10(日) 04:43:57.91 ID:xdwi6sFr(9/13) AAS
>>122をjQueryを使うとこうなる。
document.getElementById('sample').addEventListener('click', function (event) {
var input = event.target;
if (input.tagName === 'INPUT' && input.type === 'button') {
input.ownerDocument.getElementById('output').firstChild.data = input.value;
event.preventDefault();
}
}, false);
↓
外部ﾘﾝｸ:jsfiddle.net
$('#sample').on('click', 'input[type=button]', function (event) {
$('#output').text(this.value);
event.preventDefault();
});
133(2): デフォルトの名無しさん [sage] 2014/08/10(日) 05:02:29.42 ID:Sc++4qqi(6/11) AAS
>>129
それで動くのか
this 値がトリッキーすぎるな
また一つ、jQuery が嫌いな理由が出来てしまった…
>>130130(1): デフォルトの名無しさん [sage] 2014/08/10(日) 04:54:18.13 ID:xdwi6sFr(10/13) AAS
>>127
> 基本は何もボタンを用意せず、JavaScriptで必要なフォームボタンを生成してやるのが一番いいだろうな
いやこれは本質的にはradioボタンの動きなので、
radioを使ってCSSだけで実装するのがいいだろう。
自分で書いておいてなんだが、「タブ型UIを作りたかった」といわれても納得できるんだよな(今気づいた)
だとすれば、>122は期待通りに動作していないことになるわけだが、こればかりは質問者でないとわからん
タブ型UIなら始めに全コンテンツを表示しておいてJavaScriptでタブ型UIに作り変えれば済むのだが
138: 連続投稿って言われたからIDかわる [sage] 2014/08/10(日) 05:21:25.67 ID:Jkr9svTU(1/7) AAS
ほらねｗ >>137137(2): デフォルトの名無しさん [sage] 2014/08/10(日) 05:13:57.09 ID:Sc++4qqi(8/11) AAS
>>134
そちらこそ event.currentTarget と event.target の違いを理解してるのか？
勝手に難癖つけていることにしないで欲しいんだが
this値は event.currentTarget と同義
DOM 3 辺りからこの規約になったはずだが、もともとはDOM 規定に this 値は入ってなかった
この場合の event.currentTarget は #sample になるので、event.currentTarget で参照可能なのは本質的におかしい
でDOM 3の規約がどうとかいってるでしょ？
だからjQueryを使えって言ってるの。
わからない人に説明しておくと、eventは特にIEが
W3C仕様に長らく対応していなくてevent.targetが
使えるようになったのはIE9から
こことか見てみよう。
外部ﾘﾝｸ:ichijo3.tumblr.com
で、jQueryのeventは、jQueryが各ブラウザの問題を解決して
IE6等を含むどのブラウザでもW3C規約に準拠した実装になってる。
だから>>137でごちゃごちゃいっている罠にはまらなくて済む。
実際に>>122とか古いIEで動かないからさ。
そういう本質的でない部分を考えるのは時間の無駄。
144(1): デフォルトの名無しさん [sage] 2014/08/10(日) 06:53:48.66 ID:Jkr9svTU(4/7) AAS
>>142142(1): デフォルトの名無しさん [sage] 2014/08/10(日) 06:07:21.82 ID:Sc++4qqi(10/11) AAS
>>141
俺のネガティブな部分とお前のポジティブな部分の比較が公平ではないが、当然意識してやってるんだろうな？
煽り立てて話すことしか出来ないなら、お前と話し続ける意義は感じない
別に話し続けなくていいよ。っていうか
これ以上レスしないなら俺が助かる。
で、jQueryは初心者こそ使うべきもの。
DOMの面倒な部分、複数の要素に一括で属性や
イベントを割り当てることや、各ブラウザの違いによる問題に
はまらなくて済むから。
実際に>>122が動かないコードであることを証明している。
最初から一部のブラウザで対応で書くのが大変なことを意味している。
145(1): デフォルトの名無しさん [sage] 2014/08/10(日) 12:11:05.82 ID:Sc++4qqi(11/11) AAS
>>144
> 実際に>>122が動かないコードであることを証明している。
addEventListener, event.target は IE9+ で動作する
現在の主要環境では特に問題はないと思うが、具体的にどのブラウザで動かない？
attachEvent を使えば IE8- もサポート可能だが、更新の切れたWindows XPをサポートするのは特殊なケースになる
外部ﾘﾝｸ:jsfiddle.net
> で、jQueryは初心者こそ使うべきもの。
初心者は基礎から学ぶもの
>>136136(1): デフォルトの名無しさん [sage] 2014/08/10(日) 05:09:24.53 ID:Sc++4qqi(7/11) AAS
>>132
変な癖っていうのは
・メソッドチェーンに拘る
・無名関数を多量生産する
これは明らかにスタンダードな書き方ではない
基本を覚えずにこれを覚えると、
・必要もないのにメソッドチェーンにしたがる
・名前付き関数を忌避して無名関数でなければ気持ち悪く感じる
という感覚を持つ場合がある
Web制作板で妙に関数型言語に拘る奴がいるが、ああいう感じだ
まあ、一部の信者だけだと信じたいが、刷り込み効果も結構怖いので初めからこの書き方に慣れて欲しくない
でjQueryから学ぶことに弊害は説明した
更に言えば、クロスブラウザは初心者でも当然学ぶもの
DOM標準でかけなくてjQuery依存するとjQueryで網羅できない状況に勅命したときに苦労するし、クロスブラウザ方法がわからないだろう
jQueryから他のライブラリに移行したり、DOMに移行する時にも「jQueryでの〜はDOMではどう書きますか？」という疑問が発生するはずだが、jQuery独自仕様に慣れてしまうとDOMの書き方に戸惑いを覚えて納得できない可能性は十分にあるし、その手の質問は多くある
長期的に考えれば、DOMから学ぶほうが効率が良いと思う
どちらにしても、あとは質問者が判断することだろう
上下前次1-新書関写板覧索設栞歴
ｽﾚ情報 赤ﾚｽ抽出 画像ﾚｽ抽出 歴の未読ｽﾚ AAｻﾑﾈｲﾙ
ぬこの手 ぬこTOP 0.037s