「JavaScriptの質問をしたり答えたりする掲示板」の投稿 - Crieit

現在のWEBサイトが文字や画面全体の縮小拡大ができない様になっているが、なぜ縮小拡大ができない...

2023-02-06T13:35:07+09:00

現在のWEBサイトが文字や画面全体の縮小拡大ができない様になっているが、
なぜ縮小拡大ができないのかを知りたい(調査したい)

【詳細】
図書館に置いてあるタッチパネル式の本の検索サイトの様なものになります。(または登記簿謄本や住民票を検索、書類発行をタッチパネルで依頼するサイトの様な)
画面サイズに合った固定ページでボタンを押すと次の画面に遷移する形式になります。(スクロールや縮小拡大機能がない)

【環境】
XHTML、CSS、javascript

【背景】
現在のWEBサイトをタブレット端末で使える様にする際、タブレットでも縮小拡大ができない様にしたい。その際に、現状の縮小拡大ができない仕様がどの要因で実現されているのかを把握したい。

【推測】
①CSS,javascrptで縮小拡大ができない様にするコードがある
②画面サイズ設定を1つだけにしている場合、そもそも縮小拡大ができない

もし①の場合は、
どの関数でできるか知りたいです。

replitで、discordのbotを常時可動させたいのですが、たまにclient.logi...

2022-09-03T05:32:12+09:00

replitで、discordのbotを常時可動させたいのですが、たまにclient.login(token);が動かなくなってしまいます。
これで解決したいのですが、リッスンするにはどうすればいいですか？

Javascript を node.js で書いて実行させるコードを作り、それを chrome...

2022-04-24T16:55:01+09:00

Javascript を node.js で書いて実行させるコードを作り、それを chrome 等のブラウザで実行させる方法はどういったものがありますか？

というのは、ちょっと漠然としすぎているかもしれません。

例えば、https リクエストして、response.body をファイルに保存するという一連の処理をブラウザの Javascript だけで動作させるには、どういう方法がありますか？

GoogleドライブにてJPGデータをGoogleドキュメント化しております。１データずつなら...

2022-02-16T15:16:45+09:00

Googleドライブにて
JPGデータをGoogleドキュメント化しております。
１データずつならGoogleドキュメント化できるのですが
複数あるので

function myConvertToDocument() {
var id = "Googleフォルダ"
var source_folder = DriveApp.getFolderById(id);
var target_files = source_folder.getFiles();
var dest_folder = DriveApp.getFolderById(id);

while(target_files.hasNext()) {
    var file = target_files.next();
    convertToDocument(file, dest_folder);
}

}

function convertToDocument(file, folder) {
options = {
title: file.getName(),
mimeType: MimeType.GOOGLE_DOCUMENT,
parents: [{id: folder.getId()}]
};
Drive.Files.insert(options, file.getBlob())
}

こちらのスクリプトを実行したのですが
JPGデータはJPGデータのまま吐き出されます。
改良方法がわかりません。どなたかよろしくお願いいたします。

ページ上の　2021年11月11日 10:00　という文字列を2021/11/11 10:00...

2021-11-11T23:53:26+09:00

ページ上の　2021年11月11日 10:00　という文字列を
2021/11/11 10:00:00　という形に変換したいのですが
JavaScriptで記述するにはどうすれば良いのでしょうか？

また、この数字を参照して
new Date('2021/11/11 10:00:00');
という記述が完成するようにしたいのです。

お分かりの方是非ご教授くださいm(__)m

querySelectorAllで、部分一致を含んだ形で要素の取得を試みているのですが、変数を...

2021-10-29T13:04:13+09:00

querySelectorAllで、部分一致を含んだ形で要素の取得を試みているのですが、変数を渡すとうまくいきません。

例えば、
const elements = document.body.querySelectorAll("input[name^='Q1-']");
console.log(elements.length)

のように文字列を渡すと、正しく30 (個) と数えてくれます。

が、
const q_name = "Q" + this.num + '-'
console.log(q_name) // 確認用
const elements = document.body.querySelectorAll("input[name^=q_name]");
console.log(elements.length)

と変数を渡すと 0 (個) と表示されてしまいます。

なぜなのでしょうか？
解決法がありましたら教えていただきたいです。

よろしくお願いいたします。

JavaScript初心者です。visual studio codeでだるまさんがころんだのよ...

2021-10-22T00:21:28+09:00

