+ JavaScript の質問用スレッド vol.126 +

1 ：Name_Not_Found：2015/08/08(土) 12:43:43.71 ID:???.net

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-4のテンプレを読んだ上で質問してください。

■質問を書く上で
(1) 煽り、コード制作依頼等、人を不快にさせる投稿はご遠慮下さい。公序良俗を守った応対を心がけてください。
(2) 他の人に迷惑をかけるスクリプトの質問はご遠慮ください。
　　(ブラクラ、[戻る], [閉じる], [クリック] の妨害、画面占有など)
(3) 質問者及び議論を行う人はメール欄を空欄にし、名前にレス番を入れることを強く推奨します。回答者はなりすましを判断できませんので、なりすましが現れても自己責任となります。
(4) 常に自発的に調べる心構えを持ってください。
　　具体的には「自分で調べてから質問する」「回答をもらってわからない単語があればGoogle検索してみる」など。
　　わからない内容を代わりに調べてくれる回答者をお望みの方は余所で質問してください。
(5) 出来るだけ一般的な用語を使用してください。脳内オレオレ用語は混乱の元です。
(6) 出来るだけサンプルコードを掲示してください。言葉による説明は行き違いが生まれる場合があります。
　　※必ず「問題の事象が再現されること」を確認してください。
　　　必要な部分だけ切り出したつもりで現象が再現できていなかったケアレスミスがしばしば見られます。
(7) サンプルコードに HTML が含まれる場合は http://validator.w3.org/ で [Check] してみてください。
(8) 質問を具体的かつ詳細に書くと回答を得られやすいです。>>2の質問テンプレートを活用してみてください。
(9) 時にはあなたが望む「答え」だけでなく、「意見」などが寄せられる場合もあります。

383 ：Name_Not_Found：2023/04/03(月) 22:36:04.36 ID:???.net

>>382
そもそもTypeScriptを書こうとしてるわけじゃないのになんでtsエラーが出てるの？ってこと
vscode右下の言語モードがTypeScriptになってるんじゃないの？

384 ：Name_Not_Found：2023/04/03(月) 23:01:10.11 ID:???.net

>>383
なってないです。拡張機能も無効です。
i.imgur.com/TE6gwcY.jpg

385 ：Name_Not_Found：2023/04/03(月) 23:26:56.16 ID:???.net

>>384
うちではTSでは出るけどJSでは出ない
https://i.imgur.com/TJimdvc.png
https://i.imgur.com/kj2oMNk.png
おそらく何かvscode側の問題だろう
で、エディタの問題ならなおさらfruit.valueで解決とするのは悪手

386 ：Name_Not_Found：2023/04/03(月) 23:39:06.45 ID:???.net

>>384
わかった、vscodeの設定に↓があるんじゃない？
"js/ts.implicitProjectConfig.checkJs": true
これ追加したらうちでもJSでエラー出た

387 ：>>380：2023/04/03(月) 23:48:50.00 ID:???.net

>>385 >>380
原因が判明しました。"js/ts.implicitProjectConfig.checkJs"がtrueでした。
型のチェックはしたいので、event.target.valueの上に@ts-ignoreを書いて解決します。
ありがとうございました。

388 ：>>380：2023/04/03(月) 23:51:00.10 ID:???.net

>>386
まさにそうでした。ありがとうございました。

389 ：Name_Not_Found：2023/04/04(火) 00:27:18.41 ID:???.net

jQuery では、event.target.value でも、正常に動く

<div id="btn-wrap">
<button class="BtnA BtnAll" value="1">A-1</button>
<button class="BtnA BtnAll" value="2">A-2</button>
<button class="BtnB BtnAll" value="3">B-3</button>
</div>

<div id="btn-wrap-2">
<button class="BtnC BtnAll" value="11">C-11</button>
</div>

$( function ( ) {
// 外側・親に、イベントを付けて、親で、子のイベントをキャッチする
$( '#btn-wrap' ).on( 'click', function ( event ) {
const value = $( event.target ).prop( 'value' )
console.log( value )
alert( value )
} );

$( '#btn-wrap-2' ).on( 'click', function ( event ) {
console.log( event.target.value )
alert( event.target.value )
});
} );

390 ：Name_Not_Found：2023/04/04(火) 00:53:07.21 ID:???.net

