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

2021/11/10(水) 15:24:24.80

JavaScript を自ら学ぶ人のための質問スレッドです。
>>2-6のテンプレを読んだ上で質問してください。次スレは>>950が>>2のテンプレ案(本スレで改善案があれば考慮)を元に立ててください

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

※前スレ
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/

VIPQ2_EXTDAT: checked:vvvvvv:1000:512:: EXT was configured

2021/11/29(月) 15:41:30.31

クロージャ使えば普通にできるやろ
それに参照型ならaddEventListenerした後からでも値を変えられるよ

2021/11/29(月) 18:56:58.07

var か

2021/11/29(月) 20:17:26.02

>>135
オブジェクトを束縛すれば、プロパティは固定されない(>>129)
handleEventも使ってみればその有用性に気がつくと思うが

2021/12/04(土) 12:18:05.48

読み込みたいファイルのパスだけがわかっている場合に

reader= new FileReader();
reader.readAsText("aaa/hoge.csv") ;

みたいな感じで読み込もうと思ったんですが、
readAsTextの引数はblobだかfileオブジェクトでないとだめみたいで、
レファレンスを読んで見るも、
パスからblogだかfileオブジェクトだかを作成する方法がわかりませんでした。

ファイル読み込み自体は他の方法を使ってできるものの、
FileReaderとreadAsTextの組み合わせを使ってトライしてみたいので
どなたかアドバイスお願いできますでしょうか

2021/12/04(土) 12:36:24.21

>>139
それが出来たら、ファイルの情報を盗み出せるようになるな

2021/12/04(土) 12:48:45.94

>>140
例えばxmlhttpRequest()でもパスからファイルを読み込むことが出来るので
FileReaderでそれが出来ないのは不思議な気になるんですがそういうものなんですかね

2021/12/04(土) 14:35:37.60

むしろ他の方法とやらが気になる

2021/12/04(土) 14:36:47.65

>>141
xhrは基本的にhttp接続しか出来ない

2021/12/04(土) 16:15:20.01

とりあえずリファレンス読め
https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

2021/12/07(火) 11:51:05.11

ガチでヌーブなんですけどrequestsとbeautifulsoupでスクレイピングやってます
waitかけないとバンされるよと言われましたがどうすればいいですか？
requests.get()でtimeoutは今書きましたがforで同じサイトの似たようなページに何度もアクセスするのでサーバーへの負荷はすごいと思います
これに対してどうすればいいですか？

2021/12/07(火) 11:56:58.02

>>145
マルチ禁止

2021/12/09(木) 15:07:14.43

const test = [
{main:"A"},
{main:"B"},
{main:"C"}
]
から全てのmainをとり出した["A","B","C"]となる配列を作りたいです
forを使えば作れますが、もっと簡単に作れる便利なメソッドあったりしますか？

2021/12/09(木) 15:32:51.58

const test = [
{main:"A"},
{main:"B"},
{main:"C"}
]

let testB = test.map(e=>e.main)
知っててコレジャナイ方法をきいてるのかもしれないけど

2021/12/09(木) 15:38:12.28

>>148
自分もそれやってたけど不可能なので質問しましたが
どうやらqueryselectorAllにmapが効かないっていうのが原因だったみたいです
すんません

2021/12/09(木) 15:51:07.69

許して下さい…

2021/12/09(木) 16:09:45.62

querySelectorAllの戻り値はArrayではなくNodeListだからね
hoge = Array.from(test).map(e => e.main);

2021/12/10(金) 03:36:53.73

hoge = Array.prototype.map.call(test,e => e.main);
とか

2021/12/10(金) 20:33:15.32

Pythonの

2021/12/10(金) 20:34:21.58

PythonのコードですがどなたかJavascriptに直して下さい…

sorted(pts, key=clockwiseangle_and_distance)

import math

pts = [[2,3], [5,2],[4,1],[3.5,1],[1,2],[2,1],[3,1],[3,3],[4,3]]
Origin = [2, 3]
refvec = [0, 1]

def clockwiseangle_and_distance(point):
　vector = [point[0]-Origin[0], point[1]-Origin[1]]
　lenvector = math.hypot(vector[0], vector[1])
　if lenvector == 0:
　　return -math.pi, 0
　normalized = [vector[0]/lenvector, vector[1]/lenvector]
　dotprod = normalized[0]*refvec[0] + normalized[1]*refvec[1]
　diffprod = refvec[1]*normalized[0] - refvec[0]*normalized[1]
　angle = math.atan2(diffprod, dotprod)
　if angle < 0:
　　return 2*math.pi+angle, lenvector
　return angle, lenvector

