常連

回答者

情報収集家

自己紹介

### 実現したいこと
JavaScriptを使用したクイズを作成しています。
読み込むごとに問題がランダムで変わるようにはなりましたが、その際に問題文の下部へ画像を追加したいです。

### 発生している問題・分からないこと
JavaScriptで画像を表示するだけなら可能でしたが、ランダムで変わる問題文に合わせて画像も変わるようにしたいのですが、画像が表示されません。



### 該当のソースコード

```HTML
<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta id="viewport" name="viewport" content="width=device-width" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="style.css" />
	<title></title>

</head>

<body>

	<div class="container" id="container">
		<div class="container-under">
			<figure>
					<img src="assets/img/under.svg" alt="">
			</figure>
	</div>
		
		<div class="quiz-info">
			<ruby>
				全 <span id="total-questions"></span> 問
			</ruby>
		</div>

		<h1>
			<figure>
					<img src="assets/img/title.svg" alt="">
			</figure>
		</h1>

		<div class="quiz-container" id="quiz-container">
			<div class="question-number" id="question-number"></div>
			<div class="question" id="question"></div>
			<img id="imagePath" src="" alt="">
			<div class="grid-container" id="choices-container"></div>
		</div>

		<div class="result-section" id="answer-section">
			<h2>
				<ruby>
					回答結果
				</ruby>
			</h2>
			<p id="answer-result"></p>
			<h3>
				<ruby>
					各選択肢の解説
				</ruby>
			</h3>
			<div id="explanation"></div>                     
			<div id="next-question" onclick="nextQuestion()">
				<ruby>
					次の問題へ
				</ruby>
			</div>
		</div>

		<div id="final-result" class="final-section">
			<h2>
				<ruby>		
					最終結果
				</ruby>		
			</h2>
			<p id="score"></p>
			<div id="restart-quiz" onclick="restartQuiz()">
				<ruby>
					もう一度遊ぶ
				</ruby>
			</div>
		</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js?ver=3.6.1" id="jquery-core-js">
	</script>
	<script src="assets/js/quizData.js"></script>
	<script src="assets/js/script.js"></script>
	<script src="assets/js/viewport.js"></script>
	<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

</body>

</html>
```

```JavaScript
const quizData = [
  {
    question: "◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎◎",
    imagePath: "assets/img/quiz01.svg",
    choices: [
      { 
        text: "◎◎◎◎◎",
        explanation:
          "残念！不正解です。",
      },
      { 
        text: "◎◎◎◎◎",
        explanation:
          "正解です！",
       },
      { 
        text: "◎◎◎◎◎",
        explanation:
        "残念！不正解です。",
      },
      { 
        text: "◎◎◎◎◎",
        explanation:
        "残念！不正解です。",
      },
    ],
    correct: 1,
  },
  {
    question: "×××××××××××××××××××××××××××,
    imagePath: "assets/img/quiz02.svg",
    choices: [
      { 
        text: "×××××",
        explanation:
        "残念！不正解です。",
       },
      { 
        text: "×××××",
        explanation:
        "正解です！",     
      },
      { 
        text: "×××××",
        explanation:
        "残念！不正解です。",
       },
      { 
        text: "サ×××××",
        explanation:
        "残念！不正解です。",
      },
    ],
    correct: 1,
  },
  {
    question: "■■■■■■■■■■■■■■■■■■■■■■■",
    imagePath: "assets/img/quiz03.svg",
    choices: [
      { 
        text: "■■■■■",
        explanation:
        "残念！不正解です。",
      },
      { 
        text: "■■■■■",
        explanation:
        "残念！不正解です。",
      },
      { 
        text: "■■■■■",
        explanation:
        "残念！不正解です。",
      },
      { 
        text: "身を守るため",
        explanation:
        "正解です！",    
      },
    ],
    correct: 3,
  },
];
```

```JavaScript
const totalQuestions = quizData.length;
document.getElementById("total-questions").textContent = totalQuestions;

let currentQuiz = [];
let currentQuestion = 0;
let score = 0;

// 問題をランダムに並び替える関数
function shuffleArray(array) {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

// 初期化
function initQuiz() {
  currentQuestion = 0; // 問題番号の初期化
  score = 0; // スコアの初期化
  currentQuiz = shuffleArray([...quizData]); // クイズデータをランダム化
  loadQuestion();
}

// 問題と選択肢を表示
function loadQuestion() {
  document.getElementById("quiz-container").style.display = "block";
  document.getElementById("answer-section").style.display = "none";
  document.getElementById("final-result").style.display = "none";

  // 問題番号を表示
  document.getElementById("question-number").textContent = `第 ${
    currentQuestion + 1
  } 問`;

  const questionData = currentQuiz[currentQuestion];

  let img = document.getElementById("imagePath");
  document.getElementById("question").textContent = questionData.question;
  const choicesContainer = document.getElementById("choices-container");
  choicesContainer.innerHTML = "";

  // 選択肢に番号を付ける
  questionData.choices.forEach((choice, index) => {
    const choiceDiv = document.createElement("div");
    choiceDiv.classList.add("choice");
    choiceDiv.textContent = `${index + 1}. ${choice.text}`; // 番号付きの選択肢
    choiceDiv.onclick = () => checkAnswer(index, questionData);
    choicesContainer.appendChild(choiceDiv);
  });
}

// 答えを確認
function checkAnswer(selected, questionData) {
  document.getElementById("quiz-container").style.display = "none";
  document.getElementById("answer-section").style.display = "block";

  const resultText = document.getElementById("answer-result");
  const explanationDiv = document.getElementById("explanation");
  explanationDiv.innerHTML = "";
  explanationDiv.style.textAlign = "left"; // 左寄せ

  if (selected === questionData.correct) {
    resultText.innerHTML = "<span class='correct'>正解！</span>";
    score++;
  } else {
    resultText.innerHTML = "<span class='wrong'>不正解です。</span>";
  }

  // 各選択肢の解説を表示（番号付き）
  questionData.choices.forEach((choice, index) => {
    const explanationPara = document.createElement("p");
    if (index === questionData.correct) {
      explanationPara.innerHTML = `<span style="color: red; font-weight: bold;">${
        index + 1
      }. ${choice.text}</span> : ${choice.explanation}`;
    } else if (index === selected) {
      explanationPara.innerHTML = `<span style="color: blue;">${index + 1}. ${
        choice.text
      }</span> : ${choice.explanation}`;
    } else {
      explanationPara.innerHTML = `${index + 1}. ${choice.text} : ${
        choice.explanation
      }`;
    }
    explanationDiv.appendChild(explanationPara);
  });

  // 予備知識を枠で囲む
  const knowledgePara = document.createElement("div");
  knowledgePara.classList.add("knowledge-box");
  knowledgePara.innerHTML =
    "<strong>予備知識:</strong> " + questionData.knowledge;
  explanationDiv.appendChild(knowledgePara);

  // 最終問題かどうかのチェック
  if (currentQuestion === currentQuiz.length - 1) {
    document.getElementById("next-question").textContent = "結果を見る";
  } else {
    document.getElementById("next-question").textContent = "次の問題へ";
  }
}

// 次の問題へ
function nextQuestion() {
  currentQuestion++;
  if (currentQuestion < currentQuiz.length) {
    loadQuestion();
    document.getElementById("container").scrollIntoView({ behavior: "smooth" }); // containerにスクロール
  } else {
    showResult();
  }
}

// 結果を表示
function showResult() {
  document.getElementById("answer-section").style.display = "none";
  document.getElementById("final-result").style.display = "block";

  const percentage = (score / currentQuiz.length) * 100;
  document.getElementById("score").textContent = `正解数: ${score}/${
    currentQuiz.length
  } (${percentage.toFixed(2)}%)`;
}

// もう一度遊ぶ
function restartQuiz() {
  currentQuestion = 0;
  score = 0;
  initQuiz();
}

// クイズ開始
initQuiz();

// クイズを表示する関数
function showQuiz(index) {
  const quiz = quizData[index];

  // 質問文を表示
  const questionElement = document.createElement("h2");
  questionElement.textContent = quiz.question;
  choicesContainer.appendChild(questionElement);

  // 選択肢を表示
  const choicesWrapper = document.createElement("div");
  choicesWrapper.className = "choices-wrapper"; // 選択肢を包む要素のクラス名を追加
  choicesContainer.appendChild(choicesWrapper);
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
ソースコードに以下のコードを追加したところ、画像は表示されますが、問題ごとにURLを読み取るわけではありませんでした。
<div id="questionArea">
	<img id="questionImage" src="" alt="問題の画像">
</div>
<script>
	function addImageToQuestion(imageUrl) {
		const questionImage = document.getElementById("questionImage");
		questionImage.src = imageUrl;
		questionImage.style.display = "block"; // 画像を表示する
	}

	// 例として、画像URLを指定して問題文に画像を追加する
	addImageToQuestion("assets/img/quiz01.svg");
</script>

### 補足
特になし

JavaScriptで読み込むごとに画像を変えて表示させたい

### 実現したいこと
複数のセレクトボックスから選択された組み合わせで出力する値を変えたい

### 発生している問題・分からないこと
2つのセレクトボックスではできたのですが3つのセレクトボックスの際にうまく実装できておりません



### 該当のソースコード

```
【2つのセレクトボックス】
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body><script>
function check(f){
var arr={
"A":{"D":'<a href="https://test.html">950</a>'
,"E":1400,"F":1850,"G":2500}
,"B":{"D":1200,"E":1850,"F":2400,"G":2800}
,"C":{"D":2300,"E":2500,"F":2800,"G":3200}
};
var x=f.elements["x"].value;
var y=f.elements["y"].value;
f.elements["content"].value=(arr[x] && arr[x][y])?arr[x][y]:"";

}
</script>

