常連

注目の的

社会貢献

質問力

自己紹介

有名人

### 前提・実現したいこと

画像スライダーを実現させたい。

### 発生している問題・エラーメッセージ

値を取得できず、スライダー機能が動きません。

### 該当のソースコード
```javaScript
var currentItemNum = 1;
var $slideContainer = $('.slider__container'); 
var slideItemNum = $('.slider__item').length;
var slideItemWidth = $('.slider__item').innerWidth();
var slideContainerWidth = slideItemWidth * slideItemNum;
var DURATION = 500;

$slideContainer.attr('style', 'width:' + slideContainerWidth + 'px');

$('.js-slider-next').on('click', function (){
	if(currentItemNum < slideItemNum){
		$slideContainer.animate({left: '-='+slideItemWidth+'px'}, DURATION);
			currentItemNum++;
	}
});

$('.js-slider-prev').on('click', function (){
	if(currentItemNum > 1){
		$slideContainer.animate({left: '+='+slideItemWidth+'px'}, DURATION);
			currentItemNum--;
	}
});
```
```HTML
<div class="main">
    <div class="slider">
      <i class="fa fa-angle-left slider__nav slider__prev js-slider-prev" aria-hidden="true"></i>
      <i class="fa fa-angle-right slider__nav slider__next js-slider-next" aria-hidden="true"></i>
      <ul class="slider__container">
        <li class="slider__item slider__item1">IMG1</li>
        <li class="slider__item slider__item2">IMG2</li>
        <li class="slider__item slider__item3">IMG3</li>
        <li class="slider__item slider__item4">IMG4</li>
        <li class="slider__item slider__item5">IMG5</li>
      </ul>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
  <script src="app.js"></script>
```

```css
body {
	background: #f6f5f4;
	color: #333;
}

.main {
	width: 980px;
	margin: 30px auto;
}

.slider {
	width: 980px;
	height: 400px;
	overflow: hidden;
	position: relative;
}

.slider__container {
	padding: 0;
	overflow: hidden;
	margin: 0;
	list-style: none;
	position: relative;
}

.slider__item {
	width: 980px;
	height: 400px;
	background: #333;
	color: #fff;
	float: left;
	text-align: center;
	line-height: 400px;
	font-size: 5em;
}

.slider__item2 {
	background: #efb030;
}

.slider__item3 {
	background: #ef5b33;
}

.slider__item4 {
	background: #a737ef;
}

.slider__item5 {
	background: #414eef;
}

.slider__nav {
	color: #fff;
	position: absolute;
	top: 180px;
	font-size: 40px !important;
	cursor: pointer;
	z-index: 2;
}

.slider__prev {
	left: 20px;
}

.slider__next {
	right: 20px;
}
```



### 試したこと

$slideContainer.attr('style', 'width:' + slideContainerWidth + 'px');

ここまでは問題なく動いているようでした……

### 補足情報（FW/ツールのバージョンなど）

コンソールでは特にエラーは起きていませんでした。

javaScriptを使って画像スライダーを実現させたい！

《Javascriptのif文が反応しない》
Javascript初心者です。Javascriptのif文で下記のような文言を出したいと思うのですが、「同じ値」のメッセージが出てくれません。詳しい方、ご教授願います。

rand1:●（※0~2までのランダムな数字）
rand2:●（※0~2までのランダムな数字）
「rand1の方が大きい」「rand2の方が大きい」「同じ値」のいずれかがメッセージとして出る


以下、ソースコードです。



```html
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>if</title>
</head>
<body>
<script>
   var rand1=Math.floor(Math.random()*3)
   var rand2=Math.floor(Math.random()*3)
   document.write("<p>rand1:"+rand1+"</p>");
   document.write("<p>rand2:"+rand2+"</p>");
   
   if(rand1>=rand2){
       document.write("rand1の方が大きい値です");
   }
   else if(rand1<=rand2){
       document.write("rand2の方が大きい値です");
   }
   else if(rand1===rand2){
       document.write("2つは同じ値です");
   }
</script>
</body>
</html>

```

《Javascriptのif文が反応しない》

### 前提・実現したいこと

JavaScriptでタイマーを作成しています。
１５秒カウントダウンさせ、０秒になったら、タイマーを停止したいのですが、停止させることができません。

下記の部分がうまくいっていないようなのですが、どのようにかけばよいか教えていただけますでしょうか？

```
//残り時間が0秒未満だったら、タイマーを停止する。
    if(leftTime < 0) {
      clearTimeout();
    }
```

### 該当のソースコード

```
<script>
  const secondElement = document.querySelector('.second');
  const goalTime = new Date().getTime() + 15 * 1000;

  update();

  function update() {
    // 現在時刻
    const currentTime = new Date().getTime();
    // 目標時刻までの残り時間
    const leftTime = goalTime - currentTime;

    //残り時間が0秒未満だったら、タイマーを停止する。
    if(leftTime < 0) {
      clearTimeout();
    }
    // 秒の表示。
    secondElement.innerText = (leftTime / 1000).toFixed(2);
    // 次のフレームで再度update()を実行する
    requestAnimationFrame(update);
  }
</script>

```

残り時間が0秒未満でタイマーを停止する、停止の仕方

### 前提・実現したいこと
座席の表現方法

現在、javaScript + vue.jsでオフィスの座席を管理するwebアプリを開発しています。
会社ごとのレイアウトにあった座席を表現したいのですが、どのように実現すればいいか
悩んでいます。

アドバイスや、参考になるサイトなどあれば教えて欲しいです。
抽象的な質問で申し訳ないのですが、よろしくお願いいたします。


```ここに言語名を入力
javaScript
Vue
```

座席管理アプリについて

