常連

注目の的

社会貢献

質問力

拍手喝采

初めまして。
カウントアップタイマーを作ろうとしており、プログレスバーの設置は出来ているのですが
現在日時を0、指定日時完了までを100として、カウントアップが出来るのか探っている所でした。

すでに設置しているプログレスバーが

```
<div class="bar" style="width: %;"></div>
```
幅を指定することで右に伸びていく作りとなっているため、
指定要素に終了時間までを数値に置き換えて0〜100までの値が入るようにしたいです。
出来れば何度か使用することとなるので、ターゲットは年月日時分を指定したいと考えています。

よろしくお願いします。

カウントアップタイマーを作ろうとしています。

$ cat hoge.txt
``` 
256
512
1024
```

$ cat hoge.txt | 〜〜〜〜〜 (ここが知りたい)

```
256   8
512   9
1024  10
```
---
【やりたいこと】
数値が1より少なくなるまで2で割っていった回数を元データの横に表示させたい。

```
  cnt := 0
  n   := 256
  for n > 1 {
    n = n / 2
    cnt += 1
  }
  fmt.Println(cnt)
↓
結果
8
```

これをbashのワンライナーで実現することは可能でしょうか？
ワンライナー上で計算して、その結果をうまく表示させることが可能な方法があるようでしたらご教示いただけませんでしょうか？

【シェル芸】 ワンライナーで実現可能でしょうか？

ボタンを押すことで音楽を再生できるホームページを作成しています。
以下のプログラムを使って、音声ファイル1.mp3,音声ファイル2.mp3,音声ファイル3.mp3を再生する仕組みです。
```HTML
<button type="button" class="sounds" data-file="./sound/音声ファイル1">音声ファイル1</button>
```

```JavaScript
// グローバル変数
var syncerSounds = {
	flag: {} ,
	currentTime: null ,
} ;
// 即時関数
(function()
{
	// 設定
	var setClass = 'sounds' ;		// ボタン要素のクラス名
	var setDir = './' ;			// 音声ファイルがあるフォルダ(最後は[/])
	var setStopButtonId = 'stop-button' ;	// 停止ボタンに付けるID

	// クラス名が付いた要素を取得する
	var sounds = document.getElementsByClassName( setClass ) ;

	// 全ての要素にクリックイベントを設定する
	for( var i=0,l=sounds.length ; l>i ; i++ )
	{
		// クリックイベントの設定
		sounds[i].onclick = function()
		{
			// ファイル名の取得(getAttributeはtype,value,maxlengthの値を取得)
			var file = this.getAttribute( 'data-file' ) ;

			// 一度生成したエレメントは生成しない
			if( typeof( syncerSounds.flag[ file ] )=="undefined" || syncerSounds.flag[ file ] != 1 )
			{
				// 生成するエレメントの調整
				var audio = document.createElement( 'audio' ) ;

				// エレメントのIDを指定
				audio.id = file ;
				audio.src = setDir + file + '.mp3' ;

				// [audio]を生成する
				document.body.appendChild( audio ) ;
			}

			// 初回再生以外だったら音声ファイルを巻き戻す
			stopCurrentSound() ;
			// 音声ファイルを再生[play()]する
			document.getElementById( file ).play() ;
			// 最近再生した音声としてセット
			syncerSounds.currentTime = file ;
			// 初回再生が終わった判定用に[syncerSounds.flag]の値を0から1に変更する
			// エレメントを何度も生成しないようにするため
			syncerSounds.flag[ file ] = 1 ;
			// 終了
			return false ;
		}
	}
	// 前回の音声を停止する関数
	function stopCurrentSound()
	{
		var currentSound = document.getElementById( syncerSounds.currentTime ) ;
		if( currentSound != null )
		{
			currentSound.pause() ;
			currentSound.currentTime = 0 ;
		}
	}
	// 停止ボタンをクリックした時のイベント
	document.getElementById( setStopButtonId ).onclick = function()
	{
		stopCurrentSound() ;
		return false ;
	}
})() ;
```
上記のコードを改造し、
①formへ文字列を入力
②文字列をリストに分割
③リストの第一要素から順に再生クラスへ再生したいmp3名を受け渡す
④再生が最後まで終わるのを待って、第二要素、第三要素…とリストの最後の要素まで順に渡し、mp3を順番に再生する
といった処理を作りたいのですが、2曲目まで上手く動くにも関わらず、三曲以上連続で再生しようとすると、下記エラーが出て1曲目と最後の曲だけ再生されてしまいます。
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

