Boards

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

だら@Crieit開発者

2019-01-29に作成

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

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

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

ボードとは？

ななこて

2020-06-10に投稿

js初心者です。質問です。
ボタンが二つならんでいてtype(1)を押して開いた状態でtype(2)を押したらtype(1)が開いたままになってしまうので閉じるようにしたいのですが下記jsにどのように追加すればいいでしょうか？
教えていただけると助かります。

$('.gnavi ul li:nth-of-type(1) a').on('click',function(){

$('.gnavi dl.type01').slideToggle().toggleClass('open');

return false;

});

$('.gnavi ul li:nth-of-type(2) a').on('click',function(){

$('.gnavi dl.type02').slideToggle().toggleClass('open');

return false;

});

tanaka tanaka

2020-06-09に投稿

JavaScript HTML グローバル変数

初めまして、
グローバル変数が何故か値を保持してくれません！！

あるfnction内でグローバル変数を使用しているのですが、
functionを抜けた後でも、」値を保持して欲しくて、function内でもグローバル変数に値を格納しています

しかしながら、
何故かグローバル変数を再度使用しようとしても、値が入ってません、、

どういった要因が考えられるでしょうか？？
どなたかお力添え願いたいです、、

たしぎ@プログラミング

2020-05-23に投稿

はじめまして、たしぎと申します。
どうしてもわからない所があり質問させて頂きました。
よろしくお願い致します。

今回の質問はエラーの解決ではなく、if文の中に真偽値があるケースの
コードの動きについての質問になります。
コードはこちらの「スクロールによって見え隠れするヘッダー」を参考にした
素のJavaScriptでのスクロールヘッダーの実装になります。

質問内容

24行目、コメント②番のticking = falseが必要な理由がわかりません。

試したこと

まず6行目のコメント①番のfalseをtureに変えてみましたが、機能しません。
これはわかります。
次に24行目のコメント②のticking=falseを削除してみると、機能しません。
これがわかりません。
なぜこれが無いと機能しないのか、なぜこの位置で機能するのかがわかりません。
6行目コメント①のticking=falseだけで機能するような気がしてしまうのです。
このif文の条件式 ( !ticking ) はどのような参照をしているのかが知りたいです。
スコープやif文のドキュメントや記事などを、いくら調べても出てきませんでした。

html

<header id="header">ヘッダー</header>

JavaScript

(function () {
  const target = document.getElementById("header"),
    height = 56;
  let offset = 0,
    lastPosition = 0,
    ticking = false; // ①

  function onScroll() {
    if (lastPosition > height) {
      if (lastPosition > offset) {
        target.classList.add("head-animation");
      } else {
        target.classList.remove("head-animation");
      }
      offset = lastPosition;
    }
  }

  window.addEventListener("scroll", function (e) {
    lastPosition = window.scrollY;
    if (!ticking) {
      window.requestAnimationFrame(function () {
        onScroll(lastPosition);
        ticking = false; // ② これがわかりません
      });
      ticking = true; // ③
    }
  });
})();

以上の疑問についてお教え頂けますでしょうか。
もしくは参考になる記事等がありましたらお教えください。
よろしくお願い致します。

(匿名) #1cf374b2

2020-05-04に更新

JavaScript

独学で躓いてしまった為、
初めてこちらの掲示板を利用させて頂きます。
何卒お願いいたします。
使用エディタはVisualStudioCodeです。

【質問内容】