<form action="#" id="form">
<select name="x" onchange="check(this.form);">
<option value="">--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="y" onchange="check(this.form);">
<option value="">--</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
</select>
<textarea name="content" style="display:none;"></textarea>

<input type="submit" value="送信">

</form>


<script>
    // submit時にイベント実行をする関数
    document.getElementById('form').onsubmit = function (event) {
        // 再読み込み防止
        event.preventDefault();
        // 入力フォームの内容を取得
        let inputForm = document.getElementById('form').content.value;
		// 入力内容を画面に出力
        document.getElementById('output').innerHTML = `${inputForm}`;
    }
</script>


<p id="output"></p>

</body>
</html>
```

```
【3つのセレクトボックス】
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body><script>
function check(f){
var arr={
"A":{"D":'<a href="https://test.html">950</a>'
,"E":1400,"F":1850,"G":2500}
,"B":{"D":1200,"E":1850,"F":2400,"G":2800}
,"C":{"D":2300,"E":2500,"F":2800,"G":3200}
};
var x=f.elements["x"].value;
var y=f.elements["y"].value;
var z=f.elements["z"].value;
f.elements["content"].value=(arr[x][y] && arr[x][y][z])?arr[x][y][z]:"";

}
</script>

<form action="#" id="form">
<select name="x" onchange="check(this.form);">
<option value="">--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select name="y" onchange="check(this.form);">
<option value="">--</option>
<option value="D">D</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="G">G</option>
</select>
<select name="z" onchange="check(this.form);">
<option value="">--</option>
<option value="H">H</option>
<option value="I">I</option>
<option value="J">J</option>
<option value="K">K</option>
</select>
<textarea name="content" style="display:none;"></textarea>

<input type="submit" value="送信">

</form>


<script>
    // submit時にイベント実行をする関数
    document.getElementById('form').onsubmit = function (event) {
        // 再読み込み防止
        event.preventDefault();
        // 入力フォームの内容を取得
        let inputForm = document.getElementById('form').content.value;
		// 入力内容を画面に出力
        document.getElementById('output').innerHTML = `${inputForm}`;
    }
</script>


<p id="output"></p>

</body>
</html>
```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
恐らくarrの選択時の組み合わせの部分かと思っておりますが値を出力はできておりません。
（arrの部分は2つのセレクトボックスの時に戻しております。）

### 補足
初歩的なことになるかと存じますが、ご教示いただけますと幸いです。

Javascript セレクトでの値操作について

JS dragstartイベントの対象がimgタグだとイベントそのものが発生しない
divだと動きますがimgだと動きません
Android クロームです。
どうやったらdragstartを発生できるのでしょうか
imgをdivの子要素にはしたくありません。
デフォルト操作絡みで発生しないのかとも思いましたがいろいろ錯誤しましたが(デフォルト動作のキャンセル等)、
打つ手がない状況です

```ここに言語を入力
<script>
window.onload=function(){
div = document.createElement("div");
div.style.width = "100%";
div.style.height = "100%";
div.style.background="red";
div.addEventListener('dragstart', function(event) {
if(event.target){
alert("drag:"+event.target.id);
}
});
document.body.appendChild(div);



img = document.createElement("img");//imgだとdragstartが発生しない
img.id="a";
img.style.zIndex="99999";
img.style.position = "absolute";
img.style.top="0%";
img.style.width = "350px";
img.style.height = "350px";
img.style.background="blue";
img.draggable="true";
div.appendChild(img);


div_ = document.createElement("div");//divだと発生する
div_.id="b";
div_.style.zIndex="99999";
div_.style.position = "absolute";
div_.style.left="350px";
div_.style.top="0%";
div_.style.width = "350px";
div_.style.height = "350px";
div_.style.background="green";
div_.draggable="true";
div.appendChild(div_);

}
</script>

```


JS dragstartイベントの対象がimgタグだと動かない

### 実現したいこと
ログイン機能を Google OAuth 2.0 を使って作成したいです。

### 発生している問題・分からないこと
Google OAuth 2.0 のログインボタンのアイコンデザインを変更する方法が分からず悩んでおります。



### 該当のソースコード

```HTML
<html>

<head>
    <meta charset="UTF-8">
    <title>TEST_GOOGLE_LOGIN</title>
</head>

<body>
    <h1>Googleでログイン</h1><br>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
        data-client_id="{Your_Client_ID}"
        data-context="signin"
        data-ux_mode="popup"
        data-login_uri="{Your_Login_Redirect_URI}"
        data-nonce=""
        data-itp_support="true">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-shape="rectangular"
        data-theme="outline"
        data-text="signin_with"
        data-size="large"
        data-logo_alignment="left">
    </div>