JavaScript初心者です。visual studio codeでだるまさんがころんだのようなゲームを作りたいのですが、やり方が全くわからないのでご教授お願いします。

•やりたいこと
・鬼が振り向いた時に人が動いていたら、その時点でゲーム終了
・鬼が振り向いた時に人が止まっていたら、ゲーム続行
・鬼のところまで辿り着いたらクリア
・人はキーボードの何かしらのボタンで操作できるようにする

よろしくお願いします。

JavaScript初心者です。簡単なアニメーションを作りたいのですが実装方法がわからず困って...

2021-08-24T12:01:12+09:00

JavaScript初心者です。簡単なアニメーションを作りたいのですが実装方法がわからず困っています。

・やりたいこと
4枚の画像が0.1秒毎にズームしながら切り替わり、0.5秒毎にズームしながら画像を3秒間表示する。

説明が分かりにくくすみません。つまり、
1.png→2.png→3.png→4.png→1.png→2.png…の順で0.1秒ごとにパッパッパっと画像が切り替わって、一周して1.pngに戻ってきた時に3秒表示。またパッパっと切り替わって、一周して2.pngに来た時に3秒表示…みたいなものが作りたいです。

ズームしながら0.1秒毎に切り替えまでは調べて分かりましたが、「0.5秒毎に3秒表示」の部分がつまっています。
なんとなくsetTimeoutを使うんだろうということは分かるのですが書き方が分からず、ご教授頂けないでしょうか。
動きの部分はcssで行っています。また、フェードインと記載してますが実際はフェードではなく切り替わる感じにしています。

html

JavaScript

function sliderStart() {

    const slide = document.getElementById('slide_wrapp');      //スライダー親
    const slideItem = slide.querySelectorAll('.slide_item');   //スライド要素
    const totalNum = slideItem.length - 1;                     //スライドの枚数を取得
    const FadeTime = 1000;                                     //フェードインの時間
    const IntarvalTime = 100;                                 //クロスフェードさせるまでの間隔
    let actNum = 0;                                            //現在アクティブな番号
    let nowSlide;                                              //現在表示中のスライド
    let NextSlide;                                             //次に表示するスライド

    // スライドの1枚目をフェードイン
    slideItem[0].classList.add('show_', 'zoom_');

    // 処理を繰り返す
    setInterval(() => {
        if (actNum < totalNum) {

            let nowSlide = slideItem[actNum];
            let NextSlide = slideItem[++actNum];

            //.show_削除でフェードアウト
            nowSlide.classList.remove('show_');
            // と同時に、次のスライドがズームしながらフェードインする
            NextSlide.classList.add('show_', 'zoom_');
            //フェードアウト完了後、.zoom_削除
            setTimeout(() => {
                nowSlide.classList.remove('zoom_');
            }, FadeTime);

        } else {

            let nowSlide = slideItem[actNum];
            let NextSlide = slideItem[actNum = 0];

            //.show_削除でフェードアウト
            nowSlide.classList.remove('show_');
            // と同時に、次のスライドがズームしながらフェードインする
            NextSlide.classList.add('show_', 'zoom_');
            //フェードアウト完了後、.zoom_削除
            setTimeout(() => {
                nowSlide.classList.remove('zoom_');
            }, FadeTime);
        };
    }, IntarvalTime);

}

CSS

#slide_wrapp{
  position: relative;
  overflow: hidden;
  padding: 0;
  width: 500px;
}
  .slide_item{
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.01s linear, transform 1s linear;  //秒数に注意
    position: relative;
    z-index: 1;
}
   .slide_item:not(:first-child){
      position: absolute;
      top: 0;
      left : 0;
}

  .slide_item.show_{
      opacity: 1;
}
  .slide_item.zoom_{
      transform: scale(1.02);
}
  .slide_item img{
      display: block; //下に余白ができないように
}

何卒よろしくお願いします。

自分で3日トライしたのですがエラーや出力されなかったりで少し困ってます。模範解答をいただけると...

2021-07-15T11:54:35+09:00

自分で3日トライしたのですがエラーや出力されなかったりで少し困ってます。
模範解答をいただけると助かります。お願いします

jsでいろんな国の時間を1秒おきに時間が更新されるようにしラジオボタンで画像と国の時間を変える
htmlとcssを変えずにjava script内(script.js)だけを変える
htmlとcssは②にあります。
ラジオボタンを切り替えたときに、選択した国と時刻に切り替えたいのが１つ目で