>>387
@ts-ignoreもなんか負けたみたいでいやだけども調べてみてもいい解決策はなさそう
致し方なしかな

>>389
正常に動くかどうかの話はしてないよ
よく読もう

391 ：Name_Not_Found：2023/04/04(火) 10:04:45.82 ID:???.net

fruitがHTMLSelectElementなのは確定してるから
event.currentTargetがHTMLSelectElementであることは推定できそうだな
event.target じゃなくて event.currentTarget にしたらどうなるかね

392 ：Name_Not_Found：2023/04/04(火) 10:48:34.90 ID:???.net

>>387
型チェック入れるとか
if (null === event.target || !(event.target instanceof HTMLSelectElement)) { return; }
キャストするとか
console.log(/** @type {HTMLSelectElement} */ (event.target).value);

393 ：Name_Not_Found：2023/04/04(火) 11:43:11.41 ID:???.net

>>392
そのへん少し試したけどうまくいかなくて諦めてた
致し方なしとか言う前にもう少し手を尽くすべきだった
反省

394 ：>>380：2023/04/04(火) 19:16:22.79 ID:???.net

>>391
currentTargetもts(2339)が発生します

>>392
元々、nullチェックは'event.target' は 'null' の可能性があります。ts(18047)のエラーを消すために入れていたのですが、
条件を!(event.target instanceof HTMLSelectElement)に書き換えてもts(18047)とts(2339)は発生しないので、解決しました。
JSDocコメントでのキャストは気づきませんでした、こちらが適している場面があればこちらも利用していきます。ありがとうございました。

>>390 >>393
そうなんです、@ts-ignoreを使用している行で他のエラーが出た時に気づけなくなるので、あまり使用したくないです。
遅い時間までお付き合いいただき、ありがとうございました。

ところで、event.targetの代わりにfruitを使用すべきではない明確な理由はないが、event.targetを使用するのが(通常|普通|無難)である。ということで合っていますか。

395 ：Name_Not_Found：2023/04/04(火) 22:54:34.70 ID:???.net

1つのイベントハンドラが複数の要素に対して設定されることは一般的で、その場合はevent.targetを使うことになる
今回のケースはそうでないにしても、可搬性や拡張性を考えれば常にevent.targetを使用しておくという判断は妥当だろう
あと処理結果は同じでも、イベントの起こった要素に対して処理をする、という意図をコードに残す意味もある

いずれにしろ現時点のそのコードだけを考えるならお好きなように

396 ：>>380：2023/04/05(水) 00:34:18.58 ID:???.net

>>395
確かに以下のような場合にはEvent.targetを使う必要があるし、「意図をコードに残す」にとても合点がいきました。
<button data-x="1">btn1</button>
<button data-x="2">btn2</button>
const btns = document.querySelectorAll('button');
for (const b of btns) {
b.addEventListener('click', e => console.log(e.target.dataset.x));
}

397 ：389：2023/04/05(水) 10:13:44.20 ID:???.net

>>389
に書いた

複数のコントローラーに、イベント登録する場合、
外側・親に、イベントを付けて、親側で子のイベントをキャッチする

398 ：Name_Not_Found：2023/04/05(水) 11:14:44.19 ID:???.net

このjQuery信者は文脈や論点ってものを全く理解しないのな
jQueryでは～jQueryなら～ってただただ念仏を唱えて布教に励む様子がまさに信者

399 ：Name_Not_Found：2023/04/05(水) 13:56:33.20 ID:???.net

Slickで出来てSwiperでできないようなアニメーション処理って何かある？

400 ：Name_Not_Found：2023/04/06(木) 13:40:22.56 ID:???.net

Mathjaxって配列環境でcolspan, rowspanって使えないのか？
\multicolumnというべきか

401 ：Name_Not_Found：2023/04/13(木) 11:04:39.61 ID:08KgWRFK.net

JavaScript でローカルファイルを読み書きするにはどうすればいいでしょうか？
fetchという関数が使えるかと思ったんですが、blocked by CORS policy というエラーになってしまいます。

402 ：Name_Not_Found：2023/04/13(木) 14:00:39.10 ID:???.net

CORS(Cross-Origin Resource Sharing)制限は、
ローカルPC 上に、何かのサーバーを立てて、そこから配信すれば良い