</body>

</html>
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [x] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
Youtube も Google OAuth 2.0 を使用しているようで調べてみると yt icon を使用しているようでした。
yt icon ではなく画像に変更することも可能ではないかと考えております。

### 補足
※ 参考サイト
https://qiita.com/mendoitarou_/items/9d6838a0db468c4f5dee

ログインボタンのアイコンデザインを変更することは可能でしょうか？

Google Apps Script（GAS）とHTMLを使って、スプレッドシート「予約管理」の情報を検索・表示する仕組みを作っています。

---

## 📌 現在の状況

- スプレッドシートの「新規予約」シートを対象にしています（※下記にスクリーンショット添付予定）
- チェックイン日やコードなどで検索できるようにしています
- GAS側の `searchNewReservations()` を `testSearchDirect()` で実行すると、ログにはヒット件数も正しく出ます
- しかし HTML 側で検索を実行すると、データが表示されず `null` や `[]` が返ってきてしまいます

---

## 🧪 試したこと

- `parseDate()` の書き換え（Date型か文字列かなどをいろいろ試しました）
- チェックイン・チェックアウト列のセル書式を Google スプレッドシートで「日付」に明示
- GAS内の return 値が `[]` ではないことを Logger で確認済み
- JS 側の `console.log(results)` にも `null` や `[]` が表示されてしまいます
- 条件をゆるめたり、パラメータを空にしても変化なし

---

## 🤔 知りたいこと

- GASの関数ではヒットしているのに、なぜ HTML 側に結果が渡ってこないのでしょうか？
- `results` が `null` または `[]` になる原因として、他に考えられる可能性はありますか？
- JS側で `google.script.run.withSuccessHandler(...)` を使っていても、このような症状になる要因があれば教えていただきたいです

---

## 🧩 使用中のコード

### `code.gs`

```javascript
// code.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile('search');
}

function searchNewReservations(params = {}) {
  try {
    const sheet = SpreadsheetApp.openById("188gf3L00CMpHWWVa1HHJxoHbKB6sYTorS0dKR-_Rt8s")
                  .getSheetByName("新規予約");
    const data = sheet.getDataRange().getValues();
    const results = [];

    const parseDate = d => {
      if (!d) return null;
      if (Object.prototype.toString.call(d) === "[object Date]") return d;
      return new Date(d.toString().replace(/-/g, "/"));
    };

    const checkinStart = parseDate(params.checkinStart);
    const checkinEnd = parseDate(params.checkinEnd);
    const checkoutStart = parseDate(params.checkoutStart);
    const checkoutEnd = parseDate(params.checkoutEnd);

    if (checkinStart) checkinStart.setHours(0, 0, 0, 0);
    if (checkinEnd) checkinEnd.setHours(0, 0, 0, 0);
    if (checkoutStart) checkoutStart.setHours(0, 0, 0, 0);
    if (checkoutEnd) checkoutEnd.setHours(0, 0, 0, 0);

    for (let i = 1; i < data.length; i++) {
      const row = data[i];
      const property = row[1];
      const code = row[2];
      const checkin = parseDate(row[3]);
      const checkout = parseDate(row[4]);

      if (!checkin || !checkout) continue;

      checkin.setHours(0, 0, 0, 0);
      checkout.setHours(0, 0, 0, 0);

      const match =
        (!params.property || property === params.property) &&
        (!params.code || code === params.code) &&
        (!checkinStart || checkin >= checkinStart) &&
        (!checkinEnd || checkin <= checkinEnd) &&
        (!checkoutStart || checkout >= checkoutStart) &&
        (!checkoutEnd || checkout <= checkoutEnd);

      if (match) {
        results.push({ rowIndex: i + 1, row });
      }
    }

    return results;

  } catch (error) {
    Logger.log("❌ searchNewReservationsでエラー:");
    Logger.log(error.message);
    Logger.log(error.stack);
    return [];
  }
}

### `search.html`

```html
// search.html

<script>
  function searchReservations() {
    const checkinStart = document.getElementById('checkinStart').value;
    const checkinEnd = document.getElementById('checkinEnd').value;

    const params = {
      checkinStart,
      checkinEnd,
    };

    google.script.run
      .withSuccessHandler(results => {
        console.log("📦 JSで受け取った結果:", results); // ← nullや[]になる
        renderTable(results);
      })
      .searchNewReservations(params);
  }

  function renderTable(results) {
    const table = document.getElementById('results');
    table.innerHTML = '';

    if (!results || results.length === 0) {
      table.innerHTML = '<tr><td>該当データがありません</td></tr>';
      return;
    }

    results.forEach(({ row }) => {
      const tr = document.createElement('tr');
      row.forEach(cell => {
        const td = document.createElement('td');
        td.textContent = cell;
        tr.appendChild(td);
      });
      table.appendChild(tr);
    });
  }
</script>

```

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-04-18/c0459b63-afa3-4578-80a6-fe4a41bda8c0.jpeg)

Google Apps Script：検索はヒットするがHTML側で結果が表示されない（nullになる）

### 実現したいこと

●Eva Sánchez
https://evasanchez.info/

こちらの海外のサイトなのですが、
スクロールすると、Y軸トップ0-15pxくらいがぼかされます。
この方法が知りたいです。

●調べたところ、
・サイトはワードプレス。
・lenisというライブラリは使用しています。
・GSAPを使っているのか？
・丸ごとダウンロードしても、index.htmlは
<div id="content" data-template="home" data-id="2"></div>
で中身がない。（サイトがPWA化しているから？）
・index.cssとmain.jsというのがあるが、コードが多すぎてわからない。

●もしかして、
・CSSでfixedで固定し、その部分をabsoluteで上のレイヤーにし、blur（●px）にしている？

よろしくお願いします。

デザイン処理がJavascriptなのかCSSなのか実現方法を教えてください。

JavaScriptで下の画像のような16マスのルーレットを作りたいと思っています。
最終的にはjqueryを使って作成したいのですが、まずはjqueryを使わずに作成を希望しています。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-04-14/5beeb7f3-b7cb-40aa-bf92-9addcf92c9ac.png)

満たすべき要件は以下の通りです。
1.ルーレットの目を16個作成する
2.スタートボタンを押すとルーレットが回転する
3.回転中はスタートボタンを押せなくする（ストップボタンで再び押せるようになる）
4.ルーレットの回転にランダム要素を組み込む
5.ルーレットが回っているときに、ストップボタンを押すとルーレットが止まる
6.一度ストップボタンで停止した目は次回以降は停止しない
7.スタートとストップを16回の繰り返しで、全ての目に停止する
8.16回停止後はスタートボタンが押せなくなる(リセットボタンで押せるようになる)
9.過去に停止した目が何か、ユーザに分かるようにする（目に色がつくなど）
10.リセットボタンを押すと初期表示の状態に戻る（もしルーレットが回っている場合はルーレットの回転が止まり、初期表示の状態になる）
11.（ソースコード）比較演算子は、「===」や「!==」を利用すること

現在、以下のようなコードを書くところまでは至っているのですが、
その後がどのように書けばいいかわからず躓いています。
```javascript
コード
```<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>ルーレット</title>
        <style>            
            table{
                text-align: center;
                margin-bottom:30px;
            }
        </style>
        <script>
            var interval;
            var start_flag=false;
            var array=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
            var n;
            function start(){
                if(start_flag===false){
                    interval=setInterval(revolution,200);
                    start_flag=true;
                    document.getElementById('start').disabled=true;
                }
            }
            function revolution(){
                n=Math.floor(Math.random()*array.length);
                var select=document.getElementsByTagName('td');
                select.n.backgroundColor="#DF543A";
            }
            function stop(){
                clearInterval(interval);
                start_flag=false;
                document.getElementById('start').disabled=false;
            }
            function reset(){
                clearInterval(interval);
                start_flag=false;
                var reverse=document.getElementById('roulette');
                reverse.style.backgroundColor='#ffffff';
                document.getElementById('start').disabled=false;
            }
            window.onload=function(){
                var revStart=document.getElementById('start');
                revStart.addEventListener('click',start,false);
                var revStop=document.getElementById('stop');
                revStop.addEventListener('click',stop,false);
                var revReset=document.getElementById('reset');
                revReset.addEventListener('click',reset,false);
            }
        </script>
    </head>
    <body>
        <table border="1" width="200" height="200" id="roulette">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
            <tr>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
            </tr>
        </table>
        <div id="button">
            <button id="start">スタート</button>
            <button id="stop">ストップ</button>
            <button id="reset">リセット</button>
        </div>
    </body>
</html>

恐縮ですが、アドバイスを頂きたく、何卒よろしくお願いいたします。

JavaScriptで16マスルーレットを作成したい(まずはjqueryを使わずに)。

### 実現したいこと
①のシートのC列に表示されている時間コピーし、②のシートのH列に転記。

### 前提

①のシートから必要な情報を取得し、転記先の②のシートに張り付けを実施

### 発生している問題・エラーメッセージ
通常の文字列は問題なく転記されますが、
時間だけ＋0:21:02 加算され転記されてしまいます。何か解決策ありますでしょうか。

### 該当のソースコード
 ```ここに言語を入力