現在職業訓練の課題制作で、レスポンシブデザインのサイトを作成中です。
このサイトのナビゲーションのハンバーガーメニューを作成中(cssで)でして、ちゃんと理解できずにネットで調べて、とりあえずの形は出来たのたのですが、下記の2点について教えて下さい。
➀装飾の仕方
┗三本線の「三」の色や大きさを変えるにはどの部分を設定すればいいのでしょうか？
┗メニュー出現時文字の位置・色・大きさ・背景色等の装飾を変えるにはのどこを設定すればいいのか教えて下さい。

➁インターフェースの部分に問題があり、三本線「三」の線の部分を押すと反応するのですが、背景部分をクリックしても反応しません、どこを設定すればいいのか教えて下さい。

▼HTMLコード


```ここに言語を入力
<body>
<div id="inner">
	<header>
		<img src="assets/images/top/main.png">
		<h1>Granchocolate</h1>
		<div id="nav-drawer">
			<input id="nav-input" type="checkbox" class="nav-unshown">
			<label id="nav-open" for="nav-input"><span></span></label>
			<label class="nav-unshown" id="nav-close" for="nav-input"></label>
			<div id="nav-content">
				<ul>
					<li><a href="index.html">Top</a></li>
					<li><a href="#main">About</a></li>
					<li><a href="./product/index.html">Product</a></li>
					<li><a href="./news/index.html">News</a></li>
					<li><a href="./shop/index.html">Shop</a></li>
					<li><a href="./contact/index.html">Contact</a></li>
				</ul>
			</div>
		</div>
	</header>
コード
```

▼cssコード

```ここに言語を入力
@charset "utf-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
	font-size: 100%;
}

/*画像縮める設定*/
img {
	max-width: 100%;
	height: auto;
}
/*横スクロール出さない*/
html {
	overflow-y : scroll;
}

/*inner設定*/
#inner {
	width: 100%;
	max-width: 1920px;
	min-width: 320px;
	margin: 0 auto;
}

/*headerフルスクリーン指定*/
/*テキストを画像の上に配置*/
header {
	position: relative;
	display: block;
	width: 100%;
	height: 93vh;
	height: auto;
}

header h1 {
	position: absolute;
	top: 35%;
	transform : translateY(-35%);
	left: 5%;
	color: #FFF;
	font-size: 650%;
	font-family: "Times New Roman", Times, serif;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}

header #nav-drawer #nav-content ul {
	position: absolute;
	top: 20px;
	right: 20px;
	color: #F00;
	font-size: 18px;
	font-family: "Times New Roman", Times, serif;
	list-style: none;
	display:flex;
	justify-content: flex-end;
}

header #nav-drawer #nav-content ul li {
	padding-right: 20px;
}


/*ここからmessage*/
#message .caption {
	color: #F00;
	width: 15%;
	height: 10em;
	background-color: #000;
	font-weight: bold;
}
#message .caption p {
	padding-top: 1em;
	padding-left: 1em;
	font-size: 80%;
}


/*黒赤エリアを横並び指定*/
#message {
	display: flex;
}

#message .eachArea {
	background: #F00;
	height: 10em;
	width: 85%;
}
#message .eachArea h2 {
	padding-top: 15px;
	padding-left: 20px;
	color: #FFF;
	font-size: 80%;
}
#message .eachArea .eachArea_in {
	display: flex;
}
#message .eachArea .eachArea_in h3 {
	font-size: 150%;
	color: #FFF;
/*	padding-top: 10px;
	padding-left: 250px;*/
}

#message .eachArea .eachArea_in p {
	font-size: 105%;
	color: #FFF;
}





/*ここからcontents*/
#contents {
	display: flex;
	justify-content: space-between;
}
#contents p {

}

#contents .contents_in h2 {
	color: #F00;
	text-align: center;
	font-size: 160%;
	margin-top: 15%;
	margin-bottom: 10%;
	line-height: 1.5;
}
#contents .contents_in p {
	color: #F00;
	font-size: 120%;
	text-align: center;
	line-height: 1.5;
}





/*ここからcontentsBlock*/
#contentBlock {
	background: #F00;
	height: 5em;
	text-align: right;
	width: 100%;
}
#contentBlock h2 {
	/*line-height: 177px;*/
	padding-right: 250px;
	font-size: 150%;
	color: #FFF;
	font-weight: bold;
}




/*ここからmain*/

#main p {
	text-align: center;
	text-align: center;
	color: #F00;
	font-size: 120%;
	margin: 5% 10%;
	line-height: 1.5;
}
#main h2 {
	text-align: center;
	margin-top: 10%;
	text-align: center;
	color: #F00;
	margin-bottom: 5%;
	font-size: 170%;
}



/*mainの全画面フルスクリーン設定*/
#main .main_in {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}


/*Aboutの指定*/
#main .main_in h2 {
	position: absolute;
	bottom: -20%;
	font-size: 500%;
	font-weight: bold;
	color: #F00;
	left: 50%;
	transform: translate(-50%);
}

/*商品画像の指定1*/
#main .boxInner {
	position: relative;
	text-align: center;
	margin-bottom: 80px;
}
#main .boxInner dl {
	color: #FFF;
	background: #000;
	position: absolute;
	bottom: -5%;
	color: #F00;
	left: 22%;
	padding: 3%;
}
/*商品画像の指定2*/
#main .boxInner_ {
	position: relative;
	text-align: center;
}
#main .boxInner_ dl {
	color: #FFF;
	background: #000;
	position: absolute;
	bottom: -5%;
	color: #F00;
	left: 22%;
	padding: 3%;
}


/*ここからdivision*/
#division {
	position: relative;
	width: 100%;
	height: 5em;
	background: #F00 repeat;
	margin-top: 13%;
}
#division h2 {
	position: absolute;
	color: #F00;
	font-size: 5em;
	color: #FFF;
	left: 50%;
	transform: translate(-50%);
	bottom: -25%;
}

/*ここからbottom*/
#bottom {
	margin-bottom: 10%;
	display: block;
	width: 100%;
	height: auto;
}

#bottom .blockBottom {
	display: flex;
	margin-top: 10%;
}

#bottom .blockBottom dl {
	line-height: 1.5;
	margin-right: 10%;
	margin-left: 10%;
	color: #F00;
	margin-top: 10%;
	letter-spacing: 0.5em;
}
#bottom .blockBottom dl dt {
	font-size: 200%;
}

#bottom .blockBottom p {
	font-size: 150%;
	margin-right: 10%;
	text-align: right;
	display: block;
	color: #F00;
	margin-top: 50px;
}
#bottom .blockBottom dl dd {
	font-size: 110%;
	padding-top: 2%;
}
#bottom .blockBottom dl dd spn {
	font-size: 100%;
	color: #F00;
}



/*ここからfooter*/
footer ul {
	display: flex;
	justify-content: center;
	color: #FFF;
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}
footer ul li {
	padding-right: 1.5em;
	padding-left: 1.5em;
}

footer p {
	color: #FFF;
	text-align: center;
	padding-top: 2em;
	padding-bottom: 2em;
}
footer {
	background: #000;
	color: #FFF;
}




/*通常状態でハンバーガー消す*/
header #nav-drawer #nav-open {
	display:none;
}
header #nav-drawer .nav-unshown {
	display:none;
}




/*ここからレスポンシブ設定*/
/*ウィンドウ幅が最大900pxまでの場合に適用*/
@media screen and (max-width: 900px) { 
#contents .sideOne {
	display:none;
}
#contents .contents_in {
	margin: auto;
	margin-right: auto;
	margin-left: auto;
}
header h1 {
	font-size: 300%;
}

#contents .contents_in h2 {
	font-size: 130%;
}
#contents .contents_in p {
	font-size: 90%;
}


}




/*ウィンドウ幅が最大480pxまでの場合に適用*/
@media screen and (max-width: 480px) { 
header h1 {
	font-size: 200%;
}

	#contents p {
		display:none;
}

#message .eachArea .eachArea_in {
	font-size: 80%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
#contents .contents_in h2 {
	font-size: 100%;
}
#contents .contents_in p {
	font-size: 60%;
}
#main .main_in h2 {
	font-size: 200%;
}
#main p {
	font-size: 90%;
}
#main h2 {
	font-size: 110%;
}
footer ul {
	display: flex;
	flex-wrap: wrap; 
}

/*ここからハンバーガーメニュー*/
	header #nav-drawer #nav-open {
		display:block;
	}

header #nav-drawer {
	position: absolute;
	top: 1em;
	right: 3em;
	color: #FFF;
	}
/*チェックボックス等は非表示に*/
header #nav-drawer .nav-unshown {
	display:none;
}

/*アイコンのスペース*/
header #nav-drawer #nav-open {
	display: inline-block;
}
/*ハンバーガーアイコンをCSSだけで表現*/
header #nav-drawer #nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 3px;/*線の太さ*/
	width: 25px;/*長さ*/
	background: #555;
	display: block;
	content: '';
	cursor: pointer;
}
header #nav-drawer #nav-open span:before {
	bottom: -8px;
}
header #nav-drawer #nav-open span:after {
	bottom: -16px;
}

/*閉じる用の薄黒カバー*/
header #nav-drawer #nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
}
/*中身*/
header #nav-drawer #nav-content {
	overflow: auto;
	position: fixed;
	top: 0%;
	left: 0%;
	z-index: 9999;/*最前面に*/
	width: 80%;/*右側に隙間を作る（閉じるカバーを表示）*/
	/*max-width: 330px;*//*最大幅（調整してください）*/
	height: 100%;
	color: #FFF;
	background: #000;/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/
}
/*チェックが入ったらもろもろ表示*/
header #nav-drawer #nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;
}

header #nav-drawer #nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

header #nav-drawer #nav-content ul {
	display:block;
}

}

コード
```