こちら(https://foolean.net/p/679)のHPを参考に、再生が終了していることを判断してループを回すような処理を組みましたが、同様の結果でした。
```HTML
//フォームへの文字列入力コード
<form name="voiceForm" id="id_voiceform" value="">
<input type="text" id="id_textBox1" name="voiceText" value=""><br>
<button type="button" onClick="getStr()">連続再生</button>
<input type="button"  name="addButton" src="add.jpg" value="&quot;音声ファイル1&quot;" class="btn" onClick="addStr(this.value)" ></button>
<input type="button"  name="addButton" src="add.jpg" value="&quot;音声ファイル2&quot;" class="btn" onClick="addStr(this.value)" ></button>
<input type="button"  name="addButton" src="add.jpg" value="&quot;音声ファイル3&quot;" class="btn" onClick="addStr(this.value)" ></button>
```

```JavaScript
var voice;
var playingVoice;
//フォームへ文字を入力するクラス
function addStr(str)
{
	document.voiceForm.voiceText.value += str;
}
//取得した文字列を整形し、mp3を再生するクラス
function getStr(){
	var voiceListString = document.forms.id_voiceform.id_textBox1.value;
	var voiceList = [];			//ボイスを連続再生する際に使うリストの初期化

	voiceList = voiceListString.split('""');

	var listLength = voiceList.length;

	// 先頭から1文字を削除
	voiceList[0]= voiceList[0].slice(1);
	// 末尾から1文字を削除
	voiceList[listLength-1]= voiceList[listLength-1].slice( 0, -1 );

	for(var i = 0; i < listLength; i++){
	playingVoice=voiceList[i];
		if(i>0){
		voice.addEventListener("ended",function(e){
		ContinuityVoice();
		});
		}else{
		ContinuityVoice();
		}
		//voiceList[i].addEventListener("ended", function(e))
	}
}
//複数のmp3を連続で再生するクラス
function ContinuityVoice(){
	// 設定
	var setClass = 'sounds' ;		// ボタン要素のクラス名
	var setDir = './' ;			// 音声ファイルがあるフォルダ(最後は[/])
	var setStopButtonId = 'stop-button' ;	// 停止ボタンに付けるID
	var soundFile = "./sound/"+playingVoice;

	// ファイル名の取得(getAttributeはtype,value,maxlengthの値を取得)
	var file = soundFile;

	// 一度生成したエレメントは生成しない
	if( typeof( syncerSounds.flag[ file ] )=="undefined" || syncerSounds.flag[ file ] != 1 ){
		// 生成するエレメントの調整
		var audio = document.createElement( 'audio' ) ;

		// エレメントのIDを指定
		audio.id = file ;
		audio.src = setDir + file + '.mp3' ;

		// [audio]を生成する
		document.body.appendChild( audio ) ;
	}

	// 初回再生以外だったら音声ファイルを巻き戻す
	stopCurrentSound();

	voice = document.getElementById( file );

	// 音声ファイルを再生[play()]する
	voice.play() ;
	// 最近再生した音声としてセット
	syncerSounds.currentTime = file ;
	// 初回再生が終わった判定用に[syncerSounds.flag]の値を0から1に変更する
	// エレメントを何度も生成しないようにするため
	syncerSounds.flag[ file ] = 1 ;

	// 終了
	return false ;
}
// 前回の音声を停止する関数
function stopCurrentSound(){
	var currentSound = document.getElementById( syncerSounds.currentTime ) ;

	if( currentSound != null )
	{
		currentSound.pause() ;
		currentSound.currentTime = 0 ;
	}
	// 停止ボタンをクリックした時のイベント
	document.getElementById( setStopButtonId ).onclick = function()
	{
		stopCurrentSound() ;
		return false ;
	}
}

```
現在発生しているエラーを取り除き、正しく複数のmp3を連続して再生するにはどのような修正をすればよろしいでしょうか。
よろしくお願いします。

formから取得してきた文字列を利用して複数のmp3を連続して再生したい

診断ツールを作っているのですが作動しません。
間違っている部分を教えていただきたいです。

スタートを押しても表示が変わらない

<div>
<script type="text/javascript">
// 診断開始関数
function Start(){
     document.getElementById("start").style.display = "none";
     document.getElementById("sindan").style.display = "block";
     var divQues = document.getElementById("textQues");  
     divQues.textContent = "どうせ自分なんていい企業に就けないと思ってしまう";  
     var text = divQues.textContent;  
}
// 診断内容メイン処理
function Sindan(no){
     var divQues = document.getElementById("textQues");  
     var divAns = document.getElementById("textAns");
     var Status = ManageStatus();
     switch( Status ){
       case 1:    // どうせ自分なんていい企業に就けないと思ってしまう
         if(no == "Yes"){
             divQues.textContent = "リクルートスーツでいる時身だしなみで注意される";  
             var text = divQues.textContent;  
             divAns.textContent = "";  
             var text = divAns.textContent;  
         }else if(no == "No"){
             divQues.textContent = "同じ就職活動をしている異性に下心で近づいた経験がある";  
             var text = divQues.textContent;  
             divAns.textContent = "";  
             var text = divAns.textContent;  
         }
         break;
・
・
・
・
・
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "70%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
         }else if(no == "No"){
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "50%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
		 }
		 break;  
		case 11:    //同じ就職活動をしている異性に下心で近づいた経験がある
			  if(no == "Yes"){
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "50%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
         }else if(no == "No"){
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "20%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
		 }
		 break;  
		case 12:    //リクルートスーツでいる時身だしなみで注意される
			  if(no == "Yes"){
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "70%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
         }else if(no == "No"){
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "20%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
		 }
		 break;  
		case 13:    //履歴書の趣味・特技の欄にかけることが見つからない。
			  if(no == "Yes"){
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "40%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
         }else if(no == "No"){
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "20%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
		 }
		 break;  
	    case 14:    //聞いてもいないのに就活の話をしてしまう癖がある
			  if(no == "Yes"){
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "120%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
         }else if(no == "No"){
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "95%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
		 }
		  break;
		 case 15:    //行きたい企業の内定がすでに決まっている。
			  if(no == "Yes"){
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "5%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
         }else if(no == "No"){
             divQues.textContent = "診断が終わりました。";  
             var text = divQues.textContent;  
             divAns.textContent = "0%";  
             var text = divAns.textContent;  
             document.getElementById("start").style.display = "none";
             document.getElementById("sindan").style.display = "none";
		 }
		 break;
       default:
         break;
     }
}
// 診断ステータス取得関数
function ManageStatus(shori) {
    if(typeof ManageStatus.No === 'undefined'){
        ManageStatus.No = 15;
    }
    if(shori == "clear"){
        // 画面表示とステータスを全て初期値に戻す
        var divQues = document.getElementById("textQues");
        var divAns = document.getElementById("textAns");
        divQues.textContent = "診断を開始します。";  
        var text = divQues.textContent;  
        divAns.textContent = "";  
        var text = divAns.textContent;  
        ManageStatus.No = 15;
        document.getElementById("start").style.display = "block";
        document.getElementById("sindan").style.display = "none";
    } else {
        if (ManageStatus.No > 15){
            // 必要以上に足すとオーバーフローする可能性がある為、何もしない
        } else {
          ManageStatus.No++;
        }
    }
    return ManageStatus.No;
}
</script>
</div>

<h4><div id="textQues">診断を開始します。</div></h4>

<div id="start">
<input type=image onclick="Start();" src="https://programmer-navi.com/wp-content/uploads/2017/05/START.png" alt="START"/>
</div>

<div id="sindan" style="display:none;">
<input type=image onclick="Sindan('Yes');" src="https://programmer-navi.com/wp-content/uploads/2017/05/YES.png" alt="YES" />　　<input type=image onclick="Sindan('No');" src="https://programmer-navi.com/wp-content/uploads/2017/05/NO.png" alt="No" />
</div>

<div id="textAns"></div>  

<a href="javascript:;" onclick="ManageStatus('clear')">⇒診断開始に戻る</a>
### 該当のソースコード

診断ツールを作りたい

### 前提・実現したいこと

複数の関数を時間差で実行してそれを繰り返す方法を知りたく思っています。

#####実行内容
console.logで下記を表示

> （1秒後）コーヒーを注文する→（2秒後）支払いをする→（5秒後）飲む→（1秒後）コーヒーを注文する
> →（2秒後）支払いをする→（5秒後）飲む・・・エンドレスにこの処理

※本当はもっと色々な処理をさせたいのですが質問しやすいようにシンプルにしました。

検索しているとこのような処理に「Promise」を使用することをすすめている記事が多く、ひとまず自分なりに記述をしてみました。
ただ、これを繰り返し実行する方法がわからずにいます。


###知りたいこと

- 表題の「時間差で実行、さらに繰り返し」処理を行うにはどのような記述を行うのが良いのか
- `Promise`で処理をする選択は良いのか？その場合繰り返しをさせるにはどのように記述するべきか
- そもそも私の`Promise`の記述に誤りが無いか、もしくはもっと良い記述があればご指摘いただけると助かります

```JavaScript
function orderCoffee() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log('コーヒーを注文する');
			resolve();
		}, 1000);
	});
}
function payBill() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log('支払いをする');
			resolve();
		}, 2000);
	});
}
function drinkCoffee() {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			console.log('飲む');
			resolve();
		}, 5000);
	});
}

//下記を繰り返し実行させたい
orderCoffee()
	.then(payBill)
	.then(drinkCoffee)
```

どうぞ宜しくお願いします

複数の関数を時間差で実行してさらに繰り返す方法

jqueryまたはjavascriptにて画面中央に同じ画像がどんどん表れて、四方八方に移動しながら
フェードアウトしていく処理を書きたいのですがいまいち実装がおもいつきません。

縦横斜めいろいろな処理を書いてそれをランダムで実行させるなど考えたのですが
それだとその書いた処理分の角度しか飛ばないのでいろんな角度に飛ばすにはどうすればいいでしょうか？

jqueryで四方八方に画像が飛んでいく処理を書きたい