JavaScript関連動画やWEBページを見ながら練習している初心者です。
絵のような画像を順番にフェードインして並べるプログラムを
実装してみたいのですが、複数表示しようとすると上手くいきません。
参考のWEBページ( https://qiita.com/t-ohtake/items/2997d449e7e243d77109 )

HTMLリソース中の２つのdocument.write() の内１つをコメントアウトすると、
正しく表示されますが、
どちらも順番に表示させようとするとimg_2のようにどちらか一方のみしか表示されません。
また、何回か連続でリロードするとどちらか一方だけに固定されている訳ではなく、
タイミングによってはもう一つの方が表示されると言った感じでした。

原因が分かる方がいらっしゃいましたら恐れ入りますが、
ご教示を頂けますと幸いです。

HTMLコード( index.html )

<!DOCTYPE html>
<html lang="en">
    <title>Document</title>
</head>
<body>

    <!--スクリプト読み込み-->
    <script type="text/javascript" src="index.js"></script>

    <script>

    //画像１表示
    document.write('<IMG src="/Users/apple/Desktop/frontend/img/apple.jpg" id="gazou1" name="gazou1" style="visibility : hidden;" onload="FadeInstr(1)">');

    //画像２表示
    document.write('<IMG src="/Users/apple/Desktop/frontend/img/orange.jpg" id="gazou2" name="gazou2" style="visibility : hidden;" onload="FadeInstr(2)">');

    </script>


</body>
</html>

JavaScriptコード(index.js)



opa=0; //透明度　0は透明
opacnt=3; //透明度の増減の間隔
timer=100; //setTimeout関数の実行間隔　ミリ秒
gazouId = "";//対象の画像

// フェードイン
  function FadeInstr(id)
     {

     //対象の切り替え
          if(id==1){
               gazouId = "gazou1";
          }else{
               gazouId = "gazou2";
          }
        MyIMG = document.getElementById(gazouId);
        MyIMG.style.visibility = "visible";
        FadeIn1(gazouId,opa);

            }
            //透明度を増加。
            function FadeIn1(gazouId,opa)
            {
                if (opa <= 100)
                {
                    MyIMG.style.filter = "alpha(opacity:"+opa+")"; // IE のソース
                    MyIMG.style.opacity = opa/100; //Mozilla Firefoxのソース
                    opa += opacnt;
                    setTimeout("FadeIn1('"+gazouId+"',"+opa+")", timer);
                }
            }

(匿名) #42f85734

2020-04-26に投稿


中学生です。今コロナウイルスの影響で学校が休校になっています。そのため僕の学校ではオンライン授業をしているのですが、その時に時間割がいつもと違うので、グーグルカレンダーに予定を登録すれば、Hangouts　Chatに自動投稿される機能を作ろうと思いました。

以下のソースでは予定の時刻の3分前になったら自動で送信するようにしています。ただ、これを試してもChatに送信されることはありませんでした。本番のものはカレンダーidやwebhookUrlは入力してあります。

僕はまだ初心者で、この休校期間中に初めて触れた初心者です。そのため、どうしていいのかわからず困っています。どなたか改善策を教えていただけないでしょうか。



function getEvents(){
 var kaichiCal　=CalendarApp.getCalendarById(''); //取得するGoogleカレンダーのIDを指定する。
 var webhookUrl = ''; 
 // 取得したWebhookのURLを記載する。Chatで確認できるはずなので、それを入力します。
  if(!kaichiCal) {
  Logger.log("Unable to access calendar with id=" + kaichiCal);
  return;
  }
  var events = kaichiCal.getEventsForDay(new Date()); // カレンダーから予定を取得する
  var hello = 'こんにちは。\n 直近の予定をお知らせします。\n ------------------------------- ';


  // 各予定1つ1つに実行する処理
  for(var i=1; i < events.length; i++){




      // 予定の件名、開始時間を取得
     var startTime = events[i].getStartTime();
     var eventName = events[i].getTitle();

      //予定の開始時間から3分引いた時刻を取得
      var threeMinutesBefore = (startTime.getTime() - 3*60*1000);

      //現在時刻を取得
      var now = new Date();    

      if (fiveMinutesBefore < now && now < startTime){

        // 時間をJSTに変換 (GASの標準はUTC)
   var startTimeJST = Utilities.formatDate(startTime, "JST", "HH:mm")
  　 //送信用のメッセ―ジ
   var message = hello + startTimeJST + " " + eventName + " ";
  //chatに送る
  postchat(message);
}
}
}

  // chatに投稿する

 function postchat(message,webhookUrl){
   var botMessage = { 'text' : message}
   var options = {
    'method': 'POST',
    'headers' : {
      'Content-Type': 'application/json; charset=UTF-8'
    },
    'payload':JSON.stringify(botMessage)  
  };
  var result = UrlFetchApp.fetch(webhookUrl, options);
  Logger.log(result);
}

(匿名) #b41acdfb

2020-02-08に投稿

昨日はご回答頂けまして誠にありがとうございます。

今回、変数の受け渡しで分からない点が出てきまして webで調べても分からなかった為ご教授頂けないでしょうか。

game_end = 'OFF';

function kan_edit(All_number){

      //setInterval用の関数
      function kan_anim_timer(){

          if( game_end == 'ON' ){
              clearInterval(kan_timerArray.shift());
            }

      //setInterval設定
      $(document).ready(function () {
          kan_timerArray.push(setInterval(kan_anim_timer, 100));
      });

}

上記の様にsetIntervalを clearIntervalで停止するものとなります。
この際に【kan_edit(All_number)】内で【timer++】を使ったタイマーによる分岐を作るとclearIntervalさせることは出来ました。

他関数
game_end = 'ON';

しかし、上記の様に別の関数で終了用の変数内容を指定したのですが既に動いている関数に反映させることが出来ませんでした。

ただ、他関数で変数を指定した後に生成したらどうなるのか確認したらそちらでは変数が反映されておりました。

実行中のsetInterval内のIF文の判定に外部functionで指定した変数を使うにはどの様にするべきでありますでしょうか？

ご教授頂けましたら幸いです。

(匿名) #b41acdfb

2020-02-05に投稿

昨日は回答頂けましてありがとうございます。

今回 for文の仕様面なのか？分からない点が出てきましてご教授頂けないでしょうか。

//引数用
function set(number){

var class_01 = number;

const $btn = $('<button class="add"><img src="./data/image/kan.gif" width="100" height="100"></button>');
$('.add').addClass(class_01);
$('.add').toggleClass('add');

      $('.layer').append($btn).trigger('create');

}


//ループ
$(document).ready(function(){

  $(function() {

    for (var i=1; i<4; i++) {

      set(i);引数

    }

  });

});

問題部位を簡略化しました。

こちらで動かすとループ文内の関数が走ってボタンが生成されます。
生成された後に付属しているクラス名を追加、基点となるクラス名を削除します。
生成されたボタンのクラス名は連番が付いていることになります。

しかし、１つだけ【add】クラス名のみ連番が付いていないものがありました。

変数「i」の数を増やしても同じ現象が起きておりました。

コンソールパネルでクラス名を確認すると【class_01】で追加されているはずの番号【1】のクラス名のみありません。

最初に生成されたボタンへのcss操作が適用されておりませんでした。

この現象を避けるにはどの様に記述すれば良いのでしょうか？

(匿名) #b41acdfb

2020-02-04に投稿

javascriptで動的に画像ボタンを生成する方法につきまして

javascriptで動的に画像ボタンを生成する方法を探しております。

var $btn = $('').addClass('px').text('ボタンだよ');
$('.layer').append($btn).trigger('create');

で文字を入れたボタンを動的に作成することが出来まして、その後文字ではなく画像をボタンとして使おうと試行錯誤しているのですが上手くいきません。

.document.write等を使ったりしたのですが生成出来ませんでした。

画像をボタンとして生成するのには上記のコードではダメなのでしょうか？

ご教授頂けましたら幸いです。

（下記が試してみて駄目だったコードです...

var $btn = $('').addClass('px').document.write('')
$('.layer').append($btn).trigger('create');

var $btn = $('').addClass('px').text('');
$('.layer').append($btn).trigger('create');

(匿名) #daff784c

2020-01-29に投稿

数学の関数グラフ

y=f(x)のグラフを書きたいです。特にy=xの2.4乗とかのグラフをかけるようにしたいです

(匿名) #c57aea78

2020-01-14に更新

Google Chart Googleスプレッドシート

Google chartを用いてスプレッドシート上の任意の列、行だけをデータをwebページに反映させる方法を教えてください。

これでは任意の列、行は抜き出せませんでした。

(function() {
'use strict';

  function drawChart() {
    var Linequery = new google.visualization.Query('スプレッドシートのURL');
    Linequery.send(handleQueryResponse);       
  }

  function handleQueryResponse(response) {
    var target = document.getElementById('target');
    var data;
    var options = {
      title: 'テストデータA',
      width: 500,
      height: 300
    };
    var chart = new google.visualization.LineChart(target);
    data = response.getDataTable();
    chart.draw(data, options);       
  }

  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
})();

(匿名) #b575dd87

2020-01-10に投稿

CreateJSでドラッグ＆ドロップを実装したいのですが、
下記のページを参考に作成したところ、
https://ics.media/tutorial-createjs/mouse_drag/
パソコン(マウス操作)やタブレット(ipad)では動作したのですが、
WindowsPC(Windows10)のタブレットPCのタッチパネルではドラッグしてくれませんでした。
タブレットPCのタッチパネルでドラッグ＆ドロップをさせるためには、どうすればいいでしょうか。