① 時差
日本／東京 ±0
オーストラリア／キャンベラ +1時間
インドネシア／ジャカルタ -2時間
エジプト／カイロ -7時間
イギリス／ロンドン -8時間
アメリカ／ニューヨーク -13時間
アメリカ／サンフランシスコ -16時間

時間に合わせて表示される画像を入れ替え
午前４時～午前9時59分 asa.png
午前１０時～午後３時５９分 hiru.png
午後４時～午後６時５９分 ban.png
午後７時～午後１１時５９分 yoru.png
午前０時～午前３時５９分 sinya.png

②
JavaScript

jikan{ font-size: 32px; color:#FFFFFF;

background-color:#333333;
padding:0px 8px; }
世界時計
現在の『日本／東京』の時刻は
です

日本／東京オーストラリア／キャンベラインドネシア／ジャカルタエジプト／カイロイギリス／ロンドンアメリカ／ニューヨークアメリカ／サンフランシスコ

はじめまして。現在、職場で貸与されているPCとスマホでデータのやり取り出来ないかと模索してます...

2021-02-21T10:57:10+09:00

はじめまして。

現在、職場で貸与されているPCとスマホでデータのやり取り出来ないかと模索してます。

希望としてはスマホで作ったデータをPCにフォルダごとに入れたいと思っていますが、フォルダを作るところで躓いています。

方法があればお知恵を貸していただけないでしょうか。
よろしくお願いします。

また会社のPC・スマホなのでjクエリー等使わず純粋な(？)javascriptで作ることは可能でしょうか

Uncaught TypeError: Cannot read property 'datas...

2021-02-14T16:05:09+09:00

Uncaught TypeError: Cannot read property 'dataset' of null になる理由

お世話になっております。前回はありがとうございました。
２回目の質問になります。
今回の質問はコードが長いのでためらいましたが、どうしても自力では理解できず質問させていただきました。

現在TodoMVCというTodoアプリのサンプルサイトを参考に勉強しています。
https://todomvc.com/examples/vanillajs/
https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanilla-es6/src
質問の内容はエラーになる理由なのですが、エラー自体は解決できています。
しかし、そのコードでなぜエラーが解決できるのかがわからず質問させていただきました。
エラーの内容はこちらです。

Uncaught TypeError: Cannot read property 'dataset' of null
    at _itemId (view.js:7)
    at HTMLInputElement. (view.js:247)
    at HTMLUListElement.dispatch(helpers.js: 44)

問題の箇所はview.jsにあるbindEditItemSaveとbindEditItemCancelの★の部分です。
これらが参照しているview.jsの_itemId関数ではelementの親要素（またはさらにその親要素）のdatasetを取得しているのに
その子要素であるelement(編集中のinput)にdatasetを指定しないと上記のエラーになってしまいます。
この理由が理解できずに苦戦しています。
このエラーの理由をご教授いただけますでしょうか。

考えたこと

バブリングとキャプチャリングが関係しているのかと推察して
stopPropagationを使ってみましたがダメでした。

Todoアイテムを追加し編集中の状態のHTMLです


      
      Mark all as complete
    
       /* このdatasetを取得しているはず */
        
          
          テスト
          
        
         /* 編集中のinput */
      
    
      
        1 item left
        
          
            All
          
          
            Active
          
          
            Completed

helpers.js

export function $on(target, type, callback, capture) {
    target.addEventListener(type, callback, !!capture);
}

/**
 * セレクタに一致するすべての要素のイベントにハンドラを付けます。
 */
export function $delegate(target, selector, type, handler, capture) {
    const dispatch = (event) => {
        const targetElement = event.target;
        const potentialElements = target.querySelectorAll(selector);
        let i = potentialElements.length;
        while (i--) {
            if (potentialElements[i] == targetElement) {
                handler.call(targetElement, event);
            }
        }
    }
    $on(target, type, dispatch, !!capture);
}

view.js

// TodoアイテムのIDを10進数の整数値にパースする関数
// ★親要素のdatasetを取得しているはずなのに子要素のdatasetを作らないとエラーになる
const _itemId = element => {
  return parseInt(element.parentNode.dataset.id || element.parentNode.parentNode.dataset.id, 10);
};

export default class View {