javascriptでチェックを付けたものを合計を出すシステムを作っています
さらにそこに、チェックを付けたものをテキストで出力したいのですが上手くいきません。
（具体例）国語(74)算数(50)理科(75)
phpでinputタグを生成してjavascritでチェックが入ったものの合計値を出しています。
問題箇所はまたこれとは別にチェックをいれたものを送信して同ページ内でテキスト化するときに
Notice: Undefined index: 理科 in.....
と表示されます。
[その際にこちらの記事を参考にしました。](https://php1st.com/574/)

また、調べたりないのかもしれないですが
フォームの書き方を調べてみてもhtmlで書かれており、ネーム属性が同じものしか見当たらず
あまり参考になりませんでした。

```ここに言語を入力
<!DOCTYPE html>
<html>
  <head>
    <title>てすと</title>
      <script language="JavaScript">
function total() {
yen = 0;
for (i=0; i< document.A_Form.length-1; i++) {
if (document.A_Form.elements[i].checked) {
yen += eval(document.A_Form.elements[i].value);
}
}
document.A_Form._total.value = yen;
}
</script>
```

```ここに言語を入力
   <div id="tab1" class="tab"> 
<form name="A_Form" action="index.php" method="get">
    <br><br>

    <?php

    $array = array(
        "体育"  => 75,
        "社会" => 58,
        "国語" => 74,
        "算数" => 50,
        "理科" => 75,


    );
    foreach($array as $key => $value){
        echo '<input type="checkbox" name="'.$key.'" value="'.$value.'" onclick="total()">'.$key.'(<font color="#000055"><b>'.$value.'</b></font>)';
        echo '<br>';
    }

    ?>
    合計点数：<input type="text" name="_total" size="5">　<input type="reset" value="やり直し">
<input type="submit" value="送信">
</form>
<?php
$subject = $_GET["$key"]
?>
   </div>

  </body>
</html>
```
phpのバージョンは7.2.1です。

フォームで受け取った値をテキストとして出力したい

### 前提・実現したいこと

カウントダウンのタイマーを実装したいです。
クッキーを利用して、ログインしたタイミングから30分だけ表示するカウントダウンを実現したいです。
中身はネットで拾ってきたもので、詳細は不明ですが、情報は可能な限り開示いたします。


### 発生している問題・エラーメッセージ
下記の文章の影響で、リンクが本来のURLに＃が追加されて表示されてしまいます。
イメージは
本来のURL：http://hogehoge
JavaScript後のURL：http://hogehoge#

```JavaScript
var	timeLimit = getTimeLimit( 1289901741,'#', 0.5);
```

この影響によりアクセス解析すると大量のアクセスがされてしまっているというエラーが発生しています。
改善方法を教えてください。


JavaScriptの全文は下記通りです。

### 該当のソースコード

```JavaScript

```

### 試したこと
下記の'＃'を本来のURLに変更するとリダイレクトのループが継続してしまいます。

```JavaScript
var timeLimit = getTimeLimit( 1289901741,'#', 0.5);
```


### わかっていること
・getTimeLimit()は独自関数ということ。
・getTimeLimit(id, page, hours)

参考ページ
[https://okwave.jp/qa/q8265784.html](https://okwave.jp/qa/q8265784.html)

カウントダウンのタイマーをJavaScriptで実装したいです。

インスタグラムみたいに画像を並べてそれをリンクつきにするというサイトをjsonで管理できるようにして作成しているのですがリンク先も同じ形式のサイトを想像しているのでそれもjsonで管理したいと思いできるようにしたいのですがどうすればいいかわかりせん。このようなjsonの形式でトップページにtitleが入り押すとそれぞれのリンクを作成してそのリンクに繋がりそれぞれの内容に入れ替わるようにしたいです。よ内容というのがdateからしたに入っている内容を出力したいです。簡単に言いますと一つのjsonでトップページの内容から次のリンクの内容までを出力できるようにしたいです。現在jsは枠だけは作れたのですがリンク別に作成するところで止まっている状態です。
```json
[
   
       {
            "titile1": 
            {
                "date":"20xx-x",
                "description":"説明が入ります",
                "img":"./imgs/IMG1.jpg",
　　　　　　　　　 "subimg": "./imgs/IMG5.jpg"
            }
        },
        {
            "titile2": 
            {
                "date":"20xx-x",
                "description":"説明が入ります",
                "img":"./imgs/IMG2jpg",
　　　　　　　　　 "subimg": "./imgs/IMG5.jpg"
            }
        },
        {
            "titile3": 
            {
                "date":"20xx-x",
                "description":"説明が入ります",
                "img":"./imgs/IMG3.jpg",
　　　　　　　　　 "subimg": "./imgs/IMG5.jpg"
            }
        },
        {
            "titile4": 
            {
               　"date":"20xx-x",
                "description":"説明が入ります",
                "img":"./imgs/IMG4.jpg",
　　　　　　　　　 "subimg": "./imgs/IMG5.jpg"
            }
        },
]
```


```js
$(function()
{
   $.ajax({
	   type: 'post',
	   url: 'json/contents.json',
	   async: true,
	   cache: false,
	   dataType: 'json',
	   scriptCharaset: 'utf-8',
	   success: function(data)
	   {
		   for(var i=0;i<data.length;i++)
		   {
			   var imgDiv = $('<a></a>').attr('href', data[i]["path"]);
			   var img = $('<div>').attr({'class':'col-md-4 imgCol'});
			   img.append($('<div class="imgContainer"></div>')
			   	  .append($('<img>').attr({"src":data[i]["img"],"width":"100%","height":"350px"}))
			   	  .append($('<div class="imgCover"><div class="coverTitle">'+data[i]["title"]+'</div></div>')));

			   img.appendTo(imgDiv);
			   imgDiv.appendTo($('#jsonData'));
		   }
	   },
   })
});

```
```ここに言語を入力
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>ポートフォリオサイト</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/jquery-ui.min.css">
    <link rel="stylesheet" href="./css/style.css">

    
    <meta name="description" content="ポートフォリオサイトです。">
    <meta name="keywords" content="キーワード">
    <meta name="language" content="ja">

    
    <link rel="shortcut icon" href="http://example.com/imgs/favicon.ico">
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>

<div class="main">
  <div class="container">
       <div class="row" id="jsonData">
         
       </div>
  </div>    
</div>

    <script src="jquery-2.1.3.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script src="main.js"></script>
</body>
</html>
```

jqueryでjson出力

### 前提・実現したいこと
ジャンケンを作っているのですが画像をクリックすると勝ち敗けあいこのパターンの画像を表示したいです
ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード

```ここに言語名を入力
ソースコード
             <!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <script src="js/jquery-2.1.3.min.js"></script>
        <link rel="stylesheet" href="css/sample.css">
        <title></title>
        <style type="text/css">
                * {
                        margin: 0;
                        padding: 0;
                }
        </style>
</head>

<body>
        
        <audio src="mp/aka!BGM.mp3" autoplay loop>

                <code>audio</code>
        </audio>
        <header>
                <h1>
                        <img src="https://fontmeme.com/permalink/180426/63520fd2ae9924d2f98848e4afbabf64.png" alt="">
                </h1>
        </header>
        
        <div>
                <p class='fadein'>

                        <span></span>
                        <br>
                        <span></span>
                        <br>
                        <span></span>
                        <br>
                        <span>きみ!</span>
                        <br>
                        <span></span>
                        <br>
                        <span></span>
                        <br>
                </p>
        </div>
        
        <div id="loading">
                <div id="loadImg">
                        <img src="http://a.top4top.net/p_1990j031.gif" alt="Loading">
                </div>
        </div>
        <div id="wrappAll">
                ジャンケン〜〜ポン
        </div>
        
        <div class="">
                <img src="img/red.gif" alt="" class="a">
                <div id="slide">
              
                </div>


                <main>
                        <ul>
                                <li id="gu">
                                        <img src="img/hitokage.gif" alt="">
                                </li>
                                <li id="cho" class="fusigidane">
                                        <img src="img/fusigidane.gif" alt="">
                                </li>
                                <li id="par" class="zenigame">
                                        <img src="img/zenigame.gif" alt="">
                                </li>
                        </ul>
                        <div>？
                                <span id="pc_hands">なに？</span>
                        </div>
                        
                        <div id="">勝ち
                                <span id="win">0</span>回</div>
                        <div id="">負け
                                <span id="lo">0</span>回</div>
                        <div id="">引き分け
                                <span id="aiko">0</span>回</div>
                </main>
                
              
                
            

                <footer></footer>
                <script>
                        //じゃんけん用のSCRIPTを書いてください
                       
                        //勝ち負け開始数字//
                        let win = 0;
                        let lo = 0;
                        let aiko = 0;
                        $("#gu").on("click", function () {
                                const a = Math.ceil(Math.random() * 3);
                                if (a == 1) {
                                        $("#jud").html('勝ち');
                                        $("#win").html(win);
                                        win += 1
                                        function imgClick() {
                                                alert("クリックされました");
                                        }

                                }
                                if (a == 2) {
                                        $("#jud").html("負け");
                                        $("#lo").html(lo)
                                        lo += 1
                                }
                                if (a == 3) {
                                        $("#jud").html("あいこ");
                                        $("#aiko").html(aiko);
                                        aiko += 1
                                }
                        });
                        $("#cho").on("click", function () {
                                const a = Math.ceil(Math.random() * 3);
                                if (a == 1) {
                                        $("#jud").html('勝ち');
                                        $("#win").html(win);
                                        win += 1
                                }
                                if (a == 2) {
                                        $("#jud").html("負け");
                                        $("#lo").html(lo)
                                        lo += 1
                                }
                                if (a == 3) {
                                        $("#jud").html("あいこ");
                                        $("#aiko").html(aiko);
                                        aiko += 1
                                }
                        });
                        $("#par").on("click", function () {
                                const a = Math.ceil(Math.random() * 3);
                                if (a == 1) {
                                        $("#jud").html('勝ち');
                                        $("#win").html(win);
                                        win += 1
                                }
                                if (a == 2) {
                                        $("#jud").html("負け");
                                        $("#lo").html(lo)
                                        lo += 1
                                }
                                if (a == 3) {
                                        $("#jud").html("あいこ");
                                        $("#aiko").html(aiko);
                                        aiko += 1
                                }
                        });
                     
                </script>

                <script src="js/jquery-2.1.3.min.js"></script>
                <script src="js/jquery-3.3.1.min.js"></script>
                <script src="js/audiojs/audiojs/audio.min.js"> </script>
                <script src="js/script.js"></script>
</body>

</html>

### 試したこと
クリックすると画像が別ページで表示されたりします。
同ページで表示したいです
質問下手ですいません
ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

ジャンケンを作っているのですが画像をクリックすると勝ち敗けあいこのパターンの画像を表示したいです

こちらで同じ質問があり解決されているのですが、解決された方法ではうまく表示しませんでした。
（https://teratail.com/questions/114510
「slick.jsの左右画像が見えるスライダーで左右で見える画像幅を変えたい」）
【左右に見えている画像幅が同じ設定】
```html
<div class="FFF">
<div><a href="#"><img src="./img/img01.jpg"></a></div>
<div><a href="#"><img src="./img/img02.jpg"></a></div>
<div><a href="#"><img src="./img/img03.jpg"></a></div>
<div><a href="#"><img src="./img/img04.jpg"></a></div>
<div><a href="#"><img src="./img/img05.jpg"></a></div>
</div>
```
```css
.FFF{
    width: 100%;
}
```
```javascript
$(function() {
　　$('.FFF').slick({
　　　　　autoplay: true,
　　　　　arrows: false,
　　　　　centerMode: true,
　　　　　centerPadding: '15%',
　　　　　dots:true,
　　　　　focusOnSelect:true,
});
});
```
【解決方法を試したところ】
スライダーのドットは表示されていますが、本来画像が表示される個所が空白となりました。
> slickの要素の外側を囲う要素に幅を付けてoverflow: hidden;で消してしまう方法もあります。
とご回答されていましたので、そちも試しましたが同じ結果でした。
```css
.FFF{
    width: 100%;
}
.slick-slide {
    width: 50px !important;
}
.slick-slide.slick-current {
    width: 300px !important;
}
.slick-slide.slick-current + .slick-slide {
    width: 100px !important;
}
```
```javascript
$(function() {
　　$('.FFF').slick({
　　　　　autoplay: true,
　　　　　arrows: false,
　　　　　centerMode: true,
　　　　　//centerPadding: '15%',
　　　　　dots:true,
　　　　　focusOnSelect:true,
});
});
```
他に設定する箇所があるのでしょうか？
画面幅いっぱいに表示したいので「width: 100%;」にしていますがこちらを「width: 450px;」にすると画面左端から450px分に5枚の画像が50px,50px,50px,50px,300pxくらいに短冊のように表示されました…

slick.jsで左右に画像を表示し左右で見える画像幅を変えたい

## お願い
現在ドラッグアンドドロップの勉強をしています。
ドラッグ&ドロップでDOMの移動を実装しようとしたところ、下記について困っています。
どうすれば良いかご教示いただけませんでしょうか？
よろしくお願いいたします。


## 実現したいこと
**何をしたいか**
jQueryを使わず、ドラッグアンドドロップによるパーツの並び替えを実装をしたい。
参考サイトを見てみると、clickした要素に`darggable=true`を付与するだけで移動、並び替えをしています。
id,data属性を付与せずにdndを実装する方法はありませんでしょうか？


**何のためにしたいか**
下記参考サイトの簡易版を作成したい。
参考: [pingendo https://v40.pingendo.com/new](https://v40.pingendo.com/new)

参考サイトでは、
パーツパレットからiframeへパーツをdndしてモックアップを作成することができます。
パーツパレットからの移動だけでなく、ドロップ後、iframe内でもパーツの移動、並び替えができます。

私が実現したいのは後者の、選択したパーツの移動ができる実装をしたいです。


## 困っていること
パーツの移動をしたいが、コピーペーストになっている

## 調べたこと
パーツ移動の実装方法は

- dragイベントでdrag元のidを`dataTransfer.set('text', drag元のid)`する
- dropイベントで`document.getElementById(drag元のid)`をして`appendChild`する。



## 上記の実装ではできない理由
今回は１つのページに同じパーツが複数ある想定なので、idでの取得はできない。


## 試したこと
[自分の実装jsfiddle　https://jsfiddle.net/juubee/6v3xfd76/](https://jsfiddle.net/juubee/6v3xfd76/)

- insidednd.js

```js:insidednd.js
const textToNode = (htmlString) => {
  let tempDiv = document.createElement('div');
  tempDiv.innerHTML = htmlString.trim();

  return tempDiv.firstChild; 
  
}

const documentBody = document.body;

documentBody.onclick = (e) => {
  e.target.setAttribute('draggable', true);
};

documentBody.ondragstart = (e) => {
  console.log("Drag Started");
  const insertingHTML = e.target.outerHTML;
  e.dataTransfer.setData("Text", insertingHTML);
};

documentBody.ondragend = (e) => {
  console.log("Drag End");
};
    
documentBody.ondragover = (e) => {
  // console.log('Dragover');
  e.preventDefault();
  e.stopPropagation();
};
        
documentBody.ondrop = (e) => {
  console.log('Drop event');
  e.preventDefault();
  e.stopPropagation();
  
  const htmlString = e.dataTransfer.getData('text');
  const node = textToNode(htmlString);
  
  e.target.appendChild(node);
};

```

- dnd.html

```html: dnd.html
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="" name="description">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>HTML5 dnd</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">
    <div class="row" >
      <div class="col-12" >
        <header >
          <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
              </form>
            </div>
          </nav>
        </header>
      </div>
    </div>
    <div class="row" >
      <div class="col-9" >
        <div class="row" >
          <div class="col-6" >
            <div class="table-responsive" >
              <table class="table table-bordered table-striped mb-3 small">
                <thead>
                  <tr>
                    <th scope="col">Component</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td class="align-middle p-0"><a href="project-show.html"><img class="mr-3" data-src="holder.js/80x60?theme=noimage" width="80" height="60" alt=" [80x60]" style="width: 80px; height: 60px;" >Component</a></td>
                  </tr>
                  <tr>
                    <td class="align-middle p-0"><a href="project-show.html"><img class="mr-3" data-src="holder.js/80x60?theme=noimage" width="80" height="60" alt=" [80x60]" style="width: 80px; height: 60px;" >Component</a></td>
                  </tr>
                  <tr>
                    <td class="align-middle p-0"><a href="project-show.html"><img class="mr-3" data-src="holder.js/80x60?theme=noimage" width="80" height="60" alt=" [80x60]" style="width: 80px; height: 60px;" >Component</a></td>
                  </tr>
                  <tr>
                    <td class="align-middle p-0"><a href="project-show.html"><img class="mr-3" data-src="holder.js/80x60?theme=noimage" width="80" height="60" alt=" [80x60]" style="width: 80px; height: 60px;" >Component</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="col-6" ></div>
        </div>
      </div>
      <div class="col-3" ></div>
    </div>
    <div class="row" >
      <div class="col-12" >
        <footer >
          <div class="row">
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Special title treatment</h5>
                  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title">Special title treatment</h5>
                  <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
  </div>
  <script src="./insidednd.js"></script>
</body>

</html>
```

ドラッグ&ドロップがコピーアンドペーストになってしまう

jqueryで診断コンテンツを作りたいのですが
具体的には1つの画面で、２つの選択肢の質問に３０問位答える形です。
裏の設定として８項目（a,b,c,d,e,f,g,h）あり、回答を選択すると、いずれか一つの項目にポイントが加算され
最終的にどの項目が高いかで、結果が出るものを作成したいのです。

ネットでしらべたところ

html
```
    <legend>Q1</legend>
    <label><input type="radio" name="c1" value="1" /> A1</label>
    <label><input type="radio" name="c1" value="2" /> A2</label>
    <label><input type="radio" name="c1" value="3" /> A3</label>

    <legend>Q2</legend>
    <label><input type="radio" name="c2" value="1" />A4</label>
    <label><input type="radio" name="c2" value="2" />A5</label>
    <label><input type="radio" name="c2" value="3" />A6</label>

    <legend>Q3</legend>
    <label><input type="radio" name="c3" value="1" />A7</label>
    <label><input type="radio" name="c3" value="2" />A8</label>
    <label><input type="radio" name="c3" value="3" />A9</label>

<button id="check">Check</button>
<div id="result"></div>
```
js
```
$(function(){
    $radio = $(':radio');

    $('#check').click(check);//診断ボタン押させる
    
    function check(){
        var total = 0;
        var result = '';        
        
        $radio.filter(':checked').map(function(){
            total += Number(this.value);
        });
        
        alert(total);
        
        if (total > 6) {
            result = '結果１';
        } else if( total > 3 ) {
            result = '結果２';
        } else if( total > 0) {
            result = '結果２';
        } else {
            result = '何も選択されていません';
        }            
        $('#result').html(result);
    }
});

```
までは発見したのですが、これでは変数が１つしか使えず、変数を８個使う方法が分かりません。

どなたかご回答よろしくお願いいたします。

jquery、診断コンテンツ作成

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

プログラミング知識の無い初心者です。
日にちをまたいだ予約管理フォームを作成するにあたり
Ｇｏｇｇｌｅアンケートフォーム⇔スプレッドシート⇔カレンダーを同期させたいと思っているのですが
下記のエラーメッセージがでてきてしまい、開始日時と終了日時を反映することができずにいます。
ご教示いただけますと幸いです。

```
エラーメッセージ


```
function sendToCalendar(e) {
 try{
 //有効なGooglesプレッドシートを開く
 var ss = SpreadsheetApp.getActiveSpreadsheet();
 var sheet = ss.getSheets()[0];
 Logger.log(sheet.getSheetId());

//新規予約された行番号を取得
 var num_row = sheet.getLastRow();

//新規予約された行から名前を取得
 var nname = sheet.getRange(num_row,4).getValue();
 
 //メールアドレスの取得
 var nmail = sheet.getRange(num_row,2).getValue();

//予約を記載するカレンダーを取得
 var calApp = CalendarApp.getCalendarById("@group.calendar.google.com");


//予約の開始時間を取得
 var stime = new Date(sheet.getRange(num_row,6).getValue());

//予約の終了時間を取得
 var etime = new Date(sheet.getRange(num_row,8).getValue());

//予約の開始日を取得
 var sdate = new Date(sheet.getRange(num_row,5).getValue());

//予約の終了日を取得
 var edate = new Date(sheet.getRange(num_row,7).getValue());
 
 
 
 var sdates= new Date(sdate.getFullYear(),sdate.getMonth(),sdate.getDate(),stime.getHours(),stime.getMinutes(),0);
 var sdatee= new Date(sdate.getFullYear(),sdate.getMonth(),sdate.getDate(),stime.getHours(),stime.getMinutes(),0);

 var edates= new Date(edate.getFullYear(),edate.getMonth(),edate.getDate(),etime.getHours(),etime.getMinutes(),0);
 var edatee= new Date(edate.getFullYear(),edate.getMonth(),edate.getDate(),etime.getHours(),etime.getMinutes(),0);



// 先約があるかどうか調べる
 if(calApp.getEvents(sdates, edatee)==0){
 
 var thing = nname+"様　ご予約";

//予約情報をカレンダーに追加
 var r = calApp.createEvent(thing, sdates, edatee);
 var thing =nname+"様　\n\n ご仮予約を承りました。\n 別途、確定のお知らせをいたします。\n\n ありがとうございました。\n https://calendar.google.com/calendar/embed?src=group.calendar.google.com&ctz=Asia%2FTokyo"
 
 MailApp.sendEmail(nmail,"仮ご予約",thing);
 }
 else{
 var thing =nname+"様　\n\n ご予約の時間に先約がありましたので、\n 申し訳ございませんが、ご予約いただけませんでした。\n\n ご予定を変更して再度お申込みください。\n https://calendar.google.com/calendar/embed?src=yokohamaymca.org_ara06o9qo7vnh2b0naerccvugs%40group.calendar.google.com&ctz=Asia%2FTokyo"
 
 MailApp.sendEmail(nmail,"ご予約できませんでした",thing);
 }
 
   } catch(exp){
 //実行に失敗した時に通知
 MailApp.sendEmail(nmail, exp.message, exp.message);
 }
}


```ここに言語名を入力
ソースコード
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

日にちをまたいだ予約管理フォームのエラーメッセージ

##わからないこと
いつも大変お世話になっております。
この度ajaxを通して非同期処理を行い、結果の箇所でビュー側にtableを追加しようとしているのですが、うまくいっておりません。
処理は通っているのですが、どこが原因なのかわかっていないのでご教授いただければ幸いです。

```javascript

$(".js-open-copy").click(function(e) {
                        e.preventDefault();
                        var url  = $(this).attr("href");
                        modalCopy(url);
                    });
                    // }}}
                    // modalMatching {{{
                    var modalCopy = function(href){
                        var $bigModel = $("#copyModal").modal();
                        $bigModel.find(".modal-body").resizable({
                            handles: "e",
                            resize: function(e, ui){
                                var parent = ui.element.parent();
                                ui.element.siblings().css('width', (1 - ui.element.width()/parent.width())*100+"%");
                            },
                            stop: function(e, ui) {
                                var parent = ui.element.parent();
                                ui.element.css('width', ui.element.width()/parent.width()*100+"%");
                            }
                        });
                        $.ajax({
                            type: "POST",
                            url: href,
                        }).done(function(html){
                            var $dom = $(html);
                            $("#copyModal").find(".modal-body").empty().append($dom);
                            $("#copyModal").find(".table-search td > a").click(idEditBtnClicked);
                            $("#copyModal").find(".js-add-job-copy").click(function(e) {
                                e.preventDefault();
                                var url  = $(this).attr("href");
                                addCopy(url);
                            });
                        }).fail(function(error){
                            $("#copyModal").modal('hide');
                        });
                        return false;
                    };
var addCopy = function(url) {
                        $.ajax({
                            type:"POST",
                            url:url,
                        }).done(function(html){
                            var i = 0;
                            var tag = '';
                            var table = '<table class="table-search m-a-0" id="jobTable"'+ html.jobid +'"">';
                            $.each(html.jitems, function(index, value) {
                                var tr ='<tr><th>'+ value.meta.name + '</th><td data-meta=' + html.jitems[i] + '><span>' + value.html + '</span><a href="javascript:void(0)"><i class="fa fa-pencil"></i></a></td></tr>';
                                i++;
                                $(table).prepend(tr);
                            });
                            var tableEnd = '</table>';
                            var ht = $(table).prepend(tableEnd);console.log(ht);
                            // $("#copyModal").find('table').after(html);
                            // $("#copyModal").find('table.table-search:last').after(ht);
                            $("#copyModal").find(".client-table-box").after(ht);
                        }).fail(function(){
                            $("#copyModal").modal("hide");
                        });
                    };
```
```html
<div class="client-table-box">
<table class="table-search m-a-0" id="jobTable{{$jobid}}">
@foreach($jitems as $jitem)
<tr>
<th></th>
<td data-meta=""><span></span><a href="javascript:void(0)"><i class="fa fa-pencil"></i></a></td>
</tr>
@endforeach
</table>
</div>
<a href="" class="js-add-job-copy">追加でコピーする</a>

```

```
<div class="modal fade in" id="copyModal">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h5 class="modal-title">コピー</h5>
</div>
<div class="modal-body p-a-0 clearfix">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>



```
```php
public function addcopy() {
        $time = microtime(true);
        $jobId = request()->input('jobid');

        $client = Job::select('client_id')->where('id',$jobId)->first();
        $client = $client['client_id'];
        $fulltext = Fulltext::select('id','phase_id','data')->where('type', 'client')->where('main_id', $client)->first();
        $meta = [];
        foreach (Cmeta::select('citem_id', 'value')->where('client_id', $client)->get()->toArray() as $cmeta) {
            $meta[$cmeta['citem_id']] = $cmeta['value'];
        }
        \DB::statement('SET FOREIGN_KEY_CHECKS=0;');
        $jmeta = Job::createSet($client);
        $data = ['client'=>$meta,'meta'=>[$jmeta['jitem_id']=>$jmeta['value']]];
        if ($jobId) {
            foreach (Jmeta::select('jitem_id','value')->where('job_id', $jobId)->where('jitem_id','!=',$jmeta['jitem_id'])->get()->toArray() as $orig) {
                $meta = new Jmeta();
                $meta['job_id'] = $jmeta['job_id'];
                $meta['jitem_id'] = $orig['jitem_id'];
                $meta['value'] = $orig['value'];
                $meta->save();
                $data['meta'][$orig['jitem_id']] = $orig['value'];
            }
        }
        $cdata = $fulltext['data'];
        $cdata['job'][$jmeta['job_id']] = $data['meta'];
        Fulltext::where('id', $fulltext['id'])->updateData($cdata);
        Fulltext::where('id', $fulltext['id'])->update(['phase_id'=>-1]);
        Fulltext::incrementPhase('client', $fulltext['phase_id'], -1);
        Fulltext::incrementPhase('client', -1, 1);
        $fulltext = new Fulltext();
        $fulltext['type'] = 'job';
        $fulltext['main_id'] = $jmeta['job_id'];
        $fulltext['time'] = $time;
        $fulltext->setData($data);
        $fulltext->save();
        Fulltext::incrementPhase('job', 0, 1);
        \DB::statement('SET FOREIGN_KEY_CHECKS=1;');



        $jitems = [5, 39];
        $jHash = array_flip($jitems);

        $models = call_user_func('\App\Models\Jitem::select', 'id', 'name', 'meta')->whereIn('id', $jitems)->get()->toArray();
        foreach ($models as $item) {
            $meta           = $item['meta'];
            $meta['item']   = $item['id'];
            $meta['name']   = $item['name'];
            $meta['komoji'] = 'j';
            $meta['id']     = $jmeta['job_id'];
            $data[$jHash[$item['id']]] = ['meta'=>$meta];
        }
        $items['j'] = $data;

        foreach (Jmeta::select('id', 'jitem_id','value')->where('job_id', (int)$jmeta['job_id'])->whereIn('Jitem_id', $jitems)->get() as $meta) {
            $itemi = $jHash[$meta['jitem_id']];
            $items['j'][$itemi]['meta']['value'] = $meta['value'];
            $items['j'][$itemi]['html'] = $meta->getHtml($items['j'][$itemi]['meta']);
        }
        // }}}
        // $citems {{{
        $jitems = [];
        foreach (array_keys($items['j']) as $i) {
            if (isset($items['j'][$i]['meta']['value']) && $items['j'][$i]['meta']['value'] !== '') {
                $jitems[] = $items['j'][$i];
            }
        }
        $params['jitems'] = $jitems;
        $params['jobid'] = $jmeta['job_id'];

        return $params;
    }
```
不明な個所は、Jquery最後にある「after」の箇所でございます。

何卒よろしくお願い申し上げます。

Ajaxでデータを格納した後のhtml構造がafterで追加されない。

firefoxでチェック状態が勝手に保存されて困ります。

「チェックされたよ」というCookieがあるときはチェックを入れて、さらにその項目を表示する。

という機能をつけています。

Cookieがある場合は、チェックが入り、項目が表示される。という条件です。

しかし、

チェックを入れる→Cookieを削除→リロード

とすると、Cookieがないにも関わらずチェックが入っており、しかしチェックが入っているくせに、Cookieがないから項目が表示されない。

という困ったことになるのです。


かといって、

``$("input, select, textarea").attr("autocomplete", "off");
``
を書くとCookieがあってもチェックが外れてしまい、元の木阿弥くんです。

どうにか解決する方法をご存じの方がいらっしゃいましたらぜひ教えてくださいませ。

firefoxでチェック状態が勝手に保存されるのを回避する方法

### 前提・実現したいこと
HTMLでチェックボックス、プルダウンメニュー、ラジオボタン、テキストボックスを使ったフォーム(フォームタグで括られていない)を作り、
Javascriptを用いてバリデーションを行い、エラーがあれば.html()でそのメッセージを出力しようとしています。
出力するメッセージはhtmlのタグになっており、出力する場所はdiv要素とid属性で用意されています。
現時点ではエラーが発見されたらメッセージは表示され、解決されたら消えるようになっています。
### 発生している問題・エラーメッセージ
全てにおいて選択肢が変更された際に値は反映されますが
値がなくなった時「値が存在しません」と出ません。
これは、「正しい値を最初に入れた時はエラーメッセージは出ずid属性のあるdivタグのみが出力されるがその後仮に値が無くなった(チェックボックスの全てのチェック解除など)があった時に本来『何も入っていない』というエラーを出すべきなのに出ない」
という意味です。
また、可能な限り全てのIDについて記載することは避けたいと思っています。


### 該当のソースコード

```js
function valid($a) {
	$error="<div id=\"a_valid\"></div>";
	if (!$a) {
		$error = "<div id=\"a_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>";
	}else if (($a != "a") && ($a != "b") && ($a != "c")) {
        $error = "<div id=\"a_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>";
    }
  return $error;
}

function valid_echo($a)
{
  $a_echo ="";
  $ans={"a":"A","b":"B","c":"C"};
  $error_message = valid($a);
  if ($error_message==="<div id=\"a_valid\"></div>") {
    $a_echo = $ans[$a];
  }
    return $a_echo;
 }

function valid_b($b){
  $error_b="<div id=\"b_valid\"></div>";
  $b2 =[/*配列の中身*/];
    if ($b===[]) {
        $error_b = "<div id=\"b_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>";
      }else{
        for ($i = 0; $i <$b.length ; $i++) {
          if (((parseInt($b[$i])<0||parseInt($b[$i])>($b2).length-1)||!Number.isInteger(parseInt($b[$i]))||!Array.isArray($b))&&parseInt($b[$i])==$b[$i]) {
            $error_b = "<div id=\"b_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>";
            break;
          }
        }
      }
      return $error_b;
}

function valid_b_echo($b)
{
  var $b_echo = "";
  $error_message = valid_b($b);
  $b2 =[/*配列の中身*/];
    var $array= new Array();
  if ($error_message==="<div id=\"b_valid\"></div>") {
  for(var i=0;i<$b.length;i++){
    if($b[i].checked){
      if($b_echo!=="") $b_echo+=",";
      $b_echo+=$b2[parseInt($b[i].value)];
    }
  };
  }
      return $b_echo;
}

function valid_c($c)
{
      $error_c="<div id=\"c_valid\"></div>";
        if ((!$c&&$c!=0)) {
        $error_c = "<div id=\"c_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>";
    } else if ((parseInt($c)<0||parseInt($c)>10)&&!Number.isInteger($c)) {
        $error_c = "<div id=\"c_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>";
    }
  return $error_c;
}

function valid_d($d)
{
  $error_d="<div id=\"d_valid\"></div>";
        if ((!$d&&$d!=0)) {
        $error_d = "<div id=\"d_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>";
    } else if ((parseInt($d)<0||parseInt($d)>9)&&!Number.isInteger($d)) {
        $error_d = "<div id=\"d_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>";
    }
    return $error_d;
}
$(function(){
       $("#a input").change(function(){
        $gender=$("#a input:checked").val();
        $('div #a_valid').html(valid_a($a));
        $error_a_=valid_a($a);
        $a_echo_=valid_a_echo($a);
        //console.log(valid_gender($gender));
        //console.log(valid_gender_echo($gender));
        //console.log($gender);
        //alert($gender);
      });

      $("#b input").change(function(){
        ary=document.getElementsByName('b');
        var ary2=$('#b input:checked').map(function() {
            return $(this).val();
        }).get();
        $b=new Array();
        if (ary.length>1) {
          for (var i = 0; i <ary.length; i++) {
            $b.push(ary[i]);
          }
        }
        $error_b_=valid_b($b);
        $b_echo_=valid_b_echo($b);
        console.log(ary2);
        $('div #b_valid').html(valid_b($b));
        console.log($error_b_);
        console.log($b_echo_);
      });

      $("#c").change(function(){
        $c=$("#c option:selected").val();
        $d=$("#d option:selected").val();
        $('div #c_valid').html(valid_c($c));
        $error_c_=valid_c($c);
        //console.log(valid_c($c));
        //console.log($c);
      });
      $("#d").change(function(){
        $c=$("#c option:selected").val();
        $d=$("#d option:selected").val();
        $('div #d_valid').html(valid_d($d));
        $error_d_=valid_d($d);
        //console.log(valid_d($d));
        //console.log($d);
      });
});
```
```html
<p>
  <input type="radio" name="a" value="a" id="a"><label for="a">A</label>
  <input type="radio" name="a" value="b" id="b"><label for="b">B</label>
  <input type="radio" name="a" value="c" id="c"><label for="c">C</label>
</p>
</div>

<div id="b_valid"></div>
<div id="b">
<p>
  <input type="checkbox" name="b" value="0" id="b0"><label for="b0">b0</label><br><br>
  <input type="checkbox" name="b" value="1" id="b1"><label for="b1">b1</label><br><br>
  <input type="checkbox" name="b" value="2" id="b2"><label for="b2">b2</label><br><br>
  <input type="checkbox" name="b" value="3" id="b3"><label for="b3">b3</label><br><br>
  <input type="checkbox" name="b" value="4" id="b4"><label for="b4">b4</label><br><br>
  <input type="checkbox" name="b" value="5" id="b5"><label for="b5">b5</label><br><br>
  <input type="checkbox" name="b" value="6" id="b6"><label for="b6">b6</label><br><br>
  <input type="checkbox" name="b" value="7" id="b7"><label for="b7">b7</label><br><br>
  <input type="checkbox" name="b" value="8" id="b8"><label for="b8">b8</label><br><br>
  <input type="checkbox" name="b" value="9" id="b9"><label for="b9">b9</label><br><br>
  <input type="checkbox" name="b" value="10" id="b10"><label for="b10">b10</label><br><br>
  <input type="checkbox" name="b" value="11" id="b11"><label for="b11">b11</label><br><br>
  <input type="checkbox" name="b" value="12" id="b12"><label for="b12">b12</label><br><br>
  <input type="checkbox" name="b" value="13" id="b13"><label for="b13">b13</label><br><br>
  <input type="checkbox" name="b" value="14" id="b14"><label for="b14">b14</label><br><br>
  <input type="checkbox" name="b" value="15" id="b15"><label for="b15">b15</label><br><br>
  <input type="checkbox" name="b" value="16" id="b16"><label for="b16">b16</label><br><br>
  <input type="checkbox" name="b" value="17" id="b17"><label for="b17">b17</label><br><br>
  <input type="checkbox" name="b" value="18" id="b18"><label for="b18">b18</label><br><br>
  <input type="checkbox" name="b" value="19" id="b19"><label for="b19">b19</label><br><br>
  <input type="checkbox" name="b" value="20" id="b20"><label for="b20">b20</label><br><br>
  <input type="checkbox" name="b" value="21" id="b21"><label for="b21">b21</label><br><br>
  <input type="checkbox" name="b" value="22" id="b22"><label for="b22">b22</label><br><br>
</p>
</div>
<br><br>

<div id="c_valid"></div>
<div id="d_valid"></div>

<p>
  <select name="c" id="c">
          <option selected disabled></option>
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
        </select>
  <select name="d" id="d">
          <option selected disabled></option>
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          </select></p>
```



### 補足情報（FW/ツールのバージョンなど）
フレームワークは不使用です

チェックを解除した時に再びバリデーションを行う方法

タイトルの通りなのですが、プログラミングを使って作りたいものがあった時、それを作るときにどうやって実装の仕方を調べたり、プログラムの組み立て方を考える、もしくは調べますか？考え方の思考手順や調べ方が知りたいです。

例えば、プログラムに何か絵を描かせてjpgやpngで出力させたいとした場合、どうやって調べたら良いでしょうか？（例えが悪くて答え難かったらすみません。）

ざっくりとした質問で申し訳ありませんが教えて下さると助かります。

宜しくお願い致します。

プログラミングを使って作りたいものがある時の調べ方、プログラムの組み立て方

目標)
以下のルールの１位と２位のゼッケンナンバーを求めたい

ルール

1 から 4 までのゼッケンナンバーをもつ選手 4 人が、短距離走大会に参加します。
1 回戦では、参加者は 2 組にずつ競争します。
各組で上位となった 2 人が 2 回戦に進出します。
2 回戦の勝者がこの大会の優勝者です。


まず 1 回戦の組み分けが与えられます。
そして 1 回戦の各参加者のタイム (秒) が、続いて 2 回戦の各参加者のタイム (秒) がゼッケンナンバーの小さい順に与えられるので一位と二位を求めたい。

なお、1 回戦、2 回戦における各選手のタイムはすべて異なり、同着は絶対にないものとする。



1 回戦の組み分け: 1 vs 3, 2 vs 4

1 回戦のタイム: 
1 → 600秒 
2 → 650秒 
3 → 500秒 
4 → 700秒 

このとき 1 vs 3 では 3 の勝利、 2 vs 4 では 2 の勝利となります。
したがって 2 回戦は 2 vs 3 で争われます。 

2 回戦のタイム:
2 → 550秒
3 → 600秒

2 回戦の勝者は 2 となり、優勝者は 2、準優勝者は 3 となります。
この例は下の入力例 1 に対応しています。


#例イメージ図


![イメージ説明](e835731a86e37b38eb7bf84c421cd9f8.png)



・1 行目に選手のゼッケンナンバーを表す整数 p_1, p_2 、
　2 行目に同様の整数 p_3, p_4 が半角スペース区切りで与えられます。
　このとき 1 回戦の組み分けが p_1 vs p_2, p_3 vs p_4 となります。

・次の行には各参加者の 1 回戦のタイムを表す **### 4 つの整数がエントリーナンバーの小さい順に半角スペース区切りで与えられます。**
　これらの整数を e_1, e_2, e_3, e_4 で表します。

・次の行には 2 回戦進出者の 2 回戦のタイムを表す**###  2 つの整数がエントリーナンバーの小さい順に半角スペース区切りで与えられます。**
　これらの　整数を f_1, f_2 で表します。 
・入力は合計で 4 行となり、入力値最終行の末尾に改行が１つ入ります。



入力例1
1 3
2 4
600 650 500 700
550 600

出力例1
2
3


入力例2
3 2
4 1
833 897 901 925
870 855

出力例2
2
1


私のコード)