VSCode の拡張機能、open in browser では、
file:/// から始まるローカルファイル・アクセスだから、CORS制限あり
file:///C:/Users/Owner/Documents/test.htm

一方、Live Server では、サーバーを立てているから、CORSにならない
http://127.0.0.1:5500/test.htm

同様に、コマンドプロンプト・PowerShell から、
1-liner で、Ruby で作られた遅いウェブサーバー、WEBrick を起動すると、
ruby -run -e httpd . -p 8080

これも、サーバー経由だから、CORSにならない
http://localhost:8080/test.htm

403 ：Jun：2023/04/26(水) 01:05:22.69 ID:2ly3VJ6h.net ?2BP(0)

sssp://img.5ch.net/ico/nida.gif
JavaScriptで電卓を作るよ。

404 ：Name_Not_Found：2023/04/27(木) 09:25:37.76 ID:???.net

ChatGPTを使って

405 ：Jun：2023/04/27(木) 23:52:36.98 ID:qkYl27sL.net ?2BP(0)

sssp://img.5ch.net/ico/nida.gif
JavaScript + HTML + CSS で電卓やホームページを作るのが今の目標です。

406 ：Name_Not_Found：2023/05/09(火) 15:14:09.97 ID:???.net

マイナーな質問

XyJaxで、一括して文字色を変える方法教えてくれ

\color{red}を使っても、その箇所だけしか変更できない。
\xymatrix環境内全部の文字色を変えたい

407 ：Name_Not_Found：2023/05/10(水) 19:05:11.90 ID:???.net

>>406自己解決

408 ：Name_Not_Found：2023/06/16(金) 12:40:56.37 ID:???.net

こんにちは。
誰か教えてください。

<style>
.def { color: red;}
</style>

<div>
<p class="abc">aaa</p>
</div>
<div>
<p class="abc">bbb</p>
</div>

<script>
dif = document.querySelectorAll('.abc');
dif.forEach(element => document.querySelector("div").classList.add("def"));
</script>

このようなコードですが、実行すると1つめのaaaを囲ってるdivにしかclassが追加されません。
条件にあるすべてのdivに追加するにはどうすればいいのでしょうか？

409 ：Name_Not_Found：2023/06/16(金) 14:16:25.94 ID:???.net

>>408
document.querySelectorAll('.abc').forEach(element => element.closest("div").classList.add('def'));

410 ：Name_Not_Found：2023/06/16(金) 14:24:00.49 ID:???.net

>>409
レスありがとうございます。
closestなんてものがあるのですね。知りませんでした。
おかげで思うように行きました。
ありがとうございます。

411 ：Name_Not_Found：2023/06/16(金) 16:50:32.34 ID:???.net

>>408
これでもいけると思う
document.querySelectorAll('div:has(> .abc)').forEach(x=>x.classList.add('def'));

412 ：Name_Not_Found：2023/06/16(金) 16:57:38.56 ID:???.net

これでもいいのかな？間になにか挟まってたらダメだけど
('div >:is(.abc)')

413 ：Name_Not_Found：2023/06/16(金) 17:02:39.12 ID:???.net

>>411,412
こちらもありがとうございます。
大変助かります。

414 ：Name_Not_Found：2023/07/14(金) 05:34:41.98 ID:zlYPgrgm.net

https://jsfiddle.net/um71qgzf/3/
こんな表示状態で、textarea に入力して改行していき、表示可能行数を超えると、スクロール状態になります。
入力された行数に応じて textarea が縦に伸びて、textareaのコンテナにあたる li もそれに応じて縦に伸びるようにするにはどうすればいいのでしょうか？

415 ：Name_Not_Found：2023/07/14(金) 17:33:09.83 ID:???.net

自前でやろうとせずにライブラリ探してきたら？

416 ：Name_Not_Found：2023/07/14(金) 17:53:03.06 ID:???.net

textarea 高さ 自動
でググるとそれっぽいのあったよ

417 ：Name_Not_Found：2023/07/17(月) 03:34:14.72 ID:???.net

SELECTタグで、人物を選択出来るようにしたいのですが、SELECTが非展開の時はIDだけ表示して、
展開した時だけ、IDと人物名が表示されるようにする方法を教えてください。

人物配列
↓
var array =
[
{
"id": 1,
"name": "人物1"
},
{
"id": 2,
"name": "人物2"
}
]