ハンバーガーメニューの設定の仕方を教えて下さい。

# PC画面から携帯画面に変更させたいのですが。。。
PC場ではこのように画像が横に三つになっているのですが、携帯画面様で全て1列にしたいのですが、やり方がわかりません。
レスポンシブに対応できる様にするにはどうしたら良いでしょうか。


![イメージ説明](c713ae4223db9bfa31f2523c25aec5fb.png)

# 該当のソースコード

```HTML
    <div class="works-wrapper">
      <h2>WORKS</h2>
      <div class="line-bottom"><p></p></div>

      <div class="works-box">
        <div class="works-boxmin">
        <div class="img-box">
          <img src="CSS/img/architecture-4178938_1920.jpg" alt="" width="400px" height="400px">
          <p>Liberal Works</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/bird.jpg" alt="" width="400px" height="400px">
          <p>Team grey</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/chess-4167217_1920.jpg" alt="" width="400px" height="400px">
          <p>Gooogle</p>
        </div>
        </div>
      </div>
      <div class="works-box">
        <div class="works-boxmin">
        <div class="img-box">
          <img src="CSS/img/dubrovnik-4169379_1920.jpg" alt="" width="400px" height="400px">
          <p>Slack</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/house-4176711_1920.jpg" alt="" width="400px" height="400px">
          <p>Acro Force</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/koblenz-4179244_1920.jpg" alt="" width="400px" height="400px">
          <p>Wework</p>
        </div>
        </div>
        </div>
        <div class="works-box">
          <div class="works-boxmin">
        <div class="img-box">
          <img src="CSS/img/landscape-4147294_1920.jpg" alt="" width="400px" height="400px">
          <p>Cyber Agent</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/lizards-4177874_1920.jpg" alt="" width="400px" height="400px">
          <p>Ascope</p>
        </div>
        <div class="img-box">
          <img src="CSS/img/night-4170013_1920.jpg" alt="" width="400px" height="400px">
          <p>Ascope</p>
        </div>
       </div>
      </div>
      <div class="more">
        <a href="#">MORE</a>
      </div>
    </div>
```

