JavaScript(6ページ目)

JavaScriptはWebページにアニメーションや効果を加えることができるプログラミング言語です。入門編のわかりやすいサイトや書籍を紹介してほしい、オブジェクト指向がわからない、文字列の操作を教えてほしい等こちらに投稿してみましょう。

回答数

気になる

java ゲーム作り初心者

javaで、色が変わったマスをクリックすると100点加算されていくというゲームを作っています。ここまではできたのですが、連続で成功するたびに100点、200点と加算される点数が増えていくようにしたいです。 function isTouched(x, y) { if (map[y][x] == 1) { map[y][x] = 0; score += 100; highScore = score > highScore ? score : highScore; return true; } else { 　　　score -= 100; return false; } } ここからどうしたらうまくいくでしょうか？

質問日時: 2022/01/22 01:22 質問者: やまう

ベストアンサー

1

1
TypescriptのJavascriptへのコンパイル変換について

教えてください。 Typescriptでプログラム書いたものをコンパイルして見た時に普通のjavascriptと見た感じ変わらないと書かれている記事がありましたが、そうすると何が違うのでしょうか？コンパイルかけられているものはやはり型制御しているのでしょうか？

質問日時: 2022/01/21 16:07 質問者: ymoshimoshi

解決済

2

0
Processing初心者の学生です。今、『画面を4分割し、それぞれの画面をマウスでクリックすると

Processing初心者の学生です。今、『画面を4分割し、それぞれの画面をマウスでクリックすると赤→緑……の画面を繰り返す』という課題が出ていますが、途中でつまづいています。具体的に、上から1、4番目は正常に動くのですが、真ん中の2、3番目がマウスのカーソルがその画面に触れると真ん中だけ両方画面の色が変わってしまいます。 ⤵︎⤵︎⤵︎⤵︎⤵︎⤵︎⤵︎全体のプログラムです。 int switching = 0; void setup(){ size(800,950); background(255,255,255); mouseY = -1; } void draw() { line(0,0, width,0); if(mouseY>0 && mouseY< 240){ if (switching == 0) { fill(255, 0, 0); } else{ fill(0, 255, 0); } rect(0, 0, width, 240); } line(0,240, width,240); if(mouseY>240 && mouseY< 480){ if (switching ==0) { fill(255, 0, 0); } else{ fill(0, 255, 0); } rect(0, 240, width, 480); } line(0,480, width,480); if(mouseY>480 && mouseY< 720){ if (switching ==0) { fill(255, 0, 0); } else{ fill(0, 255, 0); } rect(0, 480, width, 720); } line(0,720, width,720); if(mouseY>720 && mouseY< 950){ if (switching == 0) { fill(255, 0, 0); } else{ fill(0, 255, 0); } rect(0, 720, width, 950); } } void mousePressed() { switching = switching+1; if(switching >= 2){ switching = 0; } } 説明が分かりずらいですが、原因が分かる方がいたらご回答よろしくお願いしますm(_ _)m

質問日時: 2022/01/19 07:43 質問者: もくず。

解決済

1

0
JavaScriptでの、HTML内に表示しているボタンをクリックでイベント実行する方法

現在HTML&CSS、JavaScriptでの構築を行っているのですが、HTML内にボタンを表示して、クリックしてからJavaScriptを実行させたいと考えています。ですが、ボタンクリックの関数などはわかってはいても、どこに書けばいいのかわからず困っています。以下のコード内にボタンをクリックすることでイベント実行できるようなコードの書き方を教えてください。よろしくお願いします。 ※このコード内での実装を考えています。 <!DOCTYPE HTML> <html lang="ja"> <head><title>Sample</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #selects select { width:9em; margin-right:1em; } </style> </head> <body> <div id="selects"></div> <div><ol id="result"></ol></div> <script> { const placeData = [ { title: '市', item: [ {name:'A市', location:[ { lat:0, lng:0, subname:'物件1', image:'a.jpg'}, { lat:100, lng:30, subname:'物件2', image:'b.jpg'} ]}, {name:'B市', location:[ { lat:0, lng:70, subname:'物件4', image:'d.jpg'}, { lat:100, lng:100, subname:'物件5', image:'e.jpg'} ]} ]}, { title: 'スパ', item: [ {name:'スパ1', location:{ lat:10, lng:10}}, {name:'スパ2', location:{ lat:90, lng:90}} ]}, { title: 'コンビニ', item: [ {name:'コンビニ1', location:{ lat:20, lng:10}}, {name:'コンビニ2', location:{ lat:80, lng:90}} ]}, { title: '病院', item: [ {name:'病院1', location:{ lat:30, lng:20}}, {name:'病院2', location:{ lat:70, lng:80}} ]} ]; const selects = [], wrap = document.getElementById('selects'), result = document.getElementById('result'), Checker = () => !selects.some( e => e.selectedIndex == 0 ), Clear = () => { result.innerHTML = ''; }, Distance = (p, q) => Math.sqrt(Math.pow(p.lat-q.lat,2)+Math.pow(p.lng-q.lng,2)), SumDist = (p, a) => a.map( e => Distance(p, e)).reduce((s, e) => s + e, 0), CalcList = () => { const ps = selects.map((e, i) => placeData[i].item[e.selectedIndex-1].location); const p = ps.shift(); return p.map( e => [ SumDist(e, ps), e ] ); }, DispList = () => { const list = CalcList(); list.sort( (a, b) => a[0] - b[0] ); for(let i=0; i<Math.min(list.length, 3); i++){ const html = `<li>${list[i][1].subname} <img src="${list[i][1].image}" /> 　<small> (${list[i][0].toFixed(2)})</small></li>`; result.insertAdjacentHTML('beforeend', html); } }, Initialize = () => { for (let p, i = 0; p = placeData[i++];) { let html = `<select><option value="">--${p.title}を選択--</option>`; p.item.forEach((d, j) =>{ html += `<option value="${j}">${d.name}</option>`; }); wrap.insertAdjacentHTML('beforeend', html + '</select>'); selects.push(wrap.lastElementChild); } }; Initialize(); wrap.addEventListener( 'change', e =>{ Clear(); if (Checker()) DispList(); }); } </script> </body> </html>

質問日時: 2022/01/18 18:43 質問者: programanman

解決済

1

0
Javascript のバージョン

Javascript は毎年バージョンアップしているように思っていますが、これまでにどんな種類があるんですか ?

質問日時: 2022/01/18 18:10 質問者: i-d-a-i

解決済

1

0
Google Apps Script で添付ファイル保存時、ファイル名に日時を追加したい

