私的良スレ書庫
不明な単語は2ch用語を / 要望・削除依頼は掲示板へ。不適切な画像報告もこちらへどうぞ。 / 管理情報はtwitterでログインするとレス評価できます。 登録ユーザには一部の画像が表示されますので、問題のある画像や記述を含むレスに「禁」ボタンを押してください。
元スレ+ JavaScript の質問用スレッド vol.114 +
JavaScript スレッド一覧へ / JavaScript とは? / 携帯版 / dat(gz)で取得 / トップメニューみんなの評価 :
レスフィルター : (試験中)
>>635
失礼しました。仰るとおりで<div id = "result"></div>でbody内に記述してあります。
JSでこの中に可変のtableを作成していました。
HTMLファイルが読み込まれてからの実行順を理解しないといけないと思いました。
勉強します。ありがとうございます。
>>637
アドバイスありがとうございます。
window.onload(){} 内に各関数を定義し、TD要素にイベントハンドラを設定するのではなく、
addEventListenerを試しました。
どの位置が押されたのかの情報が必要なため、以下のように呼び出し先の関数（clck）に引数を設定しました。
function addListener(max){
for(var i=0;i<max;i++){
for(var j=0;j<max;j++){
var a = document.getElementById(i + "" + j);
a.addEventListener( "click", function(){clck(i,j)});
}
}
}
実行してみると、どこをクリックしてもclck(5,5)が実行されてしまいます。
無名関数を使って引数を指定したために、すべての設定が最後のもので統一されてしまったのでしょうか。
失礼しました。仰るとおりで<div id = "result"></div>でbody内に記述してあります。
JSでこの中に可変のtableを作成していました。
HTMLファイルが読み込まれてからの実行順を理解しないといけないと思いました。
勉強します。ありがとうございます。
>>637
アドバイスありがとうございます。
window.onload(){} 内に各関数を定義し、TD要素にイベントハンドラを設定するのではなく、
addEventListenerを試しました。
どの位置が押されたのかの情報が必要なため、以下のように呼び出し先の関数（clck）に引数を設定しました。
function addListener(max){
for(var i=0;i<max;i++){
for(var j=0;j<max;j++){
var a = document.getElementById(i + "" + j);
a.addEventListener( "click", function(){clck(i,j)});
}
}
}
実行してみると、どこをクリックしてもclck(5,5)が実行されてしまいます。
無名関数を使って引数を指定したために、すべての設定が最後のもので統一されてしまったのでしょうか。
>>640-641,643
仰るとおり、マス目を可変にしているため、コードからtableを生成しています。
>・タグの要素としてのonclick=は使わない。DOMに直接イベントを割り当てる。
onclickの代わりにaddEventListenerを試してみましたが、上記の通りです。。
>・tdに対してイベントを割り当てるのではなく、table（もしくはその上の要素）にイベントハンドラを割り当てる。だからidも不要。
クリックによってイベントが実行できるように思えますが、
IDがないとどこがクリックされたかが特定できないと思うのですが。
その他、ありがとうございます。
試してみます。
仰るとおり、マス目を可変にしているため、コードからtableを生成しています。
>・タグの要素としてのonclick=は使わない。DOMに直接イベントを割り当てる。
onclickの代わりにaddEventListenerを試してみましたが、上記の通りです。。
>・tdに対してイベントを割り当てるのではなく、table（もしくはその上の要素）にイベントハンドラを割り当てる。だからidも不要。
クリックによってイベントが実行できるように思えますが、
IDがないとどこがクリックされたかが特定できないと思うのですが。
その他、ありがとうございます。
試してみます。
> IDがないとどこがクリックされたかが特定できないと思うのですが。
できる。
できる。
それぐらい自分で調べろやｗ
俺が教えないのは、自分のためだ。
楽しいからなｗ
俺が教えないのは、自分のためだ。
楽しいからなｗ
>>653,655
返信ありがとうございます。
できました！
方法としては、おっしゃったとおり、tableタグにonclick"clck(e)"
でイベントハンドラを登録し、
clck関数で受け取ったevent（ここでは変数e）から targetプロパティでクリック元を特定出来ました。
あとは特定できた要素のinnerHTMLを変更するのみで、コードを短縮したままで実装できました。
上要素に割り当てたイベントハンドラから、子要素が押された場合でも特定できるとは想像していなかったので
大変勉強なりました。これは他部分でも生かせそうです。
おかげさまで１つ賢くなれました。ありがとうございます！
今度は、3目並べ（もしくは5目並べ）のCPU部分を作成していく予定です。
勉強しつつ、頑張ります。
本当にありがとうございました！
返信ありがとうございます。
できました！
方法としては、おっしゃったとおり、tableタグにonclick"clck(e)"
でイベントハンドラを登録し、
clck関数で受け取ったevent（ここでは変数e）から targetプロパティでクリック元を特定出来ました。
あとは特定できた要素のinnerHTMLを変更するのみで、コードを短縮したままで実装できました。
上要素に割り当てたイベントハンドラから、子要素が押された場合でも特定できるとは想像していなかったので
大変勉強なりました。これは他部分でも生かせそうです。
おかげさまで１つ賢くなれました。ありがとうございます！
今度は、3目並べ（もしくは5目並べ）のCPU部分を作成していく予定です。
勉強しつつ、頑張ります。
本当にありがとうございました！
>>656
3目並べと5目並べはだいぶ別のゲームな気がするが言いたい事は分かる
3目並べと5目並べはだいぶ別のゲームな気がするが言いたい事は分かる
>>651
イベントハンドラ中のi,jはイベントハンドラ設定時の値で固定されてるわけじゃなくて、外の値を参照してる
イベントハンドラ中のi,jはイベントハンドラ設定時の値で固定されてるわけじゃなくて、外の値を参照してる
onscrollハンドラの中でブレークすると、画面はまだスクロールしていません
このことからonscorollはスクロールする前に発生し、
preventDefaultすればスクロールが中止されると考えましたが、
preventDefaultしてもスクロールは止まりません。
何故でしょうか？
このことからonscorollはスクロールする前に発生し、
preventDefaultすればスクロールが中止されると考えましたが、
preventDefaultしてもスクロールは止まりません。
何故でしょうか？
>>624-626の件ですが、画面から消えた要素をdisplay:noneするようにしたら、
想像以上にキビキビ動くようになりました
スクロールごとに当たり判定して消したり出したりするコストは結構あるんじゃないと思っていましたが
それよりもノードの複雑性から来るコストの方が多かったようです
ありがとうございました
想像以上にキビキビ動くようになりました
スクロールごとに当たり判定して消したり出したりするコストは結構あるんじゃないと思っていましたが
それよりもノードの複雑性から来るコストの方が多かったようです
ありがとうございました
>>628-629
最終的に以下のようにしました。
・repeat文でtableの作成
・onclickではなく、addEventListenerによるイベント通知
・window.onload内で完結するコード
ありがとうございました！
window.onload = function(){
var turn = 0;
var color = ["●","◯"];
makefield();
function makefield(){
var max = 6;
var table = "<table>" + ("<tr>" + "<td></td>".repeat(max) + "</tr>").repeat(max) + "</table>";
document.getElementById("result").innerHTML = table;
document.getElementById("result").addEventListener("click",clck);
}
function clck(event){
if(event.target.innerHTML == ""){
event.target.innerHTML = color[turn];
turn = (turn + 1) % 2;
}
}
}
<body>
<div id="result"></div>
</body>
最終的に以下のようにしました。
・repeat文でtableの作成
・onclickではなく、addEventListenerによるイベント通知
・window.onload内で完結するコード
ありがとうございました！
window.onload = function(){
var turn = 0;
var color = ["●","◯"];
makefield();
function makefield(){
var max = 6;
var table = "<table>" + ("<tr>" + "<td></td>".repeat(max) + "</tr>").repeat(max) + "</table>";
document.getElementById("result").innerHTML = table;
document.getElementById("result").addEventListener("click",clck);
}
function clck(event){
if(event.target.innerHTML == ""){
event.target.innerHTML = color[turn];
turn = (turn + 1) % 2;
}
}
}
<body>
<div id="result"></div>
</body>
jqueryで要素のクライアント座標を得るにはどうしたらいいのでしょうか？
>>665
.offset()
.offset()
日本政府からの支援の申し出に対する韓国でのメディア論調
「韓国に対する救助支援を政治利用するのではないかという批判が相次ぐ」
「政治的下心が垣間見え、我が政府当局が苦慮している」
「国際平和貢献の事例として、集団的自衛権容認に向けた政治カードに利用した」
今日も平壌運転で、じつに結構なことです。
ちなみに、今朝の不治テレビ「とくダネ！」では現地被害者家族のインタビューで
どうして日本からの支援申し出を断ったのか、という部分に対して
「どうして民間からの支援申し出を断ったのか」という字幕に変えてました。
さすがは不治テレビ。
「韓国に対する救助支援を政治利用するのではないかという批判が相次ぐ」 「政治的下心が垣間見え、我が政府当局が苦慮している」
「国際平和貢献の事例として、集団的自衛権容認に向けた政治カードに利用した」
今日も平壌運転で、じつに結構なことです。
ちなみに、今朝の不治テレビ「とくダネ！」では現地被害者家族のインタビューで
どうして日本からの支援申し出を断ったのか、という部分に対して
「どうして民間からの支援申し出を断ったのか」という字幕に変えてました。
さすがは不治テレビ。
利用者の平均IQが高い技術スレにネトウヨコピペなんて効果あるわけないだろ
恥を知れ
恥を知れ
質問です
Javascriptで要素のスタイルを変更するのではなくスタイルシートを
.hoge .age{
width:100%;
}
↓
.hoge .age{
width:50%;
}
みたいに変更する方法ってあるんでしょうか？
Javascriptで要素のスタイルを変更するのではなくスタイルシートを
.hoge .age{
width:100%;
}
↓
.hoge .age{
width:50%;
}
みたいに変更する方法ってあるんでしょうか？
CSSに便乗質問です
insertRuleで"element.class{prop:value}"のようにルールを1つずつ追加しているのですが
これをまとめて
"element.class{prop:value} element#id{prop:value}"
のように複数のルールを一度に追加することってできますか？
insertRuleで"element.class{prop:value}"のようにルールを1つずつ追加しているのですが
これをまとめて
"element.class{prop:value} element#id{prop:value}"
のように複数のルールを一度に追加することってできますか？
>>681
はい
はい
>>683
Yahooにaccess-control-allow-originでクロスドメインを許可するようお願いする
http://developer.mozilla.org/ja/docs/HTTP_access_control
Yahooにaccess-control-allow-originでクロスドメインを許可するようお願いする
http://developer.mozilla.org/ja/docs/HTTP_access_control
小技について質問
if(a=="a" || b=="a")を短くする方法ってありますか？
if(a || b=="a") ってやったらダメでした
if(a=="a" || b=="a")を短くする方法ってありますか？
if(a || b=="a") ってやったらダメでした
>>685
ない
ない
>>686
諦めやす！
諦めやす！
>>685
[a, b].indexOf("a") != -1
[a, b].indexOf("a") != -1
はわわ本当だね
でも見たら想定と違ってて、想定してたのと同じ関数はcontainsだった
var a = 3;
var b = 4;
var c = 3;
console.log(_.contains([a,b],c));
→true
でも見たら想定と違ってて、想定してたのと同じ関数はcontainsだった
var a = 3;
var b = 4;
var c = 3;
console.log(_.contains([a,b],c));
→true
chromeはIME制御がうまくいってないようで
contenteditableで日本語入力してIMEオンのままbootstrapのボタンを押すと、
フォーカスは外れているのにキー入力だけがcontenteditable領域に行くという変な状態になります
firefox, ieはそんなことはありません
これをどう回避できるでしょうか？
あるいは関係者の方が見ていたらこのバグの修正をお願いします
contenteditableで日本語入力してIMEオンのままbootstrapのボタンを押すと、
フォーカスは外れているのにキー入力だけがcontenteditable領域に行くという変な状態になります
firefox, ieはそんなことはありません
これをどう回避できるでしょうか？
あるいは関係者の方が見ていたらこのバグの修正をお願いします
http://jsbin.com/zoxecica/1/edit
再現コード書きました
divで日本語入力→IMEオフにせずにボタンをクリック→その後キー入力
とすると、chromeでのみ、文字がdivに出現します
textareaではそうはならないので、
contenteditableのフォーカスアウト時の処理が甘いのだと思われます
再現コード書きました
divで日本語入力→IMEオフにせずにボタンをクリック→その後キー入力
とすると、chromeでのみ、文字がdivに出現します
textareaではそうはならないので、
contenteditableのフォーカスアウト時の処理が甘いのだと思われます
バグはいつか解消するものなので
コードをバグに最適化するといつか非最適になってしまう
かといってバグがいつ解消するかは分からない
という問題がありますね
コードをバグに最適化するといつか非最適になってしまう
かといってバグがいつ解消するかは分からない
という問題がありますね
前へ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 次へ
/ 要望・削除依頼は掲示板へ / 管理情報はtwitterで / 
JavaScript スレッド一覧へ類似してるかもしれないスレッド
- + JavaScript の質問用スレッド vol.113 + (1001) - [97%] - 2014/1/25 12:46
- + JavaScript の質問用スレッド vol.118 + (1002) - [97%] - 2014/8/29 22:30
- + JavaScript の質問用スレッド vol.116 + (1002) - [97%] - 2014/7/1 0:45
- + JavaScript の質問用スレッド vol.115 + (1001) - [97%] - 2014/5/29 16:16
- + JavaScript の質問用スレッド vol.113 + (1001) - [97%] - 2014/3/15 21:30
- + JavaScript の質問用スレッド vol.119 + (1002) - [97%] - 2014/10/3 15:30
- + JavaScript の質問用スレッド vol.112 + (1001) - [97%] - 2013/11/27 16:46
- + JavaScript の質問用スレッド vol.111 + (1001) - [97%] - 2013/11/4 6:00
- + JavaScript の質問用スレッド vol.110 + (1001) - [97%] - 2013/10/13 14:01
- + JavaScript の質問用スレッド vol.134 + (1001) - [97%] - 2018/8/3 23:15
- + JavaScript の質問用スレッド vol.117 + (1009) - [97%] - 2014/8/5 3:30
- + JavaScript の質問用スレッド vol.104 + (1001) - [97%] - 2013/1/28 4:00
- + JavaScript の質問用スレッド vol.124 + (1001) - [97%] - 2015/7/16 1:30
- + JavaScript の質問用スレッド vol.144 + (288) - [97%] - 2020/5/17 20:00
- + JavaScript の質問用スレッド vol.121 + (1001) - [95%] - 2015/1/1 18:30
- + JavaScript の質問用スレッド vol.120 + (1002) - [95%] - 2014/11/8 1:15
- + JavaScript の質問用スレッド vol.122 + (1004) - [95%] - 2015/2/14 4:45
トップメニューへ / →のくす牧場書庫について