2021/12/11(土) 11:19:38.29

すんません

var hoge = test(); //←2個入った配列が返ってくるヤツ
var A = hoge[0];
var B = hoge[1];

って書いてます。
これもーちょっとカッコよく

var A B = test();

って感じで一行でAとBに変数に入れる方法とかあります？

2021/12/11(土) 11:55:24.52

var hoge = [1,9];
var [A,B] = hoge;

2021/12/11(土) 11:56:54.19

>>156
うおーすげー天才
ありがとうございます！

2021/12/12(日) 17:05:57.60

var obj={
key:{x:200,y:300}
}
obj.key2=500;
alert(obj.key2);
alert(obj.key.x);
上はオブジェクトで下はオブジェクトのオブジェクトです。
実行結果は上が500で下が200です。
一応動作はしますがこのような使い方は間違っていますか?

2021/12/12(日) 18:15:54.15

>>158
「間違っている」は「期待する動作」によって決定される
それをあなた自身しか知らないので、第三者による判断は不可能

2021/12/12(日) 18:40:13.36

>>159
文法的にはどうですか？

2021/12/12(日) 19:22:12.57

>>160
文法は他人に聞くまでもない
コンソールにSyntaxErrorが出力されていなければ、文法的に問題ない

2021/12/12(日) 20:06:45.86

何に引っかかってるのか書かないと期待してる答えは返ってこない
特に変なところないし

2021/12/13(月) 08:42:46.82

引数が多い場合の引数の渡し方について
function(
aaa,
bbb,
ccc,
・・・（略）
zzz
){}
って書くより
function(obj){
var aaa = obj.aaa;
var bbb = obj.bbb;
・・・・・（略）
var zzz = obj.zzz;
}
って書く方がいいんでしょうか？
どっちもメリット、デメリットはあると思うけど

2021/12/13(月) 13:06:28.94

>>163
何でこう無条件に善し悪しを求めようとするかね
メリット、デメリットがあるなら、どちらが良いと決めつけることは出来ないと判断出来ないものなのか

2021/12/13(月) 15:27:20.29

下のほうなら
const f = function({aaa, bbb, zzz}){
console.log(aaa, bbb, zzz);
}
のほうが分かりやすくないか
const o = {
aaa: 'あ',
bbb: 42,
zzz: 'ん',
};
f(o);

2021/12/13(月) 18:56:15.12

>>136
形だけひとまとめにしても後でバラすんじゃなんの意味もない
objとかじゃなくて意味のある名前が付けられる範囲でまとめるべき

2021/12/13(月) 18:56:54.87

>>166は>>163あて

2021/12/14(火) 13:31:35.06

var str="ｘ^2 + (x+2)^2 - (x*(x-2))^3";
をMath.pow(x,2)+Math.pow((x+2),2)-
Math.pow((x*(x-2)),3)に置換するにはどうやればいいんですか?

2021/12/14(火) 15:01:16.14

Math.powを使わなければ簡単なんだけどね

eval(str.replace(/\^/g, '**'));

2021/12/14(火) 15:08:13.94

スペース含まない半角文字列限定。式の文字列つくるまで。
賢い人ならもうちょっとスマートに書けるかと。

var str="x^2+(x+2)^2-(x*(x-2))^3";
function func(s){
var s2=s.split('^');
var s3=s2[1].replace(/¥d+/,"");
return "Math.pow("+s2[0]+","+s2[1].replace(/[^¥d]/,"")+")"+s3;
}
var result=str.replace(/[a-z¥(¥)¥d¥*¥+¥-¥/]+¥^¥d+([¥+¥-¥*¥/]|$)/g,func);

2021/12/14(火) 18:05:48.23

>>169
そうやった方が簡単そうですね
>>170
ありがとうございます

2021/12/15(水) 19:13:45.77

いつもはreplaceやmatchを使うんだけど、
execってのがキャプチャグループだけを簡単に抜き出せて便利そうだから使ってみました

txt="AabBxxB";

pattern = /A(.*)B/;

d=pattern.exec(txt);

alert(d[1]);

期待する結果はab