　let SS1 = '111111'; //コピー元のシートID
    let SS2 = '222222'; //貼り付け先のシートID
    let SH1 = '転記用①'; // コピー元のシート名
    let SH2 = '転記先②'; // 貼り付け先のシート名

　 let columnsToCopy = [1];

　 // コピー元のスプレッドシートとシートを取得
    let sourceSpreadsheet = SpreadsheetApp.openById(SS1);
    let sourceSheet = sourceSpreadsheet.getSheetByName(SH1);

    // 貼り付け先のスプレッドシートとシートを取得
    let targetSpreadsheet = SpreadsheetApp.openById(SS2);
    let targetSheet = targetSpreadsheet.getSheetByName(SH2);

    // コピー元シートと貼り付け先シートの最終行を取得
    let lastRow = sourceSheet.getLastRow();
    let lastRow2 = targetSheet.getLastRow();

　//①のC列のデータをコピーし、②のH列に転記
    columnsToCopy5.forEach((col, index) => {
 　　// コピーする列のデータを取得（3行目から最終行まで）
      let columnData = sourceSheet.getRange(3, col, lastRow - 1 , 1).getValues();
 // 貼り付け先のシートにデータを貼り付け
      targetSheet.getRange(lastRow2 + 1, index + 6, columnData.length, 1).setValues(columnData);
    }); 

```

### 試したこと

カスタム日時、スプレッドシート上でVALUE形式で表示。


【GAS】時間が正しく反映されない

先日も「jqueryを使わずに、JavaScriptで市松模様の九九の表を作りたい。」というタイトルで質問させていただきましたが、次は少し別の作成法で困っております。
作成したいのは、先日と同じく下記のような表です。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-04-12/cb472382-9b3a-433d-96fa-1bfa53c20194.png)

先日は下記の画像のようなコードを、scriptタグ内に書くことで表を作成できましたが、
今回はもう一つ下の画像のように、既にbodyタグ内に記載されたtableのidを使って作成したいと考えています。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-04-12/c44b0c31-8353-4b4a-a957-41c397c3c070.png)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-04-12/709b36ba-3a06-4867-a0e4-43ab7e17e91e.png)

どういったコードを書くべきかご教示いただきたく、何卒よろしくお願いいたします。

jqueryを使わずに、JavaScriptで市松模様の九九の表を作りたい。その2

### 実現したいこと
Javascript で style をまとめて書きたいです。

### 発生している問題・分からないこと
style を分けて書くことは出来るのですが、まとめて書く方法が分かりません。





### 該当のソースコード

```Javascript
const changeImg = document.querySelectorAll('.changeImg').setAttribute('src', ev.target.result).height = '90px';　

const changeImg = document.querySelectorAll('.changeImg').setAttribute('src', ev.target.result).width = '90px';
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [x] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
調べてみても該当する記事を見つけることが出来ず困っております。

### 補足
特になし

Javascript で .style.height = ''; と .style.width = ''; をまとめて設定したい場合どのように書けばよいでしょうか？

下記画像のような市松模様の九九の表を、jqueryを使わずに、JavaScriptで作りたいと思っています。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-04-10/f1fb709b-dc6d-495c-b19a-91d205f02d39.png)

現在、script部分は以下のようなコードを書いているのですが、表の色が変わるのが、どうしても左上の1*1＝1の部分だけになってしまいます。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-04-10/9dd84779-ba85-4730-9b31-c3064f2949e3.png)

どのようにすれば市松模様の表ができるでしょうか？
ご教示いただきたく、何卒よろしくお願いいたします。

jqueryを使わずに、JavaScriptで市松模様の九九の表を作りたい。

### 実現したいこと
swiperを使って画像がループしているのを、ボタンクリックで一時停止や再開できるようにしたいです。

### 発生している問題・分からないこと
swiperとボタンの実装はできましたが、一時停止をクリックしてもすぐ止まらず、画像の端に来た時に止まるようになります。
クリック時にすぐ停止、さらにクリック時にすぐ再生するにはどうすればいいでしょうか？
swiperのバージョンは８です。



### 該当のソースコード

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" href="css/destyle.css"> 
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
	<link rel="stylesheet" href="css/swiper.min.css">
</head>
<body>
<div class="swiper-loop">
  <div class="swiper-loop-right">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog01.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog01.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="swiper-loop-left">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog01.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog01.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog02.jpg" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://junpei-sugiyama.com/wp-content/uploads/2021/01/dog03.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
<span class="stopbtn stop"></span>
</div>
</body>
<script src="js/swiper-bundle.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
</html>
```

```css
@charset "utf-8";

/* スライドの動き等速 */
.swiper-wrapper {
  transition-timing-function: linear;
}
/* 画像のサイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}

.stopbtn {
  cursor: pointer;
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 100;
  background: #007aff;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  text-align: center;
  line-height: 60px;
  opacity: 0.85;
  color: #fff;
}
.stopbtn:hover {
  opacity: 1;
}
.stopbtn.stop:before {
  display: block;
  content: "=";
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  font-size: 24px;
  font-weight: bold;
}
.stopbtn.start:before {
  content: "▶";
}


/*ボタンの位置（だいたいmvのスライドなのでこのclass名）*/
/*.mvStop{
  position: absolute;
  left: calc(50% + 80px);
  bottom: 0;
  z-index: 100;*/
}