はじめまして。必要に迫られて、ネットで検索をしながらGoogle Apps Scriptの勉強を始めたばかりの者です。特定のメールアドレスの添付ファイルをGoogle ドライブに自動保存する際に、元々のファイル名の後ろに受信日時 yyyymmdd_HH:mm:ss を付けて保存できるようにしたいのですが、ファイル名のリネームの方法がわかりません。添付ファイルのファイル名・・・○○○.lzh 希望するファイル名・・・○○○_yyyymmdd_HH:mm:ss.lzh 下記のサイト様を参考に重複せずに保存できるようになりました。 https://tonari-it.com/gas-gmail-isstarred-star/ --------------------- var FOLDER_ID = 'XXXXXXXXXXXXXXXXX'; //保存するフォルダ var SEARCH_TERM = 'subject:(添付ファイルテスト) '; function fetchFile(){ var myFolder = DriveApp.getFolderById(FOLDER_ID); //フォルダを取得 var myThreads = GmailApp.search(SEARCH_TERM, 0, 100); //条件にマッチしたスレッドを検索して取得 var myMessages = GmailApp.getMessagesForThreads(myThreads); //スレッドからメールを取得し二次元配列で格納 for(var i in myMessages){ for(var j in myMessages[i]){ if(!myMessages[i][j].isStarred()){ //スターがないメッセージのみ処理をする var attachments = myMessages[i][j].getAttachments(); //添付ファイルを取得 for(var k in attachments){ myFolder.createFile(attachments[k]); //ドライブに添付ファイルを保存 } myMessages[i][j].star(); //処理済みのメッセージにスターする } } } } --------------------- 上記のスクリプトから、ファイル名の後ろに受信日時を付ける方法を教えてください。宜しくお願いいたします。

質問日時: 2022/01/16 13:24 質問者: swanka_1026

ベストアンサー

1

0
配列を作って総当たりで距離を計算して、昇順に配列しなおす方法

現在javascriptでの開発などを行っているのですが、タイトルにもありますように、配列に複数の値を格納し、その後ある値と総当たりで計算を行わせ、昇順に配列しなおすことは可能でしょうか？初学者であり、コードで実装する方法が思いつきません。どなたかお力をお貸しください。よろしくお願いいたします。

質問日時: 2022/01/14 16:45 質問者: programanman

解決済

5

0
【急募】選択した物件と施設に応じて、ランキング形式で表示する方法。

どなたかご教授の方よろしくお願いします。。セレクトボックスを複数個実装し、複数施設と、複数物件情報を含んだ市町村（○○市）を選択した後、ボタンクリックで、物件と複数施設の距離？を計算し、その結果をHTMLに表示（一位：物件１、二位：物件３等）にしたいと考えています。具体的なイメージは以下の通りです。 ○○市セレクトボックスを設置 selectbox1 １市（中にデータとして物件１、物件２，物件３の模擬座標入り）２市（中にデータとして物件３、物件４，物件５の模擬座標入り）３市（中にデータとして物件６、物件７，物件８の模擬座標入り）その他セレクトボックス selectbox2：　スパ１、スパ２、スパ３　//各選択肢にそれぞれの模擬座標データ入り selectbox3：　コンビニ１，コンビニ２　//以下同文 selectbox4：　病院１，病院２　//以下同文例えば・・・ selectbox1では、１市を選択。 selectbox2では、スパ１、 selectbox3では、コンビニ１、 selectbox4では、病院１を選択したとします。ボタンクリックで、これらセレクトボックスの値を取得し、物件１とスパ１，物件１とコンビニ１，物件１と病院１の数値をそれぞれ計算し、それらを足したものを結果とする＆これを物件３まで同様な計算を行い、その結果に応じて、昇順にランキングで表示する実装をしたいと考えています。 ※可能であればよろしくお願いします※ 【ランキング表示に応じて画像も貼るといったことも実装したいと考えています。（物件１ならa.jpg、物件2なら.jpgなど）】長々と長文失礼しました。もし何か伝わらないところがあればなんでも質問などしていただけると幸いです。使用言語はHTML＆CSS,Javascriptです。初学者なため、この言語を利用しています。皆さまのご回答の程、お待ちしております。

質問日時: 2022/01/12 23:59 質問者: programanman

ベストアンサー

1

0
googleスプレッドシートのApps Scriptについて

https://www.willstyle.co.jp/blog/4600/ このサイトの最初のscriptを書いたのですが、10行目でエラーが発生してしまいました。解決方法と、今後の学習のために、Apps Scriptの初心者向けの学習サイト等あれば教えてくれるとありがたいです。また、どうしてそれでエラーが解決できたのかも教えていただけたらと存じます。実際に書いたものです。（下記） function doPost (e){ //'シート名'を変更する var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('date') //Outgoing Webhookのトークン var token = 'qd41iWlGQ3SWuCBIo9LwsU0l' //送られてきたトークンが正しければ勤怠を記録する //parameterは必要に応じて変更してください if (token == e.parameter.token){ var datetime = new Date(); var date = (datetime.getFullYear()+'/'('0' + (datetime.getMonth()+1)).slice(-2) + '/' + ('0' + datetime.getDate()).slice(-2)); var time = (('0' + datetime.getHours()).slice(-2) + ':' + ('0' + datetime.getMinutes()).slice(-2)); var user_name = e.parameter.user_name; var trigger_word = e.parameter.trigger_word; var text = e.parameter.text; //追加する配列を記述 Array = [date,time,user_name,trigger_word,text] //シートの最下行に配列を追加 sheet.appendRow(Array); } return }

質問日時: 2022/01/11 20:19 質問者: しぃろ

解決済

2

0
JSのコンストラクタ関数