でも実際はabBxxが返ってきます、後方参照ってやつですか？一番後ろのものとマッチしてしまう
これって最短距離でのマッチを取得するにはどうすれば良いんでしょうか？

2021/12/15(水) 19:19:59.60

.*?

2021/12/15(水) 19:20:26.59

ぱっとしかみてないけど
pattern = /A(.*?)B/;

2021/12/15(水) 19:22:08.15

A([^B]*)B

2021/12/15(水) 20:16:03.92

( ^)o(^ )b

2021/12/15(水) 20:34:33.03

>>173
>>174,175
ありがとうございます
なるほど、*も+も?も単体で使うと最長一致になるけど
*?とか+?みたいに組み合わせて使うと最短一致になるんですね、ややこしい…

2021/12/16(木) 20:22:00.71

>>177
その通りだが、一文字ならバックトラックが発生しない最長一致がいいと思う >>175

2021/12/22(水) 17:33:35.08

【環境】Windows 7 64bit, IE11
【何をしたのか】
$("form")で取得している内容が自分の考えと正しいかを確認したい
1. alert($("form")) → [object Object]と表示される
2. alert(JSON.stringify($("form"))) → IEが動作を停止しましたで強制終了
【エラーメッセージ】-
【期待する結果】
$("form")の中身が確認したいです
手段は選びません
console.log()は試していませんがshowModalDialogにて新規で開かれるウィンドウが描画されるまでに行われる処理のようで、コンソールを開く前に終わってしまうためalertで今は試しています
【サンプルコード】
$("form").attr("name");

2021/12/22(水) 17:43:33.97

>>179
自分は取得しているものが<form 〜>であると思っています
なのでHTMLが確認したいです

2021/12/22(水) 18:34:04.36

試してみたらfirefoxだと強制終了しないね
IEは消したからわからん

2021/12/22(水) 20:25:41.33

>>179
試してないconsole.logやconsole.dirでいいと思うが、まず試してみては？
コンソールはモーダルウインドウが開いてなくても関係ない

あなたがほしいのは$("form")[0]な気はするが

2021/12/22(水) 20:33:32.43

モーダルウインドウ上でコンソール出力しようとせず、モーダルウインドウを開くページから参照するとか、breakpointで止めるとか、モーダルウインドウを閉じるコードを一時的にコメントアウトするとか

モーダルウインドウを使わないのが一番だが
、Win7を使ってるならインターネットに接続してないのだろうし、相当特殊な環境だな

2021/12/22(水) 22:15:47.78

>>181-183
ありがとうございます

>>182,183
お察しの通り過去に作られたIE用のシステムをEdgeに対応する必要があり、
現時点では当時の開発環境(VS2012)でデバッグ実行しています
JavaScriptに関わるのが初めてでとにかく動かして覚えようとしているところです
$("form")[0]は明日試してみます

console.logなどを試していない（諦めた）理由は、
動作として、親ウィンドウからshowModalDialogで子ウィンドウを開く
→子でデータを選択する→親に選択したデータが入力されるという流れになっており、
親画面でF12のコンソールを開いておいても子が開かれるとモーダルにより親画面のコンソールも触れない
ので諦めたんですが、もしかしてピン止め外すと止まらないんですかね？
ピン止めした状態でしか動かしてなかったので明日試してみようとおもいます

>モーダルウインドウを開くページから参照するとか、
ウィンドウ間のやりとりがまだよくわからないのでその発想に至れませんでした

>breakpointで止めるとか、
showModalDialogで開いた後に処理される関数に貼ってみたんですが
張っていないshowModalDialogの行で止まって、関数の中をステップ実行できなかったんですよね…
関数の最初にdialogArgumentsを参照してifで分岐するんですが
showModalDialog以外で呼ばれるときはステップ実行できるのでそういうものなのかと諦めました

>モーダルウインドウを閉じるコードを一時的にコメントアウトするとか
その発想はなかったです
今後のデバッグに使ってみます

ひとまず、$("form")[0]とピン止めを試してみます

2021/12/27(月) 21:01:36.58

html5のcanvasについて質問です
drawImageでこの画像をcanvasに描写した後、画像の白い部分だけを赤くマスクしたいです
https://illust8.com/wp-content/uploads/2018/08/icon_mail_illust_924.png