/*ボタンの装飾*/
/*.stopbtn {
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #00BFB8;
}

.stopbtn.stop {
  position: relative;
  display: inline-block;
}
.stopbtn.stop::before, .stopbtn.stop::after {
  position: absolute;
  top: 7px;
  content: '';
  width: 3px;
  height: 15px;
  background-color: #fff;
}
.stopbtn.stop::before {
  left: 9px;
}
.stopbtn.stop::after {
  right: 9px;
}


.stopbtn.start {
  position: relative;
  display: inline-block;
}
.stopbtn.start::before {
  position: absolute;
  top: 8px;
  left: 10px;
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 14px;
  border-color: transparent transparent transparent #fff;
}
.stopbtn.start::after {
  display: none;
}*/

```

```JavaScript
const swiper_right = new Swiper(".swiper-loop-right .swiper", {
  loop: true, // ループ有効
  slidesPerView: 3, // 一度に表示する枚数
  speed: 6000, // ループの時間
  allowTouchMove: false, // スワイプ無効
  autoplay: {
    delay: 0, // 途切れなくループ
  },
});
const swiper_left = new Swiper(".swiper-loop-left .swiper", {
  loop: true, // ループ有効
  slidesPerView: 3, // 一度に表示する枚数
  speed: 6000, // ループの時間
  allowTouchMove: false, // スワイプ無効
  autoplay: {
    delay: 0, // 途切れなくループ
    reverseDirection: true, // 逆方向有効化
  },
});

$(window).on('load', function() {
    $('.stopbtn').on('click', function() {
        let _class = $(this).attr('class');
        if (_class == 'stopbtn stop') {
            $(this)
                .addClass('start')
                .removeClass('stop');
                swiper_left.autoplay.stop();
                swiper_right.autoplay.stop();
        } else {
            $(this)
                .addClass('stop')
                .removeClass('start');
                swiper_left.autoplay.start();
                swiper_right.autoplay.start();
        }
    });
});

// $(window).load(function() {
//   $(".stopbtn").on("click", function() {
//     var _class = $(this).attr("class");
//     if(_class == "stopbtn stop"){
//       $(this).addClass("start").removeClass("stop");
//       swiper_left.autoplay.stop();
//     }
//     else {
//       $(this).addClass("stop").removeClass("start");
//       swiper_left.autoplay.start();
//     }
//   });
// });
// document.querySelector(".swiper_pause").addEventListener("click", function(){
//   swiper_left.autoplay.stop();
// });
// document.querySelector(".swiper_start").addEventListener("click", function(){
//   swiper_left.autoplay.start();
// });
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
停止方法といくらか調べましたが、どれもうまくいきませんでした。
お教えいただけますと幸いです。

### 補足
特になし

swiperの一時停止ボタンがすぐ止まらない

# 知りたいこと
`<li>` の場合なら【createElement】よりも速い【+=】を使うべき [※1] だが、ではカスタム要素 `<my-li>` ではどうすべきか？

# 疑問の詳細
`<my-li>` も `🚗速い` のは【+=】でしょうけれど、しかし文字列では HTML 生成にあたって必要な値をデータ属性で渡さねばならず、 `❌無駄なデータ属性` を持つことになってしまいます。

##### 【+=】の場合
例えば以下は `user.name` を `<my-li>` の中に表示するため、わざわざ `data-name` にも渡さねばならず、HTMLとしては `❌無駄なデータ属性` が必要になります。（しかし `🚗速い` というメリットがあります。）
```JavaScript
import htmlTemplates from "./htmlTemplates.js"

class MyLi extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.name = this.dataset.name;
        this.render();
    }

    render() {
        this.replaceChildren();

        this.insertAdjacentHTML(
            "beforeend",
            htmlTemplates.userBox(this.name)
        );
    }
}

const users = [
    {name: "taro"}
];

const container = document.createElement('ul');

foreach (users as user) {
    html += `
        <my-li data-name="${user.name}"> 
        </my-li>`;
}
container.insertAdjacentHTML('beforeend', html); // 🚗速い
```

##### 【createElement】の場合
こちらは `createElement()` したオブジェクトに対して `user.name` を `✅自然にセット` しており、その値を `userBox()` に渡すことができるので、上記【+=】のように `❌無駄なデータ属性` が不要になります。（しかし `🐢遅い` というデメリットがあります。）
```JavaScript
import htmlTemplates from "./htmlTemplates.js"

class MyLi extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.render();
    }

    render() {
        this.replaceChildren();

        this.insertAdjacentHTML(
            "beforeend",
            htmlTemplates.userBox(this.name)
        );
    }
}

const users = [
    {name: "taro"}
];

const container = document.createElement('ul');
foreach (users as user) {
    const myLi = document.createElement('my-li');
    myLi.name = user.name; // ✅自然にセット
    container.appendChild(myLi); // 🐢遅い
}
```

ということで、

無駄な値を許容しても、速度を優先すべきなのか？
無駄な値を排除して、速度を犠牲にすべきなのか？

ついてのご意見を募集させてください。（明確な正解があるか否かわからないため、質問でなく意見交換として投稿させて頂きました。）

もちろん、いずれよりも優れた正解があればぜひそれについてもご回答を募集しております。

#  補足
冒頭の [※1] については以下を試し、どうやら【createElement】より【+=】の方が速いっぽいという判断です。
（尚 `createDocumentFragment()` はめちゃ遅かったです。）

##### テストコード
https://jsfiddle.net/k39f1j8L/
```JavaScript
// テスト用のコンテナを作成
const container = document.createElement('ul');
document.body.appendChild(container);

// 10000件のアイテムを生成するためのテスト
const totalItems = 100000;

// insertAdjacentHTML を使用する場合
function testInsertAdjacentHTML() {
  const start = performance.now(); // 開始時刻

  let html = '';
  for (let i = 0; i < totalItems; i++) {
    html += `<li>【+=】${i}</li>`;
  }

  container.insertAdjacentHTML('beforeend', html); // 一括で挿入

  const end = performance.now(); // 終了時刻
  console.log('insertAdjacentHTML elapsed time: ', end - start, 'ms');
}

// createElement を使用する場合
function testCreateElement() {
  const start = performance.now(); // 開始時刻

  for (let i = 0; i < totalItems; i++) {
    const li = document.createElement('li');
    li.textContent = `【createElement】${i}`;
    container.appendChild(li); // 1件ずつ挿入
  }

  const end = performance.now(); // 終了時刻
  console.log('createElement elapsed time: ', end - start, 'ms');
}

// テスト実行
testInsertAdjacentHTML();
testCreateElement();
```

JavaScript で大量の <my-li> 生成は、【+=】か【createElement】か？ 

### 実現したいこと
blender でしずくを作成するために参考サイトを見ながら Googleスプレッドシートでプロットしたいと考えております。


### 発生している問題・分からないこと
行や列の名前を変更して y と x の数値を反映することが出来ず困っております。



### 該当のソースコード