期待値通りの出力ができると思います。
ただ、独学初心者のため、コードのスマートさに欠けるのではないかと不安です。
内包表記、関数やクラスを利用してよりスマートな書き方があれば、教えて頂きたいです。
宜しくお願い致します。


```ここに言語を入力
コード

#1回戦の選手の組み合わせのリスト
player_data = [
    list(map(int,input().split())) for _ in range(2)   
]

#1回戦の選手の組み合わせのリストからそれぞれのゼッケンナンバー抽出
a,b = [ x for x in player_data[0]]
c,d = [x for x in player_data[1]]

#一回戦のタイム結果、二回戦のタイム結果　リスト作成
#なお、二回戦のタイム結果は、勝者二人のゼッケンナンバーが小さい方から二つタイムが与えられる
game_result = [ list(map(int,input().split())) for x in range(2)]
#print(*game_result)

#上記のタイム結果のリストそれぞれに、初項に0 を代入
#リストの要素ひとつ追加することで、ゼッケンナンバー=リストの項数 にするため
game_result[0].insert(0,0)
game_result[1].insert(0,0)
#print(game_result)

#一回戦のタイム結果、二回戦のタイム結果をgame_1, game_2の変数に代入
game_1, game_2 = game_result[0], game_result[1]

#一回戦目の勝者二人を抽出
winner_1 = []
if game_1[a] > game_1[b]:
    winner_1.append(b)
else:
    winner_1.append(a)
if game_1[c] > game_1[d]:
    winner_1.append(d)
else:
    winner_1.append(c)
#print(winner_1)

#上記の勝者二人を、ゼッケンナンバーを降順で並び変え
#二回戦のタイム結果は、勝者二人のゼッケンナンバーが小さい方から二つタイムが与えられるから
sorted_winnter_1 = sorted(winner_1)
#print(sorted_winnter_1)

#二回戦の選手２人のそれぞれのゼッケンナンバーを取得
e,f = sorted_winnter_1[0], sorted_winnter_1[1]
#print(e,f)

#二回戦目の優勝者、準優勝者二人のリスト作成
winner_2 = []
if game_2[0] > game_2[1]:
    winner_2.append(f)
    winnter_2.append(e)
else:
    winner_2.append(e)
    winner_2.append(f)


winner_2 = list(map(str,winner_2))
print('\n'.join(map(' '.join,winner_2)))


```

Python3 　マラソン大会の結果　条件分岐　ループ処理　スマートなコードの書き方

初心者です。
Javascriptで以下の内容のコードを実装しようとして頭がこんがらがりました。

まず前提として要素数が１～３の配列aがあります。
その各要素には0～100の数字が入っています。
（例：[30,5,98]や[23,48]など）

ここから本題のコードです。
その配列の各要素ごとに0～100の乱数を取得して、乱数の方が小さかった要素のうちで最も要素内の数字が小さい要素のインデックスをalertで表示したいです。（乱数は要素ごとに別々で、比較するのは乱数同士ではなく要素同士）
また、乱数より小さかった数字で最も小さい要素が同値で複数ある場合は、そのうちからランダムで１つだけ選んでインデックスを表示したいです。

なるべく平易で短いコードをお願いします。