ctx.globalCompositeOperation = 'destination-in';
や
c2.globalCompositeOperation = 'darken';
を使うとオシイのですが、どうしても黒い箇所が赤くそまってしまったり、明るい方が優先されてしまったりします
何か良い手はないでしょうか？

2021/12/28(火) 10:31:30.75

今後はclassが標準になるの？

2021/12/28(火) 10:36:46.52

JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。

そのため、以前できなかったことは、今でもできません。

クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、誰にとってわかりやすいかいまいち不明。
prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。

class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、勉強にならないですね。
でも理解したら、わざわざclassを使う必要がない気がします。

使いたければ使えばいいんじゃない？と思います。

2021/12/28(火) 12:53:44.91

>>186-187
自問自答？
使いたくなければ使わなければいいと思うが、定期的にネガキャンするのは無駄なので、止めて欲しい
>>82,110

2021/12/28(火) 13:05:03.77

JavaScriptのクラスは、内部的にはsuperキーワードが追加された以外は以前と変わっていません。
そのため、以前できなかったことは、今でもできません。
クラス定義を使えば、わかりやすいコードを作れるという意見もありますが、
誰にとってわかりやすいかいまいち不明。
prototypeを隠蔽しているので、初心者がJavaScriptの本質を理解しにくくなる気もします。
class構文は内部でどんな置き換えをしているのか、ということを理解してからでないと、
勉強にならないですね。
でも理解したら、わざわざclassを使う必要がない気がします。

2021/12/28(火) 13:28:00.05

>>179
const form = $( 'form' )
console.log( form.length, form[ 0 ] )

HTML 内に、フォームが1つしかないなら、
form.length は1 で、form[ 0 ] でform 要素を取得できる

<form action="" id="form_1" name="form_1">
みたいに、id を付けた方が良いかも

そうすれば、これで取得できる
const form_1 = $( '#form_1' )

まあ、HTML, JavaScript, jQuery の質問は、
この板よりも、web制作管理板の方へ書き込んでください

向こうのスレが、本スレです

2021/12/28(火) 13:30:12.08

今は、class を使う

今さら、prototype を使う人は、いない

2021/12/28(火) 13:50:08.36

>>191
内部構造が分かりにくい。

2021/12/28(火) 14:58:53.60

ワイにとってはclassのほうが分かりやすいかな

2021/12/28(火) 16:37:46.66

すごい。
みんな頭いいんだな。

2021/12/28(火) 17:14:08.11

まあな

2021/12/28(火) 18:05:32.60

中がprototypeだとか別に関係ないだろう。外から見てclassとして振舞うならそれでいいわけだし。
classとしての振る舞いに何か問題があるならそこは注意すべきだが。

2021/12/28(火) 19:24:57.81

みなさんjavascript何年目？
オレは2年。

2021/12/31(金) 00:19:23.87

　昼食が3億!?AppleCEOや投資の神様とのランチ権オークションがすごい

スティーブ・ジョブズが亡くなった後にAppleのCEOになったのがティム・クック氏です。
そんな彼との1時間のランチ権が今年4月から5月にかけてCharitybuzzというオークションサイトに
出品され、$515,000（約5,150万円）で落札されました！
実はクックは過去にも同様の出品をしていて、今年の出品で4回目となります。

2000年からこれまでに計17回出品されているのが、「投資の神様」とも呼ばれるウォーレン・バフェット氏
とのランチミーティング権。2003年からは、世界最大級のオークションサイト「eBay」で毎年開催される
チャリティー・オークションのひとつとして出品されています。
今年6月に出品された際には、なんと$3,456,789(約3億4,568万円)で落札されました！　

2022/01/02(日) 11:53:11.76

fc2ブログを使用しているのですが、javascriptが動かない設定などあったりするのでしょうか？
<script type="text/javascript">alert("hoge");</script>

また、動かない原因をブラウザの検証から調べる事はできますか？

2022/01/02(日) 12:00:54.33

自己解決　すみませんす

2022/01/03(月) 10:30:02.94

文字数の制限をしたいのですが、htmlでoverflow hiddenするのとjsでカットするのはどちらがいいんでしょうか？
ブログのトップページなんですが、本文の１部を表示させておいて、続きを読むというリンクを設置したいなと。
<div id="text">１２３４５６７８９</div>

<script>
let text = document.getElementById("text");
let inner_text = text.innerHTML;
let text_length = inner_text.length;
let max_length = 5;
if(text_length > max_length){
console.log("5文字超えてます");
text.innerHTML = inner_text.substr(0,max_length);
}
</script>