```css 

.works-box {
  width: 100%;
  float: left;
}

.works-boxmin {
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-box {
    float: left;
    margin: 20px;
    position: relative;
}

.img-box p {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
}

.works-wrapper .more {
  width: 100%;
  height: 369px;
  float: left;
  position: relative;
}

.more a {
  padding: 22.18px 93px 22.82px 94px;
  border: 3px solid #FFFFFF;
  position: absolute;
  bottom: 147px;
  left: 0; right: 0;
  text-align: center;
}

* {
  padding: 0;
  margin: 0;
}

li {
 list-style: none;
}

body {
  width: 100%;
  font-family: "A-OTF 新丸ゴ Pro";
  color: #FFFFFF;
  background-color:#1D1D1D;
}

h1 {
  font-family: "A-OTF 新丸ゴ Pro";
  font-size: 70px;
}

h2 {
  margin: 0;
  font-size: 55px;
  text-align: center;
}

h3 {
  margin: 0;
  font-size: 35px;
}

p {
  font-size: 24px;
}

a {
  font-size: 24px;
  color: #FFFFFF;
  text-decoration: none;
}
```

# ご回答のほどよろしくお願いいたします。

レスポンシブに対応できません

クラスの
構文の
クラス名は識別子（変数の名前として使える文字や数字の組み合わせ）から選ぶ。
class クラス名
｛
型名　フィールド名;
戻り値の型メソッド名（引数リスト）
｛
　　文;
　　return 式；
　｝
｝
の戻り値の型メソッド名（引数リスト）
何が戻り値なのか、引数リストが何なのか教えてください。
値を返してほしい場合にreturnを使い返すものの意味が分かりません。

クラスの構文について

こんばんは初心者です。

コードリーディングをしていたら、javascriptのifの中に
```ここに言語を入力
 if (!flag && flag !== '') {
       _this.$el.removeClass('is-active');
       _this.$el.hide();
      } else {
        _this.$el.addClass('is-active');
      }
```
このような記述がありました。
```ここに言語を入力
if (!flag && flag !== '')
```
今回はこの記述に疑問点があるのですが、!flagがどのような意味を持つのか
理解ができませんでした。
ちなみにflagは定数です。

ご教授よろしくお願いします。

javascriptのif文で調べても理解がなかなかできないです。

### 前提・実現したいこと
![](81f516301952a6406687e833f5d6d7a3.jpeg)
画像のようなルーレットをjavascriptで作りたいのですが
レイアウトが上手く　4ｘ4　のマスにできません。。

ご教示お願いします。
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

```
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="roulette.css">
         <style>
         .colorRed {
    background-color:#ff4500;
}

.colorPink{
     background-color:#ffa07a;
}
.div_number{
    width:30px;
    height:30px;
}

.display{
    display: flex;
    width: 120px;
    height: 120px;

}
</style>

   
        <script>
            var initial_value =[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
           var number = 1;
           var grid = 0;
             
            
            
            var interval;
            var first = false;
            
            function start_set(){
                document.getElementById("start").disabled = true;
                document.getElementById("stop").disabled = false;
                document.getElementById("reset").disabled = false;
                if(first === false){
                    interval = setInterval(start_go,100);
                    first = true;
                }         
            }
            
            function start_go(){
               
                
                var div_number = document.getElementById('div' + number);
                div_number.classList.remove('colorRed');
               
                 grid = Math.floor(Math.random()*initial_value.length);
                 number = initial_value[grid];
              
                console.log(grid + ':' + number);
                
            　　div_number = document.getElementById('div' + number); 
                div_number.classList.add('colorRed');
            
                
                
            }
            
           
            function stop_set(){
                document.getElementById("stop").disabled = true;
                
                clearInterval(interval);
                document.getElementById("start").disabled = false;
                first = false;
                initial_value.splice(grid,1);
                var div_number = document.getElementById('div' + number);
                 div_number.classList.remove('colorRed');
                 div_number.classList.add("colorPink");
                  if(initial_value.length === 0){　
                  document.getElementById("start").disabled = true;
                  }
               
            }
            
            function reset_set(){
                  clearInterval(interval);
                first = false;
                document.getElementById("start").disabled = false;
                
                 for(var j = 1; j <= 16 ; j++){
                     var all = document.getElementById("div" + j);
                     all.classList.remove('colorPink');
                     all.classList.remove('colorRed');
                
                 }
                // var div_number = document.getElementById('div' + number);
                // div_number.classList.remove('colorPink');
                //  div_number = document.getElementById('div' + number);
                // div_number.classList.remove('colorRed');
               
            }
            
            window.onload =function(){
                var starter = document.getElementById("start");
                var stopper = document.getElementById("stop");
                var resetter = document.getElementById("reset");
                 var display = document.getElementById("display");
                
                starter.addEventListener("click",start_set,false);
                stopper.addEventListener("click",stop_set,false);
                resetter.addEventListener("click",reset_set,false);
                 document.getElementById("stop").disabled = true;
                 document.getElementById("reset").disabled = true;
             
                 for(var i = 0; i < initial_value.length; i++){
                     var div = document.createElement("div");
                     div.innerHTML = initial_value[i]; 
                     div.id = 'div' + initial_value[i];
                    div.classList.add("div_number");
                    //  console.log(initial_value[i]);
                 display.appendChild(div);
            }
                
            }
        </script>
        
    </head>
    <body>
        
        <div id = "display" class="display"></div>
        <button id ="start">スタート</button>
        <button id ="stop">ストップ</button>
        <button id ="reset">リセット</button>
        
    </body>
</html>
```

javascript でルーレット作成

マウスオーバーで画像の色を変えようとしているのですが、何故か1つ目の画像にしかリンクと動作が加わりません。他にもbxsliderなど入れていますが今は必要と思われるところだけ書いています。

マウスオーバーが上手く作動しません

### 実現したいこと
gemのカレンダーを使わずにオリジナルでカレンダーを実装しています。
文献を参考にしながらなんとかrubyでカレンダーを作りました。
がしかし、rubyで書いたコードをどうhtml.erbに反映させるかが分かりません。
一応.rubyで記述した配列のデータをhtml.erbには表示することまではできます。
お分かりの方いましたらご教授願います。