  /**
   * Todoリストの編集中アイテムがフォーカスを失った時にhandlerを実行
   */
  bindEditItemSave(handler) {
    $delegate(this.$todoList, 'li .edit', 'blur', ({ target }) => {
      if (!target.dataset.iscanceled) { // ② ★これが無いとエラーになってしまう
        handler(_itemId(target), target.value.trim());
      }
    }, true);
    $delegate(this.$todoList, 'li .edit', 'keypress', ({ target, keyCode }) => {
      if (keyCode === ENTER_KEY) {
        target.blur();
      }
    });
  }

  /**
   * Todoリストの編集中アイテムでESCキーが押された時にフォーカスを外しhandlerを実行
   */
  bindEditItemCancel(handler) {
    $delegate(this.$todoList, 'li .edit', 'keyup', ({ target, keyCode }) => {
      if (keyCode == ESCAPE_KEY) {
        target.dataset.iscanceled = true; // ①★これが無いとエラーになってしまう
        target.blur();
        handler(_itemId(target));
      }
    });
  }
}

controller.js

export default class Controller {
  constructor(store, view) {
    this.store = store;
    this.view = view;
    view.bindEditItemSave(this.editItemSave.bind(this));
    view.bindEditItemCancel(this.editItemCancel.bind(this));
  }
    /**
     * エディットでアイテムを保存します。
     */
    editItemSave(id, title) {
        if (title.length) {
            this.store.update({ id, title }, () => {
            this.view.editItemDone(id, title);
            });
        } else {
            this.removeItem(id);
            }
    }

    /**
     * アイテム編集モードをキャンセルします。
     */
    editItemCancel(id) {
        this.store.find({ id }, data => {
            const title = data[0].title;
            this.view.editItemDone(id, title);
        });
    }
}

javascript超初心者です学校の課題で三段階ドロップダウンを作りたいのですが途中頭がこん...

2021-01-27T05:48:12+09:00

javascript超初心者です
学校の課題で三段階ドロップダウンを作りたいのですが途中頭がこんがらがってしまい
三個目を表示する方法いただきたくご教示頂きたく。。。。

以下コードです

1段階目(メイン)のプルダウンメニュー
＜select class="mainselect">
＜option value="">メイン＜/option>
＜option value="a">A＜/option>
＜option value="b">B＜/option>
＜/select>
2段階目(サブ)のプルダウンメニュー
＜select id="A" class="subbox">
＜option value="">サブ＜/option>
＜option value="aa">A-A＜/option>
＜option value="ab">A-B＜/option>
＜option value="ac">A-C＜/option>
＜/select>
＜select id="B" class="subbox">
＜option value="">サブ＜/option>
＜option value="ba">B-A＜/option>
＜/select>
3段階目(サブサブ)のプルダウンメニュー
＜select id="aa" class="subsubbox">
＜option value="">サブサブ＜/option>
＜option value="aa1">A-A１＜/option>
＜/select>

＜script type="text/javascript">

・サブBOXを全て非表示にする
var allSubBoxes = document.getElementsByClassName("subbox");
for( var i=0 ; i
allSubBoxes[i].style.display = 'none';
}

・全てのプルダウンボックスごとに処理
var mainBoxes = document.getElementsByClassName('pulldownset');
for( var i=0 ; i
var mainSelect = mainBoxes[i].getElementsByClassName("mainselect");
・メインのプルダウンメニュー
var subSelect = mainBoxes[i].getElementsByClassName("subbox");
・サブのプルダウンメニュー
mainSelect[0].onchange = function () {
・同じ親要素に含まれている全サブBOXを消す
var subBox = this.parentNode.getElementsByClassName("subbox");
・同じ親要素に含まれる.subbox
for( var j=0 ; j
subBox[j].style.display = 'none';
}
・指定されたサブBOXだけを表示する
if( this.value ) {
var targetSub = document.getElementById( this.value );
・「メインのプルダウンメニューで選択されている項目のvalue属性値」と同じ文字列をid属性値に持つ要素を得る
targetSub.style.display = 'inline'
}
}
});
・この後サブで選択したサブサブのみstyleのdisplayのをinlineにしたいのですがどうしたらいいでしょうか。。。
＜/script>

Javascript初心者です。現在次のようなことがしたいのですが、コードが動かずどなたか知恵...

2021-01-22T19:39:45+09:00