こんな表示にしたいです。
↓
https://i.imgur.com/WWwRHPV.jpg

418 ：Name_Not_Found：2023/07/17(月) 08:04:52.05 ID:???.net

展開したときにどこにID表示されてるの？

419 ：Name_Not_Found：2023/07/17(月) 12:41:46.99 ID:???.net

>>417
一応確認するが、非展開時に数字にする意図は何？
フォーム送信時に数字を送信したいだけなら、尊信値(value属性値)と表示する選択肢(子要素の文字列)を分けて書くだけで良いのだが

420 ：Name_Not_Found：2023/07/19(水) 04:29:50.61 ID:???.net

https://getbootstrap.jp/docs/5.0/components/dropdowns/

Bootstrap 5 のDropdowns のページの一番最後に、
ドロップダウンイベントについて書いてある

show.bs.dropdown/shown.bs.dropdown

このイベント発生時に、表示テキストを入れ替えれば？

421 ：Name_Not_Found：2023/07/25(火) 00:23:24.85 ID:???.net

(-。-)y-゜゜゜

422 ：Name_Not_Found：2023/11/20(月) 22:52:12.45 ID:???.net

何をしていいか分からないな…

423 ：Name_Not_Found：2023/12/12(火) 22:36:34.47 ID:???.net

変数名はキャメルケース(getNameなど)がよく使われるようですが、
スネークケース(get_nameなど)はやはり使わない方がいいですか？

424 ：Name_Not_Found：2024/02/28(水) 02:36:50.61 ID:pCYviIFS.net

https://liveweave.com/6IlWRJ

JavaScriptでスプリッターを作っているのですが、左右を分割するスプリッターをマウスで動かしても、マウスの位置とずれてしまいます。
どのように修正すればいいのでしょうか。

425 ：Name_Not_Found：2024/03/28(木) 04:02:18.18 ID:???.net

>>423
良いか悪いかはさておき

考え方としては
そのコードを、どのくらいの範囲で共有するのか
ってのを基準に考えたらいいと思う

自分だけなら好きにすればいいし
身内だけなら話して決めればいいし
広範囲なら世間一般の流れに合わせるべき

みたいな

426 ：Name_Not_Found：2024/03/28(木) 04:07:49.72 ID:???.net

>>417
すんごい前だけど
似たようなことを頑張ったことある

でもやっぱり
select要素が開いているかどうかを判定出来ないので
原理的に出来なくて

select要素のように振る舞うものを
手作りするのが早かったです

427 ：Name_Not_Found：2024/04/08(月) 00:13:34.85 ID:???.net

今動作しているのがサーバ上（https//:～）なのかローカル（file:///C:～）なのか区別する必要性が出てきました。
locationで取得する以外にいい方法ありますか？
区別さえ確実にできれば得られる値は（true/falseなど）なんでもいいです。

428 ：Name_Not_Found：2024/04/08(月) 12:44:09.64 ID:???.net

>>427
window.location.protocolを見れば良いんじゃないかな
httpかhttpsなら、みたいな

429 ：Name_Not_Found：2024/04/18(木) 13:55:10.68 ID:NjgPbiyX.net

var people = [{
"id" : "ID1", "name" : "人物1", "room" : "1"
}{
"id" : "ID2", "name" : "人物2", "room" : "2"
}]

var select_tag = document.getELementById("my_select");

for ( var i = 0; i < people.length; i++ ) {
var option = document.createElement("option");
option.value = people[i].id;
option.innerText = people[i].name;
my_select.append(option);
}

こういう感じの select を設置して、option が選択された時に、選択された人物の room を取得するにはどうすればよいのでしょうか？

430 ：Name_Not_Found：2024/04/18(木) 17:45:29.04 ID:???.net

>>429
select_tag.selectedIndexに
今選ばれてるoptionが何番目かが入ってるから

select_tagのchangeイベントにフックして
その数字を拾って、people[数字].idを参照したらいいよ

431 ：Name_Not_Found：2024/04/18(木) 17:53:34.56 ID:???.net

ごめん間違えた
people[数字].roomだった
すまんこ

432 ：Name_Not_Found：2024/04/19(金) 02:15:05.41 ID:???.net

>>431
出来ました！ありがとうございます！

select_tag.addEventListener("change", (e) =>{
let i = select_tag.selectedIndex;
alert(people[i].room);
});