```ruby
class BookingController < ApplicationController
  def top
    @posts = [
      "今日からRailsの勉強するよー！",
      "カレンダーページ作成中！"
    ]

    month_table = [0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

    require "date"
    today = Date.today

    #うるう年か？
    is_uruu = ->(year) {
      (year % 4 == 0 and year % 100 != 0) or year % 400 == 0
    }

    #西暦1年1月1日から何日目か（すべてグレゴリオ暦で計算）
    days = ->(year, month, day) {
      uruu = ->(y) {
        y / 4 - y / 100 + y / 400
      }
      month_days = ->{
        month_table[0, month].inject(&:+) + (is_uruu.(year) && month > 2 ? 1 : 0)
      }
      y1 = year - 1
      y1 * 365 + uruu.(y1) + month_days.() + day - 1
    }

    #曜日の計算
    week_number = ->(year, month, day) {
      (days.(year, month, day) + 1) % 7
    }

    #カレンダーの出力
    Calender = ->(year, month) {
      gen = ->(from, to) {
        (from..to).map {|i| sprintf("%2d  ", i)}.join
      }
      putout = ->(i) {
        last = month_table[month]
        last += 1 if is_uruu.(year) and month == 2
        while i + 6 <= last
          puts gen.(i, i + 6)
          i += 7
        end
        st = gen.(i, last)
        puts st unless st.empty?
      }
      puts "#{year}/#{month}".center(27)
      puts "sun mon tue wed thu fri sat"
      w = week_number.(year, month, 1)
      puts "    " * w + gen.(1, 7 - w)
      putout.(8 - w)
    }
  end
end

```

```html
<h1>Booking#top</h1>
<p>Find me in app/views/booking/top.html.erb</p>
<% @posts.each do |post| %>
<%= post %>
<% end %>
```

![イメージ説明](3582544590b7d73bfc3c30112befe3e5.png)

rails: rubyで書いたコードをhtml.erbに表示させたい。

### 前提・実現したいこと

コールトラッキングのjavascriptになりますが、
テキストの電話リンクでは反応するのですが、
画像の電話リンクでは反応せず困っております。

画像の電話リンクで反応するようにjavascriptの修正したいのですが、
具体的な書き方を教えていただきたいです。

よろしくお願いします。


### 該当のソースコード

```javascript
<script type="text/javascript">
;(function() {
  var calltracking = undefined;
  document.addEventListener('click', function(e) {
    if (e.target && e.target.href && e.target.href.indexOf('tel:') == 0) {
      calltracking = {
        timestamp: (new Date()).getTime(),
        element: e.target
      };
    }
  });
  callListener = function () {
    if (calltracking) {
      var diff = (new Date()).getTime() - calltracking.timestamp;
      dataLayer.push({
        'event': 'Call',
        'gtm.element': calltracking.element,
        'duration': Math.floor(diff / 1000)
      });
      calltracking = undefined;
    }
  };
  document.addEventListener('touchstart', callListener);
  document.addEventListener('mousemove', callListener);
})();
</script>
```

```HTML
<a href="tel:0000000000"><img src="images/bnr_telBtn.png" alt="電話問い合わせ" class="banner"></a>
```

javascript　画像の電話リンクで反応させたい

こんにちは．
タイトルまんまで，常に一番下を見せたいです．
チャットシステムのようなものを作っているのですが，ページより下にテキストがいってしまうと，わざわざスクロールしなければいけなくなります．
しかし，それでは面倒くさいので，自動的に一番下になるようにしたいです．

```lang-jquery
$(function(){
  $("html,body").animate({scrollBottom:0});
});
```
自分で書いてみたコードです．
scrollTopがあるんだから，scrollBottomもあるはず？と思って（笑）．
しかし，できませんでした．

どうすればできるのでしょうか？

よろしくお願いします．

常に一番下までスクロールさせたい jquery/ javascript