これで動きはしましたけど

2022/01/04(火) 19:09:00.18

x=<span id="x">0</span>,y=<span id="y">0</span>

<p>　</p>
<div style="text-align:center">
<canvas id="canvas"></canvas>
</div>

<スクリプト>
var canvas_elm = document.getElementById("canvas");
var x_elm = document.getElementById("x");
var y_elm = document.getElementById("y");

var context = canvas_elm.getContext("2d");
canvas_elm.width = 600;
canvas_elm.height = 500;

context.fillStyle = "#0000ff";
context.fillRect(0,0,canvas_elm.width,canvas_elm.height);

canvas_elm.addEventListener(
"mousemove",
function(e){
x_elm.innerHTML = e.offsetX;
y_elm.innerHTML = e.offsetY;
}
);
</スクリプト>

canvas上でのマウスやタッチポインターの座標を表示したいんですけど、、PCではこれで座標が表示されるけど
mousemoveをtouchmoveにしてchromeでF12キーを押してスマホモードにしてタッチポインターを動かしたときxy座標がundefinedと表示されてしまいます。
スマホモードでもポインターの位置を表示できるようにするにはどうやればいいんですか？

2022/01/04(火) 19:25:07.68

スマホなど、色々なデバイスに対応させるのは、
React, Vue.js などのフレームワークを使うのでは？

それと、JavaScript の質問は、この板よりも、
web制作管理板の方へ書き込んでください！

この板のスレは、荒らしが出て、緊急避難用に立てたものだから

2022/01/04(火) 19:34:13.24

>>201
Ruby on Rails では、続きを読むのは、truncate(文字数)。
Railsがどういう実装をしているかまでは知らないけど

npm とか、Lodash とかに、そういう関数が無いのか？

「javascript 続きを読む」「css 続きを読む」で検索してみれば？

2022/01/04(火) 20:53:53.77

>>202
タッチイベントにはevent.offsetX, event.offsetYはありません
event.changedTouches[0].pageX等から計算してください

2022/01/04(火) 22:55:40.12

そうなんですか
ありがとうございます

2022/01/05(水) 10:08:51.69

>>206
どう致しまして。

2022/01/06(木) 12:37:03.20

質問１　element.addeventlistnerとdocument.addeventlistnerの違いは？
質問２　
function(elm){
elm.addeventlistner(
"click",
function(e){alert("クリック");}
);
}
のような関数がある場合document.addeventlistnerの場合はelementがないので個別に関数作らないとだめなのか？

2022/01/06(木) 12:51:53.90

外側・親に、イベントを付けて、親で、子のイベントをキャッチできる。
jQuery で書いた

<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>

// 外側・親に、イベントを付けて、親で、子のイベントをキャッチする

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

この板よりも、web制作管理板の方へ書き込んでください！
そちらの方が、本スレです

2022/01/06(木) 13:04:40.48

>>208
1. 対象要素が違うだけ。バブリングによって「あらゆる要素」のイベントをトラップしたい場合は後者を使うといい（一般的には普通は比較的近いコンテナ要素でトラップするもんだが...）
2. その関数なら共通でOK

>>209
本当に誘導したいなら、せめてリンクを貼りましょう

2022/01/06(木) 14:19:29.65

このスレで質問しても何の問題もありません
荒らしやアフィリエイト宣伝業者に騙されて誘導されないようにしてください

2022/01/06(木) 15:06:56.73

>>208
回答1
event.currentTargetが異なる

回答2
e.targetを確認すれば良い

2022/01/06(木) 15:09:56.94

>>209
Web制作板でも次スレが立たず、旧スレを再利用してる状態
本スレなど存在していない

本気で本スレに誘導したいなら、最新スレを探して次スレを立てて保守すべき
それぐらいの情熱がある人はもういないと思ってたが、あなたがそうしたいのなら止めはしない

**209** (ﾜｯﾁｮｲ 0f2c-4nvB [153.136.94.40]) · 2022/01/06(木) 16:09:40.84

この板のスレは元々、web制作管理板が荒らされた時に、緊急避難用に立てられたもの。
本スレは、向こうの方

この板は荒らしが多い

荒らしは短文で、必ず2回書き込む。
複数回書き込むことで、多くの人が書いているように見せる

それと、テンプレをしょっちゅう、自分が有利なように書き換える