Javascript初心者です。
現在次のようなことがしたいのですが、コードが動かずどなたか知恵をお貸しくださると大変助かります。

・カレンダーの日付（tdに含まれる文字(td class=calendar_td)をクリックした際に、とあるdiv(class=purposeselection)を可視化したい(現段階ではスタイルシートのvisibility=hiddenに設定)

・作ってみたコード
var purpose=document.getElementsByClassName("purposeSelection")
document.addEventListener("click", function(e) {
if(e.target.classList.contains("calendar_td")) {
purpose.style.visibility='visible';
}
})

ですが、動かずどこがいけないのやら、見当がつきません。。。
何卒よろしくお願いします。。。

首記の件、教えて頂きたく。下記ソースコードで花びらの一枚を作成しました。これを題名の通り花びら...

2020-12-16T17:21:32+09:00

首記の件、教えて頂きたく。
下記ソースコードで花びらの一枚を作成しました。
これを題名の通り花びらの角度を変えて複製する方法がありましたら教えて頂きたくお願い致します。

イメージとして添付画像の様にしたいです。

'use strict;'

//init
const canvas = document.getElementById('test');
const context = canvas.getContext('2d');
const WIDTH = $('#test').get(0).width = $(window).width();
const HEIGHT =$('#test').get(0).height = $(window).height();

//花びら(上)
context.beginPath();
context.moveTo(270,50);
context.quadraticCurveTo(300, 50, 260, 150);

context.moveTo(260,150);
context.quadraticCurveTo(240, 165, 230, 150);

context.quadraticCurveTo(210, 50, 230, 50);

context.moveTo(230,50);
context.lineTo(250,80);
context.lineTo(270,50);
context.lineWidth = 8;
context.strokeStyle = 'rgb(255,204,255)';
context.save();

context.moveTo(260,150);
context.quadraticCurveTo(240, 165, 230, 150);

context.quadraticCurveTo(210, 50, 230, 50);

context.moveTo(230,50);
context.lineTo(250,80);
context.lineTo(270,50);
context.stroke();

題名の通り、値を変化させ続けることによってグラデーションの色を少しずつ変化させて、アニメーショ...

2020-12-10T11:23:14+09:00

題名の通り、値を変化させ続けることによってグラデーションの色を少しずつ変化させて、アニメーションの様にしたいのですがうまくできません。
やりたい事と教えて頂きたい事を分けていますが、合わせて教えて頂きたくお願い致します。

・やりたい事
1.描画の白い部分(描画が見えない部分)を上から下に少しずつ移動させたい。
2.白い部分が通過したら、通過した場所の色が元に戻るようしたい。
(下記ソースコード参照)

・教えて頂きたい事
1.addColorのオフセット値を少しずつ変化させる
2.同様にrgbの値を少しずつ変化させる
変化させたい値を変数とインクリメントを使用するというのが基本的な方法だと思うのですが、うまくできないのでご教示お願い致します。

下記は試みた事です。
addColorStopの場合
・offset値が0,1単位の為、インクリメントが使用出来ない
・対策としてfor文を使用して0.1単位で増加させようとしたが、描画に変化はない(白い部分が移動しない)
function drawFrame() {
let grad = context.createLinearGradient(250,400,320,700);
for(let i = 0; i
grad.addColorStop(0.3, 'rgb(204,0,0');
grad.addColorStop(i 'rgb(255,255,255)');
grad.addColorStop(0.9, 'rgb(204,0,0');
}
～～～～～～～～～～～～～～～～～～

rgb値の場合
・同様に下記にて変数とインクリメントを使用するがエラーが出る
rgb値は変数は使用出来ない?下記エラー参照
エラー内容：Javascript.js:10 Uncaught DOMException: Failed to execute 'addColorStop' on 'CanvasGradient': The value provided ('rgb(x,0,0') could not be parsed as a color.
(addColorStop'の実行に失敗しました：提供された値（ 'rgb（x、0,0'）を色として解析できませんでした。)
x = 1;
function drawFrame() {
let grad = context.createLinearGradient(250,400,320,700);
context.clearRect(0,0,WIDTH,HEIGHT);
grad.addColorStop(0.3, 'rgb(x,0,0');
grad.addColorStop(0.6, 'rgb(255,255,255)');
grad.addColorStop(0.9, 'rgb(x,0,0');

x = x++;

～～～～～～～～～～～～～～～～

ソースコード；