[数字当てゲーム](http://www.actlink.co.jp/test/js/numtouch/)
javascriptの練習として以上のサイトを参考に数字当てゲームを作成しております。
しかし、以上のサイトのような1から９の数字を順に押すのではなく、ゲームスタート時にランダムで９つの数字を表示し、
(例えば2,4,1,5,8,9,7,6,3など)
且つ、この表示された順に3×3のランダムに配置された数字ボタンをタッチしなければならないというものにしたいです。
現状ボタンにランダムな数字を配置できているのですが、HTML側にランダムな数字を表示することと、また表示された数字とボタンに書いてある数字を紐付けるということができておりません。

```ここに言語を入力
$('.start').on('click', function () {
    $('#board,.duration-line,.result subboard__td--css').css('display', 'block');
    initButtons();
}
);


var startTime;
var isPlaying = false;
var numm;

//タイムスタート
function timerStart() {

    currentNum = 0;
    startTime = (new Date()).getTime();
    if (!isPlaying) {
        isPlaying = true;
        runTimer();
    }
}

function runTimer() {
    document.getElementById('duration').innerHTML = (((new Date()).getTime() - startTime) / 1000).toFixed(1);
    timer = setTimeout(function () {
        runTimer();
    }, 100);
}


//各ボタンに乱数をあてはめる
function initButtons() {
     buttons = [];
    for (var i = 1; i <= 9; i++) {
        var flag = true;
        while (flag) {
            var a = Math.floor(Math.random() * 9);
            if (buttons[a] == undefined) {
                buttons[a] = i;
                document.getElementById('button_' + a).value = i;
                 touch_button = document.getElementById('button_' + a).value;
                flag = false;
            }
        }
    }
    timerStart();
    setnum();
}

//
function setnum(){
 array2 = [];
for (var c = 1; c <= 9; c++) {
        var flag = true;
        while (flag) {
            var bis = Math.floor(Math.random() * 9);
            if (array2[bis] == undefined) {
                array2[bis] = c;
                display_button = $('#arr').text(array2);
            flag = false;

}
　}
　　}
　　　}



/*ボタンをクリックしたときの処理。ここが動きません。*/
$('.probbtn').on('click',function(){
    if(buttons[0] =  nummming[0]){
     touch_button.value = "";
     
  } else {
      initButtons();
  }
});


```
一応この部分で各々のボタンに整数の乱数値を入れHTML側で表示しております。
このランダムな数字ボタンを作っている段階で、ゲームスタート時に表示されるランダムな数字列も、HTML側で表示させられるのでしょうか？それとも別に関数を作らなければならないのでしょうか？

また順番通りに入力しないと、これまでクリックしたボタンは元通りとなり最初からやり直しになるという処理をfunction touched関数内に書くにはどうすれば良いでしょうか？
一応HTMLは以下のようにテーブル状の3×3のものとなっております。
```
<--!body以下-->
 <body id="body">
    <div class="title1">JavaScript</div>
   
    <button class="start" tabindex="1" accesskey="c">start</button>
    <p class="duration-line" name="test" style="display:none"></p>
    <table id="board" style="display:none">
        <thead>
            <tr>
                <th class="question" colspan="3"></th>
            </tr>
        </thead>
        <tfoot>
            <tr class="duration-line" style="display:none">
                <td class="subboard__td--css" colspan="3">
                    Time:
                    <span id="duration">0.0</span> (sec)
                </td>
            </tr>
            <tr>
                <td class="result subboard__td--css" style="display:none;" colspan="3">
                    Result:
                    <span class="finish-time"></span> (sec)
                </td>
            </tr>
            <tr>
                <td class="reset subboard__td--css" colspan="3">
                    <button type="button" class="reset-button" style="display: none" tabindex="0" accesskey="c">reset</button>
                </td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td class="one mainboard__td--css">
                    <input type="button" id="button_0" value="" onclick="touched(0);" />
                </td>
                <td class="two mainboard__td--css">
                    <input type="button" id="button_1" value="" onclick="touched(1);" />
                </td>
                <td class="three mainboard__td--css">
                    <input type="button" id="button_2" value="" onclick="touched(2);" /><br />
                </td>
            </tr>
            <tr>
                <td class="four mainboard__td--css">
                    <input type="button" id="button_3" value="" onclick="touched(3);" />
                </td>
                <td class="five mainboard__td--css">
                    <input type="button" id="button_4" value="" onclick="touched(4);" />
                </td>
                <td class="six mainboard__td--css">
                    <input type="button" id="button_5" value="" onclick="touched(5);" /><br />
                </td>
            </tr>
            <tr>
                <td class="seven mainboard__td--css">
                    <input type="button" id="button_6" value="" onclick="touched(6);" />
                </td>
                <td class="eight mainboard__td--css">
                    <input type="button" id="button_7" value="" onclick="touched(7);" />
                </td>
                <td class="nine mainboard__td--css">
                    <input type="button" id="button_8" value="" onclick="touched(8);" />
                </td>
            </tr>
        </tbody>
    </table>
</body>
```

もし内容の過不足等ございましたら遠慮なく仰っていただけると有難いです。
宜しくお願い致します。
＊修正いたしました

Javascriptで作成している数字当てゲームに関する質問です

https://paiza.jp/learning/page/problems

こちらのpaizaラーニングの問題でjavascriptを覚えたいと思っています。
早速問題を解こうと思ったのですが、何から書けばいいか分からず止まりました。

JavaScript入門編は、一通りやりました。
ですが、ずっとクエスチョンマークが頭に浮かんでしまいます。

paizaラーニングの中でも、最も簡単である問題。
https://paiza.jp/learning/page/problems
の掛け算も、うまくいきません。

    var kakezan = a*b
    console.log(kakezan);

では、駄目みたいです。
進みたいのですが、何が駄目なのかも分からずじまいです。


どうしても、javascriptを覚えたいと思っています。
ですが、出だしでどの方向に進むのかが分からないです。

javascriptを習得している方は、どのような手順で覚えていきましたか？
javascriptを書けるようになるため、何かアドバイスがいただけたら嬉しいです。

ひとつ、よろしくお願いいたします。

javascriptを覚えていく手順

###前提・実現したいこと
Googleタグマネージャを使って、Googleアナリティクスでクリック数を取得したい。
仮装ページビュー、イベントトラッキング、両方のやり方を知りたいです。

なお、Googleタグマネージャの自動イベントトラッキング機能ではなく、データレイヤーの変数を利用した方法で実現したいです。

※自動イベントトラッキング場合、class名やリンクURLが変更された時に、クリック数
が取得できなくなる可能性があります。また、Flash内のクリック数も取得したいため、上記方法で検討しています。

###疑問点
このとき、データレイヤー変数にデータを渡す方法は、
dataLayer.push();
dataLayer=[];
の2種類あり、

dataLayer=[];はページ内の一番目、
dataLayer.push();は二番目以降で使うようです。

また、このとき、順番に関係なくdataLayer.push();に統一するときは、

```
window.dataLayer=window.dataLayer || [];
dataLayer.push(['データレイヤ変数名':'渡す値']);
```
とやることで、統一することができるらしいです。

ここで、質問ですが、
Googleタグマネージャのスニペットタグは
```
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
```
です。

```
w[l]=w[l]||[];
```
が記載されいます。


```
window.dataLayer=window.dataLayer || [];

と
w[l]=w[l]||[];
は同じことを意味しているのではないのでしょうか？
```

Googleタグマネージャを使って、Googleアナリティクスでクリック数を取得する方法

### JavaScriptを使って、フォームの記入欄を動的に追加する(少し修正)

はじめまして、プログラミング初心者です。
質問の書き方に至らない点があると思いますが、ご指導お願いいたします。

JavaScriptを使って、フォームの記入欄を動的に追加,削除しようとしています。

### 発生している問題・エラーメッセージ

複製したinputタグに数字を振りたいのですが、うまくいきません。

追加ボタンを押すとname属性の値の数字[0]が増えて行くようにしたいのですが、常に[1]となってしまいます。

### 該当のソースコード

```html
<div class="foo">
  <div class="form-inline row mt10 bar" >
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail1]" value="" ></div>
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail2]" value="" ></div>
      <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
  </div>
</div>
<div class="row">
  <div class="col-md-3 mt15">
    <button class="btn btn-default" id="add_row" type="button">行追加</button>
  </div>
</div>
```

```javascript
$(document).on("click", "#add_row", function () {
    var target = $('.bar:last-child')
    target.clone(true).appendTo('.foo');
      $('.bar:last-child input').each(function(){
        $(this).val('');
        count = $('.bar').length-1;
        $(this).attr('name',$(this).attr('name').replace('0',count));
      });
    $( '.foo' ).on( 'click', '.remove_row', function() {
      if($('.bar').length > 1){
        $( this ).parents( '.bar' ).remove();
      }
    });
  });
```

### 試したこと

行追加ボタンを押したコードの結果
```html
<div class="foo">
  <div class="form-inline row mt10 bar" >
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail]" value="" ></div>
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail]" value="" ></div>
      <button class="btn btn-default mt20　remove_row" type="button">行削除</button>
  </div>
  <div class="form-inline row mt10 bar" >
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
      <button class="btn btn-default mt20　remove_row"　type="button">行削除</button>
  </div>
  <div class="form-inline row mt10 bar" >
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
      <button class="btn btn-default mt20　remove_row" type="button">行削除</button>
  </div>
<div class="form-inline row mt10 bar" >
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail]" value="" ></div>
      <button class="btn btn-default mt20　remove_row" type="button">行削除</button>
  </div>
</div>
<div class="row">
  <div class="col-md-3 mt15">
    <button class="btn btn-default" id="add_row" type="button">行追加</button>
  </div>
</div>
```


期待する結果
```html
<div class="foo">
  <div class="form-inline row mt10 bar" >
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail1]" value="" ></div>
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][0][detail2]" value="" ></div>
      <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
  </div>
  <div class="form-inline row mt10 bar" >
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail1]" value="" ></div>
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][1][detail2]" value="" ></div>
      <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
  </div>
  <div class="form-inline row mt10 bar" >
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][2][detail1]" value="" ></div>
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][2][detail2]" value="" ></div>
      <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
  </div>
<div class="form-inline row mt10 bar" >
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][3][detail1]" value="" ></div>
      <div class="col-md-3 mt10"><input type="text" class="form-control text-right" name="timetable[rows][3][detail2]" value="" ></div>
      <button class="btn btn-default mt20 remove_row" type="button">行削除</button>
  </div>
</div>
<div class="row">
  <div class="col-md-3 mt15">
    <button class="btn btn-default" id="add_row" type="button">行追加</button>
  </div>
</div>
```

JavaScriptの中にある変数countを、console.logで確認してみたのですが、変数countは期待通り値が１ずつ増えていました。

どこが問題なのか解らないので、ご指導お願いいたします。

JavaScriptを使って、フォームの記入欄を動的に追加したい

### 前提・実現したいこと
[ニフティクラウドmobile backend レベルアップセミナー　クーポン配信アプリを作ろう【Monaca編】の「お気に入り登録」](https://qiita.com/thuydg@github/items/caf3b3cb988bf76459ae#%E3%81%8A%E6%B0%97%E3%81%AB%E5%85%A5%E3%82%8A%E7%99%BB%E9%8C%B2%E6%A9%9F%E8%83%BD%E3%81%AE%E4%BD%9C%E6%88%90-1)で、Shop情報を以下のコードで取得しています。

このコードのままだと、nameの並び順を指定していないため、毎回、並び順が異なってしまいます。
ついては、ショップの名前順で昇順に表示したいのですが、どのように記述すればよろしいしょうか。

### 該当のソースコード

```javascript
//　mBaaSにお気に入り登録されているShop情報を取得してリストに表示する
function showFavorite() {

　　//リストをリセットします。
    $("#listFavoriteShop").empty();

    //表示名を指定します。
    $("#favorite_nickName").text(currentLoginUser.nickname + "のお気に入りショップ");

    //お気に入り登録した値を取得
    var fav_shops = currentLoginUser.favorite;

    //ショップ一覧を表示
    for (var i = 0; i < shopArray.length; i++) {
        var shop = shopArray[i];
        var selectStr = "selected='true'";

        //ショップのお気に入りが登録された場合の表示
        var tmpStrOff = "<div class='ui-field-contain'><label for='" + shop.objectId + "'>" + shop.name + "</label><select name='favorite_shop' id='" + shop.objectId + "' data-role='slider' data-theme='e' ><option value='off' " + selectStr+ ">Off</option><option value='" + shop.objectId + "'>On</option></select></div>";

        // //ショップのお気に入りが登録されていない場合の表示
        var tmpStrOn = "<div class='ui-field-contain'><label for='" + shop.objectId + "'>" + shop.name + "</label><select name='favorite_shop' id='" + shop.objectId + "' data-role='slider' data-theme='e' ><option value='off'>Off</option><option value='" + shop.objectId + "' " + selectStr+ " >On</option></select></div>";

        if ($.inArray(shop.objectId, fav_shops) == -1 ){
            $("#listFavoriteShop").append(tmpStrOff);
        }else{
            $("#listFavoriteShop").append(tmpStrOn);
        }
    }

    //Switchスライダーを更新
    $( "select[name=favorite_shop]" ).slider({
        defaults: true
    });
    $('select[name=favorite_shop]').slider('refresh');

    //画面遷移
    $.mobile.changePage('#FavoritePage');
}
```


### 試したこと

並び替えるコードとしてorderで指定することは公式ドキュメントに記載がありましたのでname、shop、Ｓｈｏｐと指定して試しましたが、うまくいきませんでした。

### 補足情報　データストアの操作画面を添付いたします。
![イメージ説明](5326e1695f27073b319d83fb8041da50.png)

monacaからmBaaSの値を取得した値を並び替える方法

### 前提・実現したいこと

HTMLとJavaScriptを使って2択クイズを作成しているのですが、問題1問ごとに制限時間(ここでは3秒)を設けてその設定時間が経過すると自動で次の問題へ進むような仕様にしたいと考えています。しかし、3秒ごとで自動でボタンを押したことにしようとsetIntervalを定義したものの、ユーザが回答を選択して次の問題へ進んでもカウントがclearIntervalを使用してもリセットされないことがわかりました。これだと、全ての問題に対して3秒の回答時間が確保できないので、ユーザがボタンを選択した場合はsetIntervalをリセットしたいと考えています。どのようにclearIntervalを書けばいいか教えていただきたいです。

### 発生している問題・エラーメッセージ
ユーザが回答を選択しようがしまいが必ず3秒ごとに不正解の処理がされてしまう。
```
エラーメッセージ
```

### 該当のソースコード

```Javascript
// 問題
var qa = [
  ['私は毎晩自分の部屋でラジオを聞きます。', 2],
  ['私はその時二十歳でした。', 1],
  ['あれは京都の写真ですか。', 1],
  ['多くの人が日曜日ごとに教会へ行きます。', 2],
  ['私は友達と放課後公園でサッカーをします。', 2],
  ['父は毎日朝食の前に新聞を読みます。', 2],
  ['メアリーとナンシーは仲良しです。', 1],
  ['その質問は私にとっては難しかった。', 1],
  ['両親は先週日本にいませんでした。', 1],
  ['私はボブと毎日この公園を走ります。', 2],
  ['ジェーンの姉は英語の先生ですか。', 1],
  ['兄と私は毎朝自転車で学校へ行きます。', 2],
  ['私は毎日午前7時に起きます。', 2],
  ['あなたは先週金曜日に職場にいましたか。', 1],
  ['私はサッカーが好きです。', 2],
  ['ボブのおじいさんは昔、野球の名選手だった。', 1],
  ['弟は自分の部屋で毎日テレビで野球の試合を見ます。', 2],
  ['その若い夫婦はクリスマスイブの夜、とても幸福でした。', 1],
  ['ケンと私は今日公園でアヤとミドリとテニスをします。', 2],
  ['デービッドは去年の7月ニューヨークにいましたか。', 1],
];
// 初期化
var count = 0;
var correctNum = 0;

window.onload = function() {
  // 最初の問題を表示
  var question = document.getElementById('question');
  question.innerHTML = (count + 1) + '問目：' + qa[count][0];
  disp();  // タイマー表示
  step();  // 制限時間
};


// クリック時の答え判定
function judge(btnNo) {
  if (qa[count][1] == btnNo) {  // 正解の場合
    correctNum++;
    var answer = document.getElementById('wrapper');
    answer.style.backgroundColor = '#58ACFA';
    document.getElementById('Good').play();
} else {  // 不正解の場合
    var answer = document.getElementById('wrapper');
    answer.style.backgroundColor = '#FA5858';
    document.getElementById('Bad').play();
}

  // 全問終了後
  if (count == 19) {
      if ( count+1 == correctNum ) { //全問正解の場合
          document.getElementById('Allclear').play();
      }
      if ( min == 0 ) { // クリア時間が1分未満の場合
          alert('正解数は' + correctNum + '問です！\nクリア時間は' + sec + '秒です');
      } else {
          alert('正解数は' + correctNum + '問です！\nクリア時間は' + min + '分' + sec + '秒です');
      }
  }

  // 次の問題表示
  count++;
  var question = document.getElementById('question');
  question.innerHTML = (count + 1) + '問目：' + qa[count][0];
}

  // ここで1問ごとに制限時間3秒を設けたいです
function step() {
    var Handler = setInterval('judge(3)', 3000);
    if ( document.getElementById('buttons').class == 'button') { clearInterval(Handler); } // この条件文がうまく機能しない
}

var start = new Date();

// 初期化
var hour = 0;
var min = 0;
var sec = 0;
var now = 0;
var datet = 0;
var hour1, min1, sec1;

function disp(){

	now = new Date();

	datet = parseInt((now.getTime() - start.getTime()) / 1000);

	hour = parseInt(datet / 3600);
	min = parseInt((datet / 60) % 60);
	sec = datet % 60;

	// 数値が1桁の場合、頭に0を付けて2桁で表示する指定
	if(hour < 10) { hour = "0" + hour; }
	if(min < 10) { min = "0" + min; }
	if(sec < 10) { sec = "0" + sec; }

	// フォーマットを指定（不要な行を削除する）
	var timer1 = hour + ':' + min + ':' + sec; // パターン1

	// テキストフィールドにデータを渡す処理（不要な行を削除する）
	document.form1.field1.value = timer1; // パターン1

	setTimeout("disp()", 1000);
}

```

### 試したこと

関数step()内の条件分岐でボタンを押された場合はsetIntervalをキャンセルさせるようclearIntervalを記述したが、機能しない。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

setIntervalの条件によるクリア方法

javascriptにおいて、ある関数を排他的に使われるようにして同時に実行
されないうようにしたいのですが、どのようにしたらよいでしょうか？
完全にブロックできれば理想ですが、１秒遅延させられればそれでも十分です。

私が試したのは以下のように「実行中フラグ」みたいなのをセットしてフラグがtrueの場合はsetTimeoutで処理を１秒遅らせるというように試してみたのですが、複数呼び出すと同時に実行されてうまくいきませんでした。。

```ここに言語を入力
var is_processing = false;

function somefunc() {
   var wait = 0;
   if (is_processing == true) {
      wait = 1000;
   }
   setTimeout(function() {
       // 処理
       is_processing = true;
　　　 do_something();
       
   }, wait);

   is_processing = false;
}

```
お手数ですがご教示いただけますと助かります。