```Javascript
function getSheetName() {
let sheetname = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getName()
console.log(sheetname)
return (sheetname)
}
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [x] 知人に聞いた
- [x] その他

##### 上記の詳細・結果
グーグルスプレッドシート スプレッドシートのシートの名変更で調べてみたのですが、行や列の変更に関するコードはありませんでした。

### 補足
※参考サイト
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q11286587446

https://www.acrovision.jp/service/gas/?p=237

https://10cebox.hateblo.jp/entry/2020/10/26/235202

Googleスプレッドシートで行や列の名前を変更する方法が分かりません

### 実現したいこと
ページ内リンクをタップした時にハンバーガーメニューを閉じるようにしたいです。

### 発生している問題・分からないこと
CSSのみでハンバーガーメニューを実装したく、株式会社アーティス様( https://www.asobou.co.jp/blog/web/css-menu )のサイトを参考にスマホ版のみハンバーガーメニューを実装しました。メニュー自体は実装できたのですが、ページ内リンクに飛んだ際、JSを記述してみたものの、作動しませんでした。
様々なサイト様を参考にしたものの、何をどうしたら良いか全く分かっておりません。
浅学の身で恐縮なのですが、ご教示いただけますと幸いです。



### 該当のソースコード

```HTML
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
</head>

<body>


<div class="header" id="top">
  <header class="header">
    <div class="header--menu">
      <h1 class="header--icon"><img src="img/ icon header.png"></h1>
      <h1 class="header--logo"><a href="#top"><img class="pc" src="img/logo.png" ><img class="sp" src="img/sp header logo.png"></a></h1>
      <div class="header--tel"><a href="tel:0000000000">☎ </a></div> 
</div>
<div class="menu pc">
  <ul class="menu--list">
    <li class="menu--list--item"><a href="#A">A</a></li>
    <li class="menu--list--item"><a href="B.html">B</a></li>
    <li class="menu--list--item"><a href="C.html">C</a></li>
    <li class="menu--list--item"><a href="#D">D</a></li>
    <li class="menu--list--item"><a href="#E">E</a></li>
    <li class="menu--list--item"><a href="#F">F</a></li>
  </ul>
</div>


<header>
  <div class="hamburger-menu sp" >
      <input type="checkbox" id="menu-btn-check">
      <label for="menu-btn-check" class="menu-btn"><span></span></label>
      
      <div class="menu-content" id="hamburger">
          <ul>
              <li>
                  <a href="index.html#A">A</a>
              </li>
              <li>
                  <a href="B.html">B</a>
              </li>
              <li>
                   <a href="C.html">C</a>
              </li>
              <li>
                   <a href="index.html#D">D</a>
            </li>
             <li>
                   <a href="index.html#E">E</a>
             </li>
             <li>
                   <a href="index.html#F">F</a>
             </li>
          </ul>
      </div>
      
  </div>
</header>

</header>
```

```CSS
@media (max-width: 500px) {
  body{
    font-size: 14px;
    }
  .sp{
    display: block;
  }
  .pc{
    display: none;
  }

    /* header */
    .header--menu{
      width: 100%;
      height: 75px;
    }

/*  ハンバーガーメニュー  */
.menu-btn {
  position: fixed;
  top: 10px;
  right: 75px;
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #10D143;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}

#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}

#menu-btn-check {
  display: none;
}

.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  background-color: #10D143;
}
.menu-content ul {
  padding: 70px 10px 0;
}
.menu-content ul li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color:#ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}
.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}

.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #10D143;
  transition: all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {
  left: 0;/*メニューを画面内へ*/
}
/*  ハンバーガーここまで */
```

```Javascript
$('.hamburger-menu a[href]').on('click', function(event) {
  $('#menu-btn-check').trigger('click');
});
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
同様のサイトをいくつか拝見しまして、何処をどう指定したら良いか理屈はぼんやりと分かったのですが、実装するのにはどうしたらよいか分かりませんでした。

### 補足
個人が特定できてしまいそうな箇所の記述は省略しています。

ハンバーガーメニューをページ内リンクで閉じる方法

### 実現したいこと
カラーミーでは、複数配送設定時、受注区分という設定が併用不可になっていて
かつ配送方法の異なる商品は同封できない

※カラーミーを選択しているため、他のショップを使うは不可

自身で実現可能な方法
・カートページになんとかJavascriptを導入できれば実現可
・複数配送設定時は最初は配送先がないので、最初から配送先を自動登録(配送先を登録するscriptがあれば解決)
・最終案：受注した商品をメールで送信するさい、内部の文面を自動調整


### 発生している問題・分からないこと
カラーミーAPIでも、コードをカートに挿入は不可のようでした
新規配送先への登録コードは公開されていません



### 該当のソースコード