Python のスレのテンプレとか、ひどい。
NGワードは何々とか、しょっちゅう書き換えている

まあ、ソースコードを書かない香具師は、
プログラマーじゃないから、相手にしない方がよい

2022/01/06(木) 21:02:16.03

window.onload = function(){
}
このfunctionって何の意味があるんですかね？

2022/01/06(木) 21:09:14.63

中の変数とかを外から見えなくしてるんじゃない？

2022/01/06(木) 21:28:50.56

>>215
変数 = function() { ... }
で関数式(無名関数)っていう形で定義できる

関数式についての説明はこの辺を参照
https://ja.javascript.info/function-expressions
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions

で、window.onload = function() { ... }
っていう風に実装すると、少し特殊な動きになって
HTMLを完全に読み込んだタイミングで、関数の中身を実行するっていう動きになる
https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onload

(他言語だとあんまり見ない書き方だから混乱するかもしれんけど）

2022/01/06(木) 21:52:51.91

https://www.youtube.com/channel/UC9UsyidyKO-s6K8sgWKmE2w

2022/01/07(金) 07:23:20.82

>>217
変数に関数を入れられるんですよね。
処理を直には入れられないから、関数で包むとイメージなんでしょうかね。

2022/01/07(金) 13:51:45.20

<div class="content">

<h2>header2</h2>

<h2>header2-2</h2>

<h2>header2-3</h2>

<h2>header2-4</h2>

</div>

<script>

let content = document.getElementsByClassName("content");

let all_element = content.querySelectorAll("h2");

console.log(all_element);

</script>

gebcnで取得したターゲットにqueryselectorは使えないんでしょうか？
idで取得したものなら可能なんですけども。

2022/01/07(金) 14:27:21.79

>>220
contentはgetElementsでHTMLCollectionをとってるので
content[0]とかにすればでるんじゃない？

2022/01/07(金) 18:28:49.81

>>221
返り値が違うんですね。
要素だけを取ってくるもんだと思っていました。

ありがとうございます。

2022/01/07(金) 18:31:00.59

エレメントしかいらないのならid使ったほうが良いみたいですね

2022/01/07(金) 18:36:46.10

document.querySelectorAll(".content > h2");
でよくね？

2022/01/07(金) 20:54:20.38

こういった場合クラスを使うんでしょうか？
cssではidは出来るだけ使わないということになっているらしいですが

2022/01/07(金) 21:09:58.61

できるだけ使わないというか詳細度に関わる
1ページ一回というユニークルールもcss使い回しに不向き

2022/01/08(土) 05:37:14.84

classnameでやってみますです

2022/01/08(土) 05:41:40.78

>>224
そうやって書けるんすね
html collectionの構造がよくわからんくて

2022/01/08(土) 05:48:14.75

>>224
いや、これだめでしたね
nodelistは帰ってきますけど、h2はとれてないです

2022/01/08(土) 05:55:36.78

全てconstでOK

2022/01/08(土) 07:52:36.25

Android10 F-51A
Chrome 93.0.4577.62

ブラウザ上での画像についての質問です。
画像自体は恐らく読み込めているようなのですが、全く映らないか、映っても一瞬で消えてしまいます。
エラーメッセージは出ません。
ファイルマネージャーというアプリから起動すると、正常に動作します。

考えられる原因、解決案は、例えば何があるでしょうか。
絶対パスというものなら出来るかと思ったのですが、自分のやり方が悪いのか、上手く行きませんでした。

2022/01/08(土) 09:00:28.06

>>229
最初の一個だけでいいなら
let all_element = document.querySelector(".content h2")

2022/01/08(土) 09:52:41.58

>>231
情報が少なすぎて詰めきれません。もう少し詳細な情報を提供できませんか？
（まず、JavaScriptはどのように使用していますか？）

2022/01/08(土) 10:15:27.19

>>233
スマホアプリの「QuickEdit」というテキストエディタで制作しています。

そういう意味じゃなかったらごめんなさい。

$Game_Image_Data = [];
$Game_Image_Data[0] = new Image(); $Game_Image_Data[0].src = "image/player.png";

これで「$Game_Image_Data[0].src」をアラートで出力すると、こうなります。

https://i.imgur.com/FzEkdyk.jpg

2022/01/08(土) 14:43:01.70

>>232
どうも。今回はindex使うことにしてみます。