JavaScriptの質問をしたり答えたりする掲示板

2019-01-29に作成

JavaScriptに関する質問を何でもしていい掲示板です。匿名での投稿も可能です。どんなことでもどしどし書き込んでください。回答もどなたでも自由にできます。僕も回答できる内容であれば必ず回答します!

質問は下記に沿って書いていただくと回答しやすくなります。

  • 実際のソースコードがある場合、可能な範囲で書いていただくと問題点を見つけやすくなります。
  • 実際に発生したエラーメッセージがある場合、コピペしていただくと問題解決につながる可能性が高いです。
  • 見た目上の問題の場合、スクリーンショットを貼ると状況が把握しやすくなります。

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

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

【環境】
XHTML、CSS、javascript

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

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

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


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


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

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

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


person
(匿名) #6f7f58dc

Googleドライブにて
JPGデータをGoogleドキュメント化しております。
1データずつなら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:00 という形に変換したいのですが
JavaScriptで記述するにはどうすれば良いのでしょうか?

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

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


person
(匿名) #f32ca33b
comment
1

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 (個) と表示されてしまいます。

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

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


person
(匿名) #0cde091d
comment
1

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

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

よろしくお願いします。


person
(匿名) #c1f72455
comment
4

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

    <ul id="slide_wrapp">
      <li class="slide_item"><img src="img/1.png" alt=""></li>
      <li class="slide_item"><img src="img/2.png" alt=""></li>
      <li class="slide_item"><img src="img/3.png" alt=""></li>
      <li class="slide_item"><img src="img/4.png" alt=""></li>
    </ul>

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; //下に余白ができないように
}

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


person
(匿名) #297972e9
comment
10

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

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

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

時間に合わせて表示される画像を入れ替え
午前4時~午前9時59分 asa.png
午前10時~午後3時59分 hiru.png
午後4時~午後6時59分 ban.png
午後7時~午後11時59分 yoru.png
午前0時~午前3時59分 sinya.png


JavaScript

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

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

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

はじめまして。

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

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

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

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


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

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

現在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.<anonymous> (view.js:247)
    at HTMLUListElement.dispatch(helpers.js: 44)

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

考えたこと

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

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

<section style="display: block;" class="main">
      <input id="toggle-all" class="toggle-all" type="checkbox">
      <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li data-id="1613277309944" class="editing"> /* このdatasetを取得しているはず */
        <div class="view">
          <input class="toggle" type="checkbox">
          <label>テスト</label>
          <button class="destroy"></button>
        </div>
        <input class="edit"> /* 編集中のinput */
      </li>
    </ul>
      <footer class="footer">
        <span class="todo-count">1 item left</span>
        <ul class="filters">
          <li>
            <a href="#/" class="selected">All</a>
          </li>
          <li>
            <a href="#/active">Active</a>
          </li>
          <li>
            <a href="#/completed">Completed</a>
          </li>
        </ul>
        <button class="clear-completed" style="display: none;">Clear completed</button>
      </footer>
    </section>

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);
        });
    }
}

person
(匿名) #6c5377de

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-A1</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初心者です。
現在次のようなことがしたいのですが、コードが動かずどなたか知恵をお貸しくださると大変助かります。

・カレンダーの日付(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';
}
})

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


person
(匿名) #efa840ec
comment
11

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

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

'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();


person
(匿名) #efa840ec
comment
2

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

・やりたい事
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++;

~~~~~~~~~~~~~~~~

ソースコード;

    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 

タグ

投稿月

最近コメントされた投稿