```
特になし
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [ ] ソースコードを自分なりに変更した
- [x] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
基本的には不可能となりました。

### 補足
特になし

カラーミーショップでの複数配送設定時、配送方法が異なる商品を同封できないため、カートページにJavascriptを導入したい

### 実現したいこと
フリマアプリで商品を出品する際に必要事項を入力できていない場合、ページ上部にエラーメッセージを表示したいです。

現状外套の入力欄にポップアップが出る状態です。

### 発生している問題・分からないこと
現状外套の入力欄にポップアップが出る状態です。

### エラーメッセージ
```error
エラーの表示は出ていません
```

### 該当のソースコード

```Ruby
<div class="items-sell-contents">
  <header class="items-sell-header">
    <%= link_to image_tag('furima-logo-color.png' , size: '185x50'), "/" %>
  </header>

  <div class="items-sell-main">
    <h2 class="items-sell-title">商品の情報を入力</h2>



    <%= form_with(model: @item, local: true) do |f| %>

      <%= render 'orders/error_messages', model: f.object %>
      <%# 商品画像 %>
      <div class="img-upload">
        <div class="weight-bold-text">
          商品画像
          <span class="indispensable">必須</span>
        </div>
        <div class="click-upload">
          <label for="item-image" class="upload-label">クリックしてファイルをアップロード</label>
          <%= f.file_field :image, id: "item-image", required: true, class: "file-input" %>
        </div>
      </div>

      <%# 商品名と商品説明 %>
      <div class="new-items">
        <div class="weight-bold-text">
          商品名
          <span class="indispensable">必須</span>
        </div>
        <%= f.text_area :name, class:"items-text", id:"item-name", placeholder:"商品名（必須 40文字まで)", maxlength:"40", required: true %>
        <div class="items-explain">
          <div class="weight-bold-text">
            商品の説明
            <span class="indispensable">必須</span>
          </div>
          <%= f.text_area :description, class:"items-text", id:"item-info", placeholder:"商品の説明（必須 1,000文字まで）（色、素材、重さ、定価、注意点など）例）2010年ごろに1万円で購入したジャケットです。ライトグレーで傷はありません。合わせやすいのでおすすめです。", rows:"7", maxlength:"1000", required: true %>
        </div>
      </div>

      <%# 商品の詳細 %>
      <div class="items-detail">
        <div class="weight-bold-text">商品の詳細</div>
        <div class="form">
          <div class="weight-bold-text">
            カテゴリー
            <span class="indispensable">必須</span>
          </div>
          <%= f.collection_select :category_id, Category.all, :id, :name, {selected: 1}, { class: "select-box", id: "item-category", required: true } %>
          <div class="weight-bold-text">
            商品の状態
            <span class="indispensable">必須</span>
          </div>
          <%= f.collection_select :condition_id, Condition.all, :id, :name, {selected: 1}, { class: "select-box", id: "item-condition", required: true } %>
        </div>
      </div>

      <%# 配送について %>
      <div class="items-detail">
        <div class="weight-bold-text question-text">
          <span>配送について</span>
          <a class="question" href="#">?</a>
        </div>
        <div class="form">
          <div class="weight-bold-text">
            配送料の負担
            <span class="indispensable">必須</span>
          </div>
          <%= f.collection_select :shipping_fee_id, ShippingFee.all, :id, :name, {selected: 1}, { class: "select-box", id: "item-shipping-fee", required: true } %>

          <div class="weight-bold-text">
            発送元の地域
            <span class="indispensable">必須</span>
          </div>
          <%= f.collection_select :prefecture_id, Prefecture.all, :id, :name, {selected: 1}, { class: "select-box", id: "item-prefecture", required: true } %>

          <div class="weight-bold-text">
            発送までの日数
            <span class="indispensable">必須</span>
          </div>
          <%= f.collection_select :shipping_day_id, ShippingDay.all, :id, :name, {selected: 1}, { class: "select-box", id: "item-shipping-day", required: true } %>
        </div>
      </div>

      <%# 販売価格 %>
      <div class="sell-price">
        <div class="weight-bold-text question-text">
          <span>販売価格 (¥300〜9,999,999)</span>
          <a class="question" href="#">?</a>
        </div>
        <div>
          <div class="price-content">
            <div class="price-text">
              <span>価格</span>
              <span class="indispensable">必須</span>
            </div>
            <span class="sell-yen">¥</span>
            <%= f.number_field :price, class:"price-input", id:"item-price", placeholder:"半角数字で入力", min: 300, max: 9999999, required: true %>
          </div>
          <div class="price-content">
            <span>販売手数料 (10%)</span>
            <span><span id='add-tax-price'>¥0</span>円</span>
          </div>
          <div class="price-content">
            <span>販売利益</span>
            <span><span id='profit'>¥0</span>円</span>
          </div>
        </div>
      </div>

      <%# 注意書き %>
      <div class="caution">
        <p class="sentence">
          <a href="#">禁止されている出品、</a>
          <a href="#">行為</a>
          を必ずご確認ください。
        </p>
        <p class="sentence">
          またブランド品でシリアルナンバー等がある場合はご記載ください。
          <a href="#">偽ブランドの販売</a>
          は犯罪であり処罰される可能性があります。
        </p>
        <p class="sentence">
          また、出品をもちまして
          <a href="#">加盟店規約</a>
          に同意したことになります。
        </p>
      </div>

      <%# 出品ボタン %>
      <div class="sell-btn-contents">
        <%= f.submit "出品する", class:"sell-btn" %>
        <%=link_to 'もどる', root_path, class:"back-btn" %>
      </div>

    <% end %>

  </div>

  <footer class="items-sell-footer">
    <ul class="menu">
      <li><a href="#">プライバシーポリシー</a></li>
      <li><a href="#">フリマ利用規約</a></li>
      <li><a href="#">特定商取引に関する表記</a></li>
    </ul>
    <%= link_to image_tag('furima-logo-color.png' , size: '185x50'), "/" %>
    <p class="inc">©︎Furima,Inc.</p>
  </footer>
</div>


```

### 試したこと・調べたこと
- [ ] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
他のファイルでは問題なく動いているのでそちらの記述と揃えたが改善しない

### 補足
特になし

アプリにてエラーメッセージを表示したい

JavaScriptの基礎学習を最近したのですが、下記のコードで分からないところが二点あります。

$(function(){
  $('.anyClassName').addClass('activeClassName');
});

１.addClass　とは何というのでしょうかプロパティやタグみたく名称があると思うのですが分かりません。

２('.anyClassName')この部分はただの文字列ですか？


何卒ご教授お願い致します。

Javascriptのコードに関する質問

# 実現したいこと
VSCode を使い JavaScript の import 文にあるファイルにすぐに飛びたいです。

# 発生している問題
import 文にあるURLに対して [Ctrl + クリック] すると、実際にそのファイルはあるのに、**ファイルが見つからなかったため、エディターを開くことができませんでした。** という表示になってしまいます。

# 試したこと➀
相対パスのファイルは [Ctrl + クリック] で飛べました。
さらに先頭に `/` がない場合も [Ctrl + クリック] で飛べましたが、これではブラウザでエラーになります。

以下に整理します。

###### 相対パス
`import fileName from "./file-name.js"`
✅ VSCode で飛べる
✅ ブラウザで正しく動作する

###### 絶対パス (先頭に `/` アリ)
`import fileName from "/path/to/file/file-name.js"`
🚫 VSCode で飛べない
✅ ブラウザで正しく動作する

###### 絶対パス (先頭に `/` ナシ)
`import fileName from "path/to/file/file-name.js"`
✅ VSCode で飛べる
🚫 ブラウザでエラー（Uncaught TypeError: Failed to resolve module specifier）

# 試したこと➁
ChatGPTに聞いて、settings.json に以下を記述しましたが、特に変化はありませんでした。
（尚 settings.json にある他の記述は有効なので、settings.json 自体は正常に読めています。）
```JSON
{
    "typescript.preferences.importModuleSpecifier": "relative", 
    "typescript.updateImportsOnFileMove.enabled": "always"
}
```

# 試したこと➂
ChatGPTに聞いて、jsconfig.json に以下を記述しましたが、特に変化はありませんでした。
(尚 jsconfig.json を作るのは初めてで、VSCode を立ち上げて [Ctrl + K] [Ctrl + O] で指定したディレクトリ "project" の直下に置いています。)
```JSON
{
    "compilerOptions": {
        "baseUrl": "./project"
    }
}
```

# 試したこと➃
[Ctrl + Shift + P] を押して表示される入力ボックスに ">Go to File" と入力し [Enter] を押すとファイル一覧が表示され、それらの絶対パスには先頭に `/` がない状態で全て表示されました。
どうやら VSCode の視点では「先頭に `/` がないものがファイルだよね」と認識しているような感じでしょうか・・？これが正常なのか、変更の方法はあるのか、は調査できませんでした。

# 前提
- Windows を使いたい。
- VSCode を使いたい。
- 絶対パスの import 文で実現したい。
- 操作方法は [Ctrl + クリック] でなくとも構わない。
- TypeScript や Node.js は使わない。

以上です。
よろしくお願い致します。

VSCode を使い JavaScript の import 文にあるファイルにすぐに飛びたい

### 実現したいこと
ハンバーガーメニュー内のドロップダウンメニューをクリックした際に、サブメニューが表示されるようにしているのですが、これを動きのある感じにしたいです。
イメージとしては、PC画面でのドロップダウンメニューをホバーした際に表示されるサブメニューの動きをハンバーガーメニュー内でも同じ動きを加えたいです。

### 発生している問題・分からないこと
クリックした際に表示されるまではできましたが、動きを加えるにはどこをどう書き加えればいいのでしょうか？



### 該当のソースコード

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<link rel="stylesheet" href="css/destyle.css"> 
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
 
  <header class="l-header p-header">
    <div class="p-header__inner">
      <img src="img.png" class="header_logo">
      <div class="p-header__hamburger">
        <button class="c-hamburger">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
      <nav class="p-header__nav p-nav">
        <div class="p-nav__inner">
          <ul class="p-nav__list">
            <li class="p-nav__item">
              <a href="" class="p-nav__link">
                メニュー
              </a>
            </li>
            <li class="p-nav__item">
              <a href="" class="p-nav__link">
                メニュー
              </a>
            </li>
            <li class="p-nav__item p-nav__item--acMenu">
              <p href="" class="p-nav__link">
                メニュー
              </p>
              <ul class="p-nav__middle">
                <li class="p-nav__middleItem">
                  <a href="" class="p-nav__link p-nav__middleLink">メニュー</a>
                </li>
                <li class="p-nav__middleItem">
                  <a href="" class="p-nav__link p-nav__middleLink">メニュー</a>
                </li>
              </ul>
            </li>
            <li class="p-nav__item">
              <a href="" class="p-nav__link">
                メニュー
              </a>
            </li>
            <li class="p-nav__item">
              <a href="" class="p-nav__link">
                メニュー
              </a>
            </li>

          </ul>
        </div>
      </nav>
    </div>
  </header>

  <main>
    メインコンテンツ
  </main>
  <footer>フッター</footer>
</body>
<script type="text/javascript" src="js/javascript.js"></script>
</html>
```