下記の参考javascriptがあり、おそらくjohnと表示されると思うのですが、nameというコンストラクタの引数名は何でもよく、よく使われるものなのでしょうか？ var Human = function(name) { this.name = name; }; Human.prototype = { sayMyName: function() { alert(this.name); } }; var bokuchan = new Human('john’);

質問日時: 2022/01/10 12:48 質問者: ymoshimoshi

解決済

1

0
java script 前のページのurlにより表示する/表示しない

前のページのurlにabcが入っていたらtextを表示する <body> <p hidden id="pp">text</p> <script> var ref = document.referrer; if(ref.indexOf('abc') != -1){ pp.style.visibility ="visible"; } </script> </body> 上手くいきません。助けてください。独学入門です！お手柔らかにお願いします。

質問日時: 2022/01/08 03:31 質問者: Londonbriges

ベストアンサー

3

0
ファイルサイズの取得

サーバの特定フォルダに保存されている、 PDFファイル、動画ファイル(mp4)のファイルサイズを取得するプログラムを作成する方法を教示願います。使用言語：javascript

質問日時: 2022/01/06 15:07 質問者: sanko777

解決済

2

0
ページ上部のスライドショーのスクリプトが何か知りたいのですが教えていただけないでしょうか？

こちらのサイト「https://snaq.me/」ですが、TOPページの上部にスライドショーがあります。これがどのようなスクリプトを使っているのか知りたいのですが、ご存じでしたら教えていただけないでしょうか？あれこれ調べてはいますが、見当がつきません。宜しくお願いいたします。

質問日時: 2022/01/03 15:41 質問者: warashi1994

ベストアンサー

1

0
GAS ドキュメント

google のドキュメン(GAS)で、ヘッダーに今日の日付を入力しているのですが日付はヘッダーに無事入力は出来ているのですが右寄せが出来ません、日付が左側にきてしまい、きれいにいきませんネットで探したり、書籍で調べましたが、ヘッダーの情報がなく、同じドキュメントのbodyでのやり方 setMarginLeftは使えず、スプレッドシートでの右寄せを試しましたが、うまくいかなかったので、お手数かけますがやり方をご教示いただけないでしょうか //ドキュメント新規作成 var doc = DocumentApp.create('name'); //日付インスタンス化 var date = new Date(); //日付入力 var h=doc.addH eader().setText(Utili ties.form atDate( date, 'Asi a/Tok yo', 'yy yy/M M/d d')); //右寄せ h.setHorizontalAlignment("right"); //保存 var docFile = DriveApp.getFileById(doc.getId()); folder.addFile(docFile);

質問日時: 2022/01/02 22:09 質問者: ひろみch

ベストアンサー

1

0
空の配列に2次元配列の追加

Java script初心者です。調べても空（null）から、２次元配列の代入する情報がなかったので質問させてもらいます。 function myFunction() { set_value=[]; for(i=0;i<10;i++){ set_value.unshift([i,i+1]); console.log(set_value[i][1]); } } 空の配列に、２次元配列を１回１回代入できないですか？結果は全て1で出力で不思議です。私の予想・したい出力は、1日目はi+1なので1 次は2、次は3,4、5、6、7、、、、、のイメージなのですが

質問日時: 2021/12/29 22:34 質問者: ひろみch

ベストアンサー

1

0
xmlの読込エラー

以下のコードで「Uncaught TypeError: objXML.load is not a function」というエラーが出ます。 var objXML = document.implementation.createDocument("","", null); objXML.async = false; objXML.load("./test.xml");　←ここがエラー箇所です。環境はedgeです。シンプルなコードのため、何が問題なのか分からず、困っております。おわかりになる方がいらっしゃいましたら、何卒ご教授ください。宜しくお願い致します。

質問日時: 2021/12/28 23:00 質問者: やん2580

ベストアンサー

2

0
【急募】選択した物件と施設の距離をランキング＆条件によって画像表示を変更する方法。

どなたかご教授の方よろしくお願いします。。現在セレクトボックスを二つ実装して、施設（コンビニA店）と複数物件情報を含んだ市町村（○○市）を選択した後、ボタンクリックで施設とコンビニの距離？を実装するところまで来ました。質問・回答して欲しい箇所は以下の通りです。 1,距離を計算した後にランキング形式で表示したい。 2,セレクトボックスを増やしても計算できる実装にしたい。 3,よりHTMLっぽいGUIにしたい。 4,表示された物件名によって、画像表示が変わるようにしたい。（物件１ならa.jpg、物件２ならb.jpg等表示順の変更（ランキング表示形式の場合））参考になるように、コード貼っておきます。使用言語はHTML,CSS,javascriptです。ご回答待っています。よろしくお願いします。ソースコード <div id="page-1"> <select id="shop"> <option value="a">コンビニA店</option> <option value="b">コンビニB店</option> <option value="c">コンビニC店</option> </select> <select id="city"> <option value="icity">い市</option> <option value="rocity">ろ市</option> <option value="hacity">は市</option> </select> <button id="btn" >ボタン</button> </div> <div id="page-2"> </div> <script> // 施設データ const conveni = { a: {x: 99, y: 121}, b: {x: 134, y: 153}, c: {x: 98, y: 150}, } // 物件データ const data = { icity: [ {name: '物件1', x: 123, y: 111}, {name: '物件2', x: 95, y: 191}, {name: '物件3', x: 133, y: 81}, ], rocity: [ {name: '物件4', x: 81, y: 111}, {name: '物件5', x: 95, y: 123}, {name: '物件6', x: 133, y: 123}, ], hacity: [ {name: '物件7', x: 191, y: 161}, {name: '物件8', x: 95, y: 191}, {name: '物件9', x: 143, y: 81}, ]}; document.getElementById('btn').addEventListener('click',()=>{ document.getElementById('page-1').style.display = 'none'; const conv = conveni[document.getElementById('shop').value]; const city = data[document.getElementById('city').value] .map(b => { b.len = (b.x - conv.x) ** 2 + (b.y - conv.y) ** 2; return b; }) .sort((a, b) => a.len - b.len); document.getElementById('page-2') .appendChild(Object.assign(document.createElement('ol'),{ innerHTML: city.map(c => `<li>${c.name}</li>`).join('') })); },false); </script>

質問日時: 2021/12/24 07:08 質問者: programanman

ベストアンサー

2

0
フレームワークのjavaScriptについて

教えてください。プログラミング初心者です。フレームワークのjavascriptでprototypejsやbackbonejsなどあるかと思いますが、サーバーからのレスポンスをどの様なかたちで受け取って処理するのか、何がメリットなのかあまりイメージができていません。またオブジェクト指向のjavascriptという点についてもサーバーとの連携でメリットがあるのかも分かりません。何か具体的に教えてください。

質問日時: 2021/12/22 00:44 質問者: ymoshimoshi

解決済

2

0
プログラミング初心者です。どうぞご教授ください。

Ｙｏｕｔｕｂｅにてあきちょんさんの動画、テトリスを作る17回でテトリスを回転させるコードについて分からないことがあったので質問させて頂きます。必要そうなコードのみ抜粋、変数は自分が分かりやすいように多少変えてます。 <!DOCTYPE html> <html> <body> <script> let tetro = [ [0,0,0,0], [1,1,0,0], [0,1,1,0], [0,0,0,0], ]; function rotate() { let kaiten=[] for( let y = 0; y<4; y++ ) { kaiten[y] = [] for( let x = 0; x<4; x++ ) { kaiten[y][x] = tetro[3-x][y]; } } return kaiten; } let ntetro = rotate();　//一回目回転させる tetro = ntetro ntetro = rotate();　//二回目回転させる tetro = ntetro </script> </body> </html> のコードですが、前々回第15回でも二次元配列を初期化、代入を説明されていたので、 let kaiten　を関数の外で宣言してreturnを受け取らずにしました。 <!DOCTYPE html> <html> <body> <script> let tetro = [ [0,0,0,0], [1,1,0,0], [0,1,1,0], [0,0,0,0], ]; let kaiten=[] //関数の外で宣言 function rotate() { for( let y = 0; y<4; y++ ) { kaiten[y] = [] for( let x = 0; x<4; x++ ) { kaiten[y][x] = tetro[3-x][y]; } } }　　　　//returnを受け取らない rotate();　//一回目回転させる tetro = kaiten rotate();　//二回目回転させる tetro = kaiten </script> </body> </html> このようにしたところ、一回回転させる分には正常なのですが、2回目からバクるんですが、なぜだか分かりません。どうぞご教授ください。プログラミング初めて一か月くらいなので、平たく解説していただけると助かります。

質問日時: 2021/12/17 09:19 質問者: しん太郎

ベストアンサー

4

0
入力フォームにの名前を入力するフォームに下のフリガナ入力をオート入力にしたいのですが、オートかな入

入力フォームにの名前を入力するフォームに下のフリガナ入力をオート入力にしたいのですが、オートかな入力には jquery.autoKana.js を使うと良いらしいのですが、オートかな入力に必要な jquery.autoKana.js ダウンロードできないのですが、どこからダウンロードするのでしょうか？以下のサイトの jquery.autoKana.jsの所をクリックして、ダウンロードページに行ってダウンロードするそうですが、 https://qiita.com/u-chida/items/6c07d558b3f06c9ed8d8 最終的には画像のような画面に辿り着くだけで、ダウンロードできないです。画像のような画面の下の方にあるソースコードをコピーして、ファイル名を jquery.autoKana.jsにして保存するわけではないですよね。

質問日時: 2021/12/16 08:37 質問者: hayosato

解決済

2

0
セレクトボックスで年月日を選択するコードを書いているのですが、提示のコードでは、付属画像のようにきち

セレクトボックスで年月日を選択するコードを書いているのですが、提示のコードでは、付属画像のようにきちんと表示され完璧です。何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると曜日まで表示されて満足です。付属画像参考。しかし、提示のコードではfirefoxなどのブラウザでも表示されるようにしたいのですが、●●何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると曜日まで表示される今の状況を維持したままどうコードを書いたらよいでしょうか？調べたところjQuery UI の Datepickerなどがあるようですが、調べてコードを書いても意味が分からず何も動きませんでした。 ●●何も選択してない時にはセレクトボックス内には、年/月/日ときちんと表示されていて、さらに、セレクトボックスをクリックすると曜日まで表示される今の状況を維持したままfirefoxなどのブラウザでも表示されるようにしたいのですが、どうコードを書いたらよいでしょうか？コードはwandleboxの共有コード内のURL（以下）にあります。 URLの中の白いシートの部分がソースコードです。回答よろしくお願いいたします。 https://wandbox.org/permlink/tnisdTxbbWaPuqB9

質問日時: 2021/12/14 09:05 質問者: hayosato

ベストアンサー

2

0
javascript の export default について

export default を教えてください。以下は何をしているのでしょうか ? export default とは何でしょう ? export default { title: 'TITLE', parameters: { docs: { page: doc; } } }

質問日時: 2021/12/10 18:57 質問者: i-d-a-i

ベストアンサー

1

0
Javascript の関数の引数箇所について。

const sample = ({ test1, test2 }) => { } という書き方をみたのですが、なぜ、波括弧が必要かわかりませんでした。わかる方教えてください。

質問日時: 2021/12/10 18:52 質問者: i-d-a-i

ベストアンサー

1

0
javascript 関数の return について

アロー関数の return に｀｀大文字のクォート ? みたいな文字で、リターンしてたものが動作してるのを見たのですが、そういう書き方をする理由が知りたいです。教えてください。

質問日時: 2021/12/10 17:41 質問者: i-d-a-i

ベストアンサー

2

0
Javaについて質問です。要素数5のInt型配列に１から100までの整数乱数 5件をそれぞれ格納し

Javaについて質問です。要素数5のInt型配列に１から100までの整数乱数 5件をそれぞれ格納し、配列を昇順ソートするためにどのように記述すればいいですか？（randomクラスを必ず用いて）

質問日時: 2021/12/07 16:52 質問者: トリプレッタ

解決済

2

0
処理の構想が知りたいです

javascriptで以下のような処理を作るにはどういう形で作ればいいですか？ ①２つの選択肢AとB(わかりやすいようにボタンにする) ↓ ②選択肢の「Aボタン」を押すと①に戻る　　　　　「Bボタン」を押すと③に進む ↓ ③3つの選択肢CとDとE「ボタン」の画面が出る ↓CかDかEボタンを押すか、時間経過(例えば3秒)で④に進む ④3つの選択肢FとGとH「ボタン」の画面が出る →同様にボタンを押すか、時間経過で①に戻る console.logに　”一回目はBとDとH” "二回目はA" ”三回目はBとCとF”みたいな感じで表示させたいです

質問日時: 2021/12/03 16:58 質問者: kongoon

解決済

6

0
値の入った<li>要素の数をカウントしたい

特定の要素（今回は<li>）の数をカウントしたくて以下のように書きました。 <ul class="hoge"> 　<li>あああ</li> 　<li></li> 　<li>いいい</li> 　<li></li> </ul> <script> 　$(function(){var hoge=$("ul.hoge li").length; 　$(".echo").text(hoge)}); </script> <li>は、全部で<span class="echo"></span>個です。これで「<li>は、全部で4個です。」と表示されてうまく行ったので小躍りして喜んでいたのですが、今度は少しひねった要望が出て「空っぽの<li>は数えないようにしたい、つまり何か文字列が入っている<li>だけをカウントしてほしい。」と言われてしまい、現在泣いています。理想とする吐き出され方は、以下です。「要素の入っている<li>は、全部で2個です。」調べても調べてもそんなことができる読み物が見つけられずに泣き続けているのですが、どなたかお教えいただけませんでしょうか( ﾉД`)ｼｸｼｸ…

質問日時: 2021/12/02 18:54 質問者: j1781352

ベストアンサー

2

0
javascriptとPHPで入力フォームのコードを書いているのですが、流れとしては、①入力フォー

javascriptとPHPで入力フォームのコードを書いているのですが、流れとしては、①入力フォーム→②確認画面→③送信画面の３段階で構成しています。初めの入力フォームで入力した値を②の確認画面で表示される「戻る」ボタンで戻っても入力した内容をjavascriptで保持するようにしたいです。もとから、PHPのみでは保持するコードは書いてある（提示したコードにある）のですが、PHPの内容は変更せずに①の画面で入力した内容を②確認表示画面で戻っても入力した内容をjavascriptで保持するようにしたいです。調べてよく分かりません。どうコード書いたらよいでしょうか？ ①の画面でjavascripによる入力エラーメッセージの表示の設定をしたら、PHPが発動しなくなりましたが、PHPの内容は変更したくないです。この質問で提示したコードは①入力フォームのコードのみです。字数制限で全て提示できません。回答よろしくお願いいたします。 ●●①入力フォーム <?php session_start(); $errors = array(); if(isset($_POST['submit'])) { $name = $_POST['name']; $name = htmlspecialchars($name, ENT_QUOTES); if($name === "") { $errors['name'] ="名前が入力されていません。 "; } if(count($errors) === 0) { $_SESSION['name'] = $name; /* 確認画面の表示， */ header('Location:http:▼▼'); exit(); } } if(isset($_GET['action']) && $_GET['action'] === 'edit'){ $name = $_SESSION['name']; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <title></title> <script src="jquery-3.6.0.min.js"></script> <style type="text/css"> .auto-style1 { text-align: center; } </style> <?php echo "<ul>";foreach($errors as $value) { echo "<li>"; echo $value; echo "</li>"; } echo "</ul>"; ?> </head> <body> <form action="companyhp6form1.php" method="post" id="form"> <div class="auto-style1"> <p class="tel-titile"> 名前 </p> <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" /> </div> <div class="auto-style1"> <button type="submit" id="submit" name="submit" class="auto-style4"> 送信</button> </div> </form> </body> <script> const form = document.querySelector('#form'); const name = document.querySelector('#name'); form.addEventListener('submit', function(event) { let msg = ""; if (name.value == "") msg += "名前が入力されていません。\n"; if (msg == "") return; event.preventDefault(); alert(msg); }); </script> <script src="jquery-3.6.0.min.js"></script> </html>

質問日時: 2021/12/02 09:18 質問者: pjdmgam

ベストアンサー

2

0
【JavaScriptわからない】1クリックで同時に2ページへ遷移、POSTとGETで値も持たせたい

下記form内のsubmitボタンをクリックしたとき以下の条件を満たしたいです。 (１) actionで外部リンクを新規タブで開く (２) 同時にregist.phpへパラメータ(kanryo=0)を持たせて遷移＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝【head内】 <script> jQuery(document).on("click", '#viewing', function() { $.get("regist.php", { kanryo: "0" }, function(data) {}); }); </script> 【body】 <form action="外部リンクURL" method="POST" target="_blank"> 　<input type="hidden" name="SAMLResponse" value="<?=$samlresponse ?>" /> <input type="submit" value="動画を視聴する" id="viewing"> </form> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ■問題点 (１) でPOST送信できており遷移するが、(２) の遷移が何の変化もなくできていない。 JavaScript での飛ばし方が問題があるのかと思ったのですが、他者が以前書いた記述であるのと、JavaScriptについてほぼ無知なので原因がわかりません。このJavascript の記述でregist.phpへ遷移はできるはずなのでしょうか？問題ないのであれば、それ以外の部分でおかしいところを検証します。別内容になりますが、飛ばしたいパラメータを2にしたい場合はこのJavascript の記述はどしたら良いでしょうか？前提知識が少ないため、調べても判断ができず、申し訳ありません。どうぞよろしくお願いいたします。

質問日時: 2021/11/28 17:41 質問者: zawa2929

ベストアンサー

2

0
Javascript 親から設定したaddEventListnerは消えてしまう？

こんばんは、お世話になります。親ウィンドウから、window.openメソッドにて子ウィンドウを開きます。そして、親ウィンドウから子ウィンドウの要素にaddEventListenerにて何かしらのイベントを設定します。このとき、親ウィンドウが生きていれば設定したイベントが発生しますが、存在しない（閉じられている）とイベントが発生しなくなってしまうのですが、何故でしょうか？また、解決策があれば教えていただきたいです以下、一例です（子ウインドウのGoogle検索トップページで検索ボックスをクリックするとボックスの背景色をピンクにする） //childのwindow.nameを持つ子ウインドウを開く child = window.open("https://www.google.com/?hl=ja" , "child"); //子ウインドウの検索ボックスにクリックイベントを設定 child.document.querySelector("input").addEventListener( "click" , function(){ this.style.backgroundColor = "lightpink"; }) //上記までの状態であれば、意図どおりに動作する //child.opener.close()などで親ウィンドウを閉じると、設定したイベントが消去されてしまう

質問日時: 2021/11/27 18:59 質問者: Hypnomatic

解決済

1

0
付属の写真のようにエラーが出るようにしたいです。提示したコードだけでは、エラーメッセージ文字が上の

付属の写真のようにエラーが出るようにしたいです。提示したコードだけでは、エラーメッセージ文字が上の方に出てくるだけで、四角い図形も出てきません。 javascriptでエラーメッセージを出せれば、写真のようなになると思います。そこでなのですが、 PHPのコードはそのまま崩さずjavascriptでも同じエラーメッセージ出すコードが書けません。どうコードを書いたらよいでしょうか？ nameとquestionの２つフォームとがあります。回答よろしくお願いいたします。 <?php session_start(); $errors = array(); if(isset($_POST['submit'])) { $plan = $_POST['plan']; $name = $_POST['name']; $question = $_POST['question']; if($name === "") { $errors['name'] ="名前が入力されていません。 "; } if($question === "") { $errors['question'] ="お問い合わせ内容入力（150文字以内）が入力されていません。 "; } if(count($errors) === $_SESSION['name'] = $name; $_SESSION['question'] = $question; /* 確認画面の表示， */ header('Location:http://▼▼php'); exit(); } } if(isset($_GET['action']) && $_GET['action'] === 'edit'){ $name = $_SESSION['name']; $question = $_SESSION['question']; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta content="text/html; charset=utf-8" /> <title>お問い合わせ画面</title> <style type="text/css"> /* 入力フォームの位置 */ .auto-style1 { text-align: center; } </style> <?php echo "<ul>";foreach($errors as $value) { echo "<li>"; echo $value; echo "</li>"; } echo "</ul>"; ?> </head> <body> <form action="companyhp6form1.php" method="post"> <div class="auto-style1"> <p class="tel-titile"> 名前：※ </p> <input type="text" class="name" name="name" id="name" value="<?php if(isset($name)){ echo $name; } ?>" /> </div> <div class="auto-style1"> <p class="tel-titile"> お問い合わせ内容入力（150文字）： </p> <textarea name="question" class="question" id="question" cols="40" rows="10" placeholder="150文字以内で入力して下さい。"></textarea> </div> <div class="auto-style1"> <button type="submit" id="submit" name="submit" class="auto-style4"> 送信</button> </div> </form> </body> <script src="main.js"></script> </html>

質問日時: 2021/11/23 08:27 質問者: pjdmgam

ベストアンサー

1

0
Canvasを使って描画して面積取得

教えて下さい。初心者です。アプリケーション上でマウスの操作から描画して、面積取得するのに、javascriptとHTML5でどのようにコードを書けばいいでしょうか。

質問日時: 2021/11/21 13:35 質問者: ymoshimoshi

解決済

3

0
Java Script を.jsファイルを利用しシンプル化する

Dreamweaverで作成した商品ページで、以前は税抜価格のみを表示していたのですが、先の消費税総額表示対応のため、現在、Java Scriptを利用し、商品リストを下記のように記述し対応しているものの、商品リストページには多数の商品が掲載されているため、同じコードが多数並んでしまっています。 ■HTML ------------------------------------------------------------ 白菜<br> 100円<br> <SCRIPT TYPE="text/javascript">document.write("（税込",Math.round(■ * 1.1),"円）")</SCRIPT> ■ブラウザ表示 ------------------------------------------------------------ 白菜 100円（税込110円） ------------------------------------------------------------ これを、.jsファイル等を作成して、記述を簡略化することは可能でしょうか？ ※■の箇所は、Dreamweaverの機能で、置換の際に価格を正規表現で代入しています。 html化すれば「("（税込",Math.round(100 * 1.1),"円）")」となります。上記につきましてご回答いただけますと幸いです。以上、よろしくお願い申し上げます。

質問日時: 2021/11/18 14:48 質問者: maru11586

ベストアンサー

4

0
JavaScriptからローカルにテキストファイルを作成する

以前に、下記①の環境でJavaScriptからローカルにテキストファイル作成することができていました。（ソースは下記参照）しかし、下記②の環境に移行したところ、③の行にて④のエラーが表示されます。ネットで④のエラーを検索してみましたが、解決策が見つかりません。もし分かる方がおられましたら、ご教授願います。（下記ソースのオリジナルはネットから見つけたものです。） ① Linux(CentOS 5.6) / Firefox(version 3.6.13) ② Linux(CentOS 7.4.1708) / Firefox(version 60.5.0) ③ netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); ④ Error: TypeError: netscape.security.PrivilegeManager is undefined □ Please contact the website owners to inform them of this problem. ---------------------------------------------------------------------------- <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function writeToLocal(filename, content) { var ua = navigator.userAgent.toLowerCase(); try { if (ua.indexOf('firefox') != -1) { // Firefox filename = (ua.indexOf('windows') != -1 ? 'C:\\tmp\\' : '/tmp/') + filename; netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect'); var file = Components.classes['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile); file.initWithPath(filename); var fileStream = Components .classes['@mozilla.org/network/file-output-stream;1'] .createInstance(Components.interfaces.nsIFileOutputStream); fileStream.init( file, 0x02 | 0x08, 0664, 0 ); var converterStream = Components .classes['@mozilla.org/intl/converter-output-stream;1'] .createInstance(Components.interfaces.nsIConverterOutputStream); converterStream.init( fileStream, 'UTF-8', content.length, Components.interfaces.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER ); converterStream.writeString(content); converterStream.close(); fileStream.close(); alert('書き込みが完了しました！'); } } catch (e) { alert('Error: ' + e); } } writeToLocal('test.txt', 'これはJavaScriptが作成したファイルだよ！\n'); </script> </head> </html> ----------------------------------------------------------------------------

質問日時: 2021/11/17 02:12 質問者: ysakmtmt

解決済

2

0
htmlを組み替え（？）たい

画像と文章が1セットのものが複数あり（こんな感じのhtmlが複数あるのを） <div> <img> <p>内容</P> </div> 画像と文章を分けたい <div> <img><img><img>… </div> <div> <p>内容</p><p>内容</p><p>内容</p>… </div> みたいにJavaScriptで組み替えたいのですが、可能でしょうか。

質問日時: 2021/11/15 12:05 質問者: 16164le_tai

ベストアンサー

2

0
Javascript クロージャの動きがよくわからないです

javascriptのクロージャの例として下記のような例があります function outer(){ var x = 1; return　function (){ console.log(x); x = x + 1; }; } hoge=outer(); hoge(); //1 hoge(); //2 hoge(); //3 変数hogeに関数outerを代入し、hoge()を１回目に実行したときに「１」が返ってくるのは理解できます。しかし、2回目以降にhoge()を実行したときに、カウントアップしたxが返ってくるのがわかりません２回目以降の呼び出しの際にouter関数内のvar x = 1は実行されないのでしょうか？

質問日時: 2021/11/14 22:30 質問者: Hypnomatic

ベストアンサー

3

0
javascriptでエクセルデータ読み込み

いつもお世話になっております javascriptでエクセルデータ読み込みは可能でしょうかまた、共有ファイルみたく使用することはできますでしょうか。

質問日時: 2021/11/13 22:53 質問者: りんごプリン

解決済

3

0
html selectの内容を初期値に戻す

selectの内容をボタンを押せば初期値に戻すやり方がいまいちわかりません例えばselectボックスにeeeを選択した後、戻すボタンを押せばaaaに戻るようにしたいです <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <select name="select-name"> <option value="aaa">aaa</option> <option value="iii">iii</option> <option value="uuu">uuu</option> <option value="eee">eee</option> <option value="ooo">ooo</option> </select> <button id="modosu">戻す</button> <script> const select = document.getElementById("select-name"); const btn = document.getElementById("modosu"); function btn addEventListener("click",function(){ select.remove(); }); </script> </form> </body> </html> また、仮にボタンを押せば選択していたvalueの値を取ってhtmlに表示させるにはどうすればいいですか？

質問日時: 2021/11/10 18:29 質問者: hookeey

ベストアンサー

2

0
スクリプト

ホームページビルダーで落ち葉が落ちスクリップトを作ってみました。ビルダーでプレビューを見ると上手く葉がゆらゆら揺れて落ちていますが名前を付けてhtmlファイルとして保存しました。落ち葉の画像も同じフォルダーにありますが、 htmlを起動させても添付　の画面の様な静止画面表示で動きません・・・動く様にするには何処を修正すればよろしいのでしょうか？そのタグは </HEAD> <body><span id="img01" style="position:absolute; left : 90px; top : 10px; z-index : 8;"><IMG src="icho.gif"></span> <span id="img02" style="position:absolute; left : 161px; top : 21px; z-index : 5;"><IMG src="icho2.gif"></span> <span id="img03" style="position:absolute; left:30px; top:10px; z-index : 6;"></span> <span id="img04" style="position:absolute; left:40px; top:10px; z-index : 7;"><IMG src="ha3.gif"></span> <span id="img05" style="position:absolute; left : 172px; top : 147px; z-index : 2;"><IMG src="ha2.gif"></span> <div style="width : 60px;height : 12px;top : -1px;left : -1px; position : absolute; z-index : 4; " id="Layer1"><Script Language='JavaScript'>  </Script><Script Language='JavaScript'>  </Script><IMG src="icho1.gif"> ******************************以上************************ 恐れ良いりますが、宜しくお願い致します。

質問日時: 2021/11/10 13:45 質問者: 2021五郎蔵

ベストアンサー

11

0
webフォームに、jQueryのUIでカレンダーを入れています。 datepickerで、金曜に限り

webフォームに、jQueryのUIでカレンダーを入れています。 datepickerで、金曜に限り、土日を選択出来ないようにしたいのですが、方法はありますでしょうか？初心者です。よろしくお願いいたします。

質問日時: 2021/11/08 12:42 質問者: sorasora2010

ベストアンサー

1

0
Javascript 要素の作成と追加について

下記のようなHTML構造において、それぞれのdivの子要素にボタンを追加したいとします <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </body> そこで、下記のようなjavascriptをブラウザのコンソールで実行したところ、最後のdivにしかボタンが追加されませんでしたが、何故ですか？ btn = document.createElement("input"); btn.setAttribute("type","button"); btn.value = "ボタン"; document.querySelectorAll("div").forEach( elm =>{ elm.appendChild(btn); })

質問日時: 2021/11/06 22:04 質問者: Hypnomatic

ベストアンサー

2

0
Javascriptで同じ数字を２回打つとアラートが出るプログラミングを作ってます。

画像のように２回同じように打つとアラートを出すようなプログラミングを作ろうとしてます。 let Exist = new Array(); while(true){ let msg = ""; let inp = inputs; console.log(inp) if(Exist[inp]){ msg = inp+"は既に存在します"; }else{ msg = inp+"は存在しないのでExistに登録します"; Exist[inp] = true; // false; // } alert(msg); } inputsにテキストの要素を入れています。２回同じことを打つと if(Exist[inp]){ msg = inp+"は既に存在します"; } のイベントを起こしたいのですが今のままだと１回目で if(Exist[inp]){ msg = inp+"は既に存在します"; } のイベントが起きてしまいます。どうすれば２回目以降でこのイベントを発生できるかを教えてください。サンプルコードでいいのでよろしくお願いします。

質問日時: 2021/11/01 16:36 質問者: kyojinnsann_1000

ベストアンサー

14

0
チェックボックスのオン⇔オフに応じて並列の画像の濃さを動的に変化させたい

以下のサンプルHTMLのとおり、チェックボックス＋小画像という見た目ですが、 ●チェックが入っていない時は、画像を薄く（style="opacity: 0.2;"）して ●チェックが入っている時は、通常通り（style="opacity: 0.2;"はつけない、またはopacity: 1） ●チェックがオン⇔オフされたら瞬時に上記が反映こういう動的な動作をさせたいですが、シンプルな方法（javascript？)をご教示いただけないでしょうか。専門的には「onclickのイベントを発生させる」などになるのでしょうが、最初に画面の飛んでくる際、PHP5でMySQL5の値を読み込んでチェックを入れるかどうかも判断していますので、そこが難しいところかと予想しています。。。 <html> <body> <table> <tr> <td><label><input type="checkbox" name="val1" value="1" checked>りんご<br><img src="./img/10.png" width="100" height="100" style="opacity: 0.2;"></label></td> <td><label><input type="checkbox" name="val2" value="1" checked>みかん<br><img src="./img/20.png" width="100" height="100" style="opacity: 0.2;"></label></td> <td><label><input type="checkbox" name="val3" value="1" checked>ぶどう<br><img src="./img/30.png" width="100" height="100" style="opacity: 0.2;"></label></td> </tr> </table> </body> </html>

質問日時: 2021/10/31 22:05 質問者: litton101

ベストアンサー

1

0
javascript ループ中の処理

ループカウントが増えてくにつれてImagesectionにある画像２つ(pics_srcAとpics_srcB)を配列通りに変更したいです！例　ループカウント０の時→画像リンゴ　ファーム　　　　　　　　　１の時→画像ばなな　フォレスト　　　　　　　　　２の時→画像ぶどう　こうえん　　　　　　　　　３の時→終了(非表示にしてる) 分からないことは画像の配列pics_srcA.Bをループ処理のどこで使うかと　　　　　　　　カウントが増えてくたびに画像を変更する処理をどうすればいいかです HTML---------------- <body> <br> <section id="start-section" style="background-color:#5d5;"> <a id="start-btn" class="btn btn--orange" href="#">テストを始める</a> </section> <link rel="stylesheet" href="style.css"> <section id="image-section" style="background-color:rgb(42, 201, 103);"> <h1>画像をセットで覚えてください(3秒)</h1> <img id="mypicA" src="imgo/apple.jpg" width="380" height="320"> <img id="mypicB" src="imgh/farm.jpg" width="380" height="320"><br><br> </section> <section id="input-section"> <tb class ="inputa">オブジェクトと背景の2つの画像はフィットしますか？(6秒)</tb><br><br> <input type="range" class = "inputb" id="example" min="1" max="5" step="1"> <p class = "inputc">とても悪い　　ちょっと悪い　　　　普通　　　　ちょっと良い　　とても良い。</p> </section> <script src="js/gazou.js"></script> <link rel="stylesheet" href="style.css"> </body> Javascript----------------- const StartBtn = document.getElementById(`start-btn`); const StartSection = document.getElementById(`start-section`); const ImageSection = document.getElementById('image-section'); const InputSection = document.getElementById('input-section'); const pics_srcA = [ "apple.jpg", "banana.jpg", "grape.jpg", ], IMGA = document.getElementById("mypicA"); const pics_srcB = [ "farm.jpg", "forest.jpg", "park.jpg", ], IMGB = document.getElementById("mypicB"); let numA = 0; let numB = 0; function init() { ImageSection.style.display = 'none'; InputSection.style.display = 'none'; /* スタート・ボタンにクリックイベントを追加 */ StartBtn.addEventListener(`click`, function () { /* スタート・セクションを消して * ループ関数をloopFlag=0で実行 */ StartSection.style.display = 'none'; loopSection(0); }, false); } /* 画像セクションとインプットセクションを交互に表示する関数 * 引数 loopFlag は、0か1。 * 0のときは画像・セクションが表示。 * 1のときはインプット・セクションが表示。 */ let loopCount = 0; //ループをカウントする function loopSection(loopFlag) { let timer; // 待ち時間の変数 if (loopCount === 3){ //3回目でループ終了 ImageSection.style.display = 'none'; InputSection.style.display = 'none'; } else if (loopFlag === 0) { ImageSection.style.display = 'block'; InputSection.style.display = 'none'; timer = 3500; loopFlag = 1; } else { ImageSection.style.display = 'none'; InputSection.style.display = 'block'; timer = 6000; loopFlag = 0; loopCount = (loopCount + 1); } window.setTimeout(function () { loopSection(loopFlag); }, timer); }; /* init関数を実行 */ init();

質問日時: 2021/10/30 14:44 質問者: わちょん

ベストアンサー

1

0
GASでGmail送信をするとある文字（赤●など）が文字化けするのを解消したい

Google Apps Script（GAS）についての質問です。下記スクリプトを実行しました。 function test2() { var str="表示結果 → 赤●" SpreadsheetApp.getActive().getActiveSheet().getRange("A1").setValue(str); GmailApp.sendEmail("testemailaddress＠gmail.com", "test2", str); } ※赤●は本当は添付にあるやつです。 ※ここの質問では特殊文字だからか認識されなかったため赤●と表記しています。実行結果は添付画像の通りです。添付画像左：シートへの出力結果添付画像右上：GASでGmail送信した結果添付画像右下：手でGmail送信した結果こちらが受信したメール本文のコピペです。表示結果 → �� これを添付画像右下のように送受信したいです。 GASでは不可能なのでしょうか？ご存知の方がいらっしゃればご教示宜しくお願いしますm(_ _)m 補足説明 ※自分のgmailアドレスから自分のgmailアドレス（同じアドレス）に送信しています。 ※赤●はmac PCやiPhoneで出てくる特殊文字です。赤、黒などいろいろありますがなぜか白だけは文字化けせずに送れました。 ※上記メールアドレスは質問用に変更しています。 ※画像の左と右は同じPC、同じブラウザで同じタイミングで見ています。

質問日時: 2021/10/30 01:43 質問者: t000506g

ベストアンサー

3

0
javascript ループがうごかない

javascriptでわからないですｈｔｍｌ <body> <br> <a id="btn--orange" class="btn btn--orange">テストを始める</a> <div id = "gazoud" class = "gazous"> <h3>画像をセットで覚えてください</h3> <img id="mypic" src="imgo/apple.jpg" width="380" height="320"> <img id="mypict" src="imgh/farm.jpg" width="380" height="320"><br><br> </div> <div id = "fitd"class = "fits"> <td>物と背景の2つの画像の相性は？</td><br><br> <input type="range" id="example" min="1" max="5" step="1"> <p>2つのペア画像の相性は<span id="current-value"></span>。</p> </div> <script src="js/gazou.js"></script> </body> </html> JavaScript const pics_srcA = [ "apple.jpg", "banana.jpg", "grape.jpg", ], IMG = document.getElementById("mypic"); const pics_srcB = [ "farm.jpg", "forest.jpg", "park.jpg", ], IMG = document.getElementById("mypict"); const x = document.getElementById(`btn--orange`); let pa = document.getElementById('gazoud'); let pi = document.getElementById('fitd'); pa.style.display = 'none'; pi.style.display = 'none'; x.addEventListener(`click`, func = () => { x.style.display = 'none'; function loop2(flag){ let timer; // 待ち時間の変数 if(flag === 0){ pi.style.display = 'none';　　　//非表示にする pa.style.display = 'block'; //表示する timer = 3500;　　　　　　　　//3.５秒 flag = 1; }else{ pa.style.display = 'none'; pi.style.display = 'block'; timer = 6000; flag = 0; } window.setTimeout(function(){ loop2(flag); },timer); }; }); divでまとめたやつを変数pa pi にして、表示したり非表示にさせたりしたいのですが動かないです divのidとclassは一緒にしてます(これがいいのか悪いのかわからない...けど反応はする) ボタンを押したらループを開始したいですループはまだサンプル画像が3枚づつしかないので3回だけにしたいです

質問日時: 2021/10/25 16:19 質問者: わちょん

ベストアンサー

2

0
html javascript 作った配列をボタンをクリックしたときに表示させる方法

htmlで <label> フルーツの名前は <fruit> </label> <input type="button" value="進む" onclick="go(1)">　//ボタン <script> const fruit = [ "りんご", "ばなな", "ぶどう", ]; //フルーツの配列 let num = 0; function go(e) { fruit [num + 1]; </script> これだとhtmlのラベルに入ってる<fruit>が反応しないのですがどこが間違ってますか？？ボタンをクリックしたときに名前が変わるようにしたいです

質問日時: 2021/10/25 15:51 質問者: わちょん

解決済

2

0
プログラミングについてです。今JavaScriptを勉強しています。 Progateを3周して、基

プログラミングについてです。今JavaScriptを勉強しています。 Progateを3周して、基礎はある程度分かったのですが、次に何をすればいいかわかりません。教えてください。

質問日時: 2021/10/24 14:10 質問者: 12aoao21

ベストアンサー

5

0
フォームの状態やGETのURLは保持しつつ、チェックボックスON/OFFした瞬間にSUBMITしたい

以下のHTMLで例えば、「アルファベット/昇順」を選んだ後に、「高校生」にチェックしてsubmitすると、URLが以下のようにヘンテコリンになってしまうのですが・・・ http://localhost/index.php?kou=1&s=.%2Findex.php%3Fs%3D2 こういう風な　→　http://localhost/index.php?kou=1&s=2 「きちんとした」URLにするには、ここをどう書き換えるべきでしょうか？ onChange="location=this.options[this.selectedIndex].value" 加えて、小学生、中学生、高校生、それぞれのチェックボックス（または<label>でくくられた画像）にチェックが入る／外れる瞬間にSUBMITが回る（チェックのON/OFF状況、プルダウン、検索キーは保持される）ようにしたいのですが、ネットで前例みてみると、かなりハードルが高そうで・・・ https://teratail.com/questions/122347 よろしくお願い致します。 <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body> <form method="get" action="./index.php" name="Form1"> <table> <tr> <td rowspan="2"> <table border="0"> <tr lang="zh-cn"> <td><label><input type="checkbox" value="1" name="sho"<?php if ($_GET["sho"] == 1) { echo " checked";} ?>>小学生<br><img src="./img1.png"></label></td> <td><label><input type="checkbox" value="1" name="chu"<?php if ($_GET["chu"] == 1) { echo " checked";} ?>>中学生<br><img src="./img2.png"></label></td> <td><label><input type="checkbox" value="1" name="kou"<?php if ($_GET["kou"] == 1) { echo " checked";} ?>>高校生<br><img src="./img3.png"></label></td> </tr> </table> </td> <td> ソート<br> <select name="s" onChange="location=this.options[this.selectedIndex].value"> <option value='./index.php?s=0'<?php if ($_GET["s"] == 0) { echo " selected";} ?>>日本語五十音/昇順</option> <option value='./index.php?s=1'<?php if ($_GET["s"] == 1) { echo " selected";} ?>>日本語五十音/降順</option> <option value='./index.php?s=2'<?php if ($_GET["s"] == 2) { echo " selected";} ?>>アルファベット/昇順</option> <option value='./index.php?s=3'<?php if ($_GET["s"] == 3) { echo " selected";} ?>>アルファベット/降順</option> </select> </td> </tr> <tr> <td> キーワード<br> <input value="<?php echo trim(htmlspecialchars(stripslashes($_GET['q']))); ?>" type="text" name="q"> <input type="submit" value="OK"> </td> </tr> </table> </body></form> </html>

質問日時: 2021/10/24 01:12 質問者: litton101

ベストアンサー

3

0
Gas初心者ですネット上のとあるシステムに表がありまして、題目とチェックボックスがあり、GASを使

Gas初心者ですネット上のとあるシステムに表がありまして、題目とチェックボックスがあり、GASを使って指定した題目のチェックボックスに自動的にチェックが入るようにしたいのですが、そういったことは可能でしょうか？ HTML？を使用するんでしょうかなんと調べたら良いかも教えていただけると助かります

質問日時: 2021/10/22 22:52 質問者: 中山あ

ベストアンサー

1

0

←前の結果
1
2
3
4
5
6
7
8
9
10
11
...
20
次の結果→

【プログラミング・Web制作】に関するカテゴリ

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

質問する（無料）

【JavaScript】に関するコラム/記事

弁護士が解説！あなたの声を行政に届ける「パブリックコメント」制度のすべて

社会に対する意見や不満、疑問。それを発信する場所は、SNSやブログ、そしてニュースサイトのコメント欄など多岐にわたる。教えて!gooでも「ヤフコメ民について」というタイトルのトピックがあり、この投稿の通り、...
弁護士が語る「合法と違法を分けるオンラインカジノのシンプルな線引き」

「お金を賭けたら違法です」ーーこう答えたのは富士見坂法律事務所の井上義之弁護士。オンラインカジノが違法となるかどうかの基準は、このように非常にシンプルである。しかし2025年にはいって、違法賭博事件が相次...
釣りと密漁の違いは？知らなかったでは済まされない？事前にできることは？

知らなかったでは済まされないのが法律の世界であるが、全てを知ってから何かをするには少々手間がかかるし、最悪始めることすらできずに終わってしまうこともあり得る。教えてgooでも「釣りと密漁の境目はどこです...
カスハラとクレームの違いは？カスハラの法的責任は？企業がとるべき対応は？

東京都が、客からの迷惑行為などを称した「カスタマーハラスメント」、いわゆる「カスハラ」の防止を目的とした条例を、全国で初めて成立させた。条例に罰則はなく、2025年4月1日から施行される。この動きは自治体...