```css
main {
  background-color: skyblue;
  width: 100%;
  height: 1000px;
}

footer {
  width: 100%;
  height: 100px;
  background-color: rgb(249, 205, 121);
}

.header_logo{
  width: 5rem;
}

/* パターン3 */
.l-header {
  display: block;
  z-index: 999;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  background: #333;
}


.c-hamburger {
  position: relative;
  width: inherit;
  height: inherit;
  margin: 0;
  border: transparent;
  background-color: transparent;
  cursor: pointer;
}


.c-hamburger span {
  display: block;
  position: relative;
  left: 50%;
  width: 24px;
  height: 2px;
  transform: translateX(-50%);
  background: black;
  transition: all 0.4s;
}

.c-hamburger span:nth-of-type(1) {
  top: -4px;
}

.c-hamburger span:nth-of-type(2) {
  top: 1px;

  transform: translateX(-0.45deg);
}

.c-hamburger span:nth-of-type(3) {
  top: 6px;
  transform: translateX(-0.45deg);
}



.c-hamburger.is-active span:nth-of-type(1) {
  top: 0;
  transform: translateX(-50%) rotate(225deg);
}

.c-hamburger.is-active span:nth-of-type(2) {
  opacity: 0;
}

.c-hamburger.is-active span:nth-of-type(3) {
  top: -4px;
  transform: translateX(-50%) rotate(-225deg);
}




.p-header__nav {
  display: flex;
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;

  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: transparent;
  opacity: 0;
  transition: opacity .3s;
}

.p-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  padding-left: 20px;

}




.p-header__hamburger {
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
  width: 95px;
  height: 100%;
}

.p-header__nav.is-active {
  position: fixed;
  top: 0;
  right: 0;
  opacity: 1;
  background-color: #fff;
}



.p-nav__list {
  display: block;
  padding-right: 20px;
  padding-left: 20px;


}

.p-nav__item {
  display: inline-block;
  position: relative;
  transition: .4s;
}


.p-nav__link {
  color: #fff;
  display: block;
  padding: 20px;
  cursor: pointer;

}

.p-nav__item.p-nav__item--acMenu>.p-nav__link {
  position: relative;
}

.p-nav__item.p-nav__item--acMenu>.p-nav__link::after {
  position: absolute;
  content: "▼";
  right: 0;
  top: 50%;
  transform: translateY(-50%);

}


.p-nav__middle {
  display: none;
}

.p-nav__middleItem a::before {
  margin-right: 8px;
  margin-left: 8px;
  content: "-";
}


.p-nav__item.is-open .p-nav__middle {
  display: block;
}

@media screen and (min-width: 768px) {

  .p-header__hamburger {
    display: none;
  }

  .p-nav__inner {
    margin-right: auto;
    margin-left: auto;
    max-width: initial;
    width: 100%;

  }

  .p-header__nav {
    position: static;
    opacity: 1;
    height: inherit;
    width: initial;
    width: 100%;
    max-width: fit-content;
  }

  .p-nav__list {
    padding-right: 0;
    padding-left: 0;
    display: flex;
    flex-direction: row;

  }
  .p-nav__item {
    padding: 0 1rem;
  }
  .p-nav__item ul {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 0;
  }
  .p-nav__list .p-nav__item:last-child{
    background: #081231;
  }
  .p-nav__list .p-nav__item:last-child a{
    color: #fff;
  }


  .p-nav__item ul li {
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: all 0.1s;
  }

  .p-nav__item ul li a {

    display: flex;
    align-items: center;
    padding: 13px 20px 13px 10px;
    color: #fff;
  }
  
  .p-nav__list .p-nav__item:hover{
    background: #1b3a72;
  }
  .p-nav__item:hover>ul>li {
    height: 48px;
    overflow: visible;
    background-color: rgba(44, 192, 255, 0.6);
  }

  .p-nav__item:hover>ul>li:not(:first-child) {
    border-top: 1px solid #fff;
  }

  .p-nav__item:hover>ul>li.p-nav__middleItem:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .p-nav__item:hover>ul>li.p-nav__middleItem:hover a {
    color: #2C2C2C;
  }

  .p-nav__middle {
    display: block;
    text-align: left;
  }

  .p-nav__middleItem {
    position: relative;
  }

  .p-nav__middleItem a {
    position: relative;
    white-space: nowrap;
  }

}

@media screen and (max-width: 767px){
  .p-nav__inner{
    display: flex;
    justify-content: center;
  }
  .p-nav__list {
    width: 50%;
  }
  .p-nav__item {
    width: 100%;
  }
  .p-nav__link {
    color: #2e61b3;
  }
}
```

```JavaScript
document.addEventListener('DOMContentLoaded', function () {
  const hamburger = document.querySelector('.c-hamburger');
  const headNav = document.querySelector('.p-header__nav');


  if (!hamburger) {
    return false;
  }

  hamburger.addEventListener('click', () => {
    if (hamburger.classList.contains("is-active")) {
      hamburger.classList.remove('is-active');
      headNav.classList.remove('is-active')
    } else {
      hamburger.classList.add('is-active');
      headNav.classList.add('is-active')
    }

  });

  headNav.addEventListener('click', () => {
    hamburger.classList.remove('is-active');
    headNav.classList.remove('is-active')
  });
});




document.addEventListener('DOMContentLoaded', function() {

  const acMenuItems = document.querySelectorAll('.p-nav__item--acMenu');

  acMenuItems.forEach(item => {

    item.addEventListener('click', function(event) {

      event.stopPropagation();

      item.classList.toggle('is-open');
    });
  });

  document.addEventListener('click', function(event) {

    acMenuItems.forEach(item => {

      if (!item.contains(event.target)) {
        item.classList.remove('is-open');
      }
    });
  });
});
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
自分なりに色々と変更をしてみましたがうまく動きませんでした。
jQueryのプラグイン等を使った方が早いのでしょうか？

### 補足
特になし