常連

注目の的

自己紹介

現在、curlにてurlからhtmlを出力しています。
https://tech.amefure.com/php-curl

これをwordpressで行うとなると、プラグインを使用せずに実施することは可能でしょうか。

wp version 5.5.3
Web サーバー	Apache/2.4.53
PHP バージョン	7.4.28

試したこと：
https://brainlog.jp/programming/php/post-429/
failed to open stream: Connection refused inというエラーが出てしまう；；

wordpressでurlからhtmlを出力する方法

# 発生している問題

Wordpressの投稿画面`edit-post-layout__metaboxes`の部分(以下画像)をjQueryカスタマイズしたいのですが、動かないです

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-16/c3ebf317-5d30-42a0-af2a-6cde4edf1918.png)

# 実現したいこと

画像のADD、Removeをクリックするとインプットボックスが適宜増えたりへったりすることを、jQueryで行いたいと思っています。

# 現在のコード

## function.php
こちらは、カスタムフィールドで、まだPHPのカスタマイズコードは書いておりませんが、レイアウトのみ作成しました
```php
  function insert_preparation_fields()
  {
    global $post;
    echo '<ul class="addInput">
    <li><input type="email" name="email[]" /></li>
    <li><input type="email" name="email[]" /></li>
 </ul>
 <ul class="buttonset">
    <li><span class="add">ADD</span></li>
    <li><span class="remove">REMOVE<strong></strong></span></li>
 </ul>';
  }
```

jQuery

```js
<script>
jQuery(function($){
  //「ADD」を押したら増やす
  $('.add').click(function(){
    $('.addInput').append('<li><input type="email" name="email[]"></li>');
  });
  //「REMOVE」を押したら減らす
  $('.remove').click(function(){
      $('.addInput li:last-child').remove();
  });
});
</script>
```

# 試したこと
JSが正常にfunction.phpに読み込まれていないのかなと思い、ディベロッパーツールでfooter部分に直接書き込みましたが、ADD REMOVE両方押しても何も変化がありませんでした

# 最後に
説明不足の部分もあるかと思いますが、ぜひご教授いただけると幸いです。よろしくお願いいたします.



【Wordpress】投稿画面をjQueryでカスタマイズしたい

CSSで同じレイアウトを使用しつつ、
文の中身を変更する方法がわかりません。

```php
省略
~~~~~~~~~~~~~~
          <div class="col-lg-8 col-md-10 mx-auto">
            <div class="post-heading">
            <div class="title_text1"></div>
            </div>
~~~~~~~~~~~~~~
省略
```

```css
 .title_text1 {
  font-size: 60px;
  font-weight: bold;
  text-align: right;
}

.post-id-33, .title_text1:before{
　　content: '33';
}
.post-id-36, .title_text1:before{
　　content: '36';
  }
```

上記のように書いていますが
表記されるページには
「　36　」
と表記されます。
cssにif文がないのは存じ上げています。

どのように表記すれば同じスタイルを使用しつつ、
contentだけ投稿記事に合わせた変更が可能になるでしょうか？

よろしくお願いします。

Wordpressの投稿記事ごとに文章を変えたいです

ページネーションやリロード時に選択したラジオボタンのチェック状態をjavascript/jqueryで保持したままにしたいです。
sessionStorageを使ってできるようにしたいと思っています。
現状はsetItemでcheckedのtrue値を保存しています。
これをページ遷移された際に選択されていたラジオボタンにcheckedとしたいのですが、
わかりません。
よろしくお願いします。

```html
<input type="radio" id="ic_list" name="view">
<input type="radio" id="ic_tile" name="view">
```
```jquery
    $('input[name="view"]').on('click',function(){
      var v = $(this).prop('checked');
      sessionStorage.setItem('key', v);
    });
```

ページネーションでcheckedを保持したい

async / await について、質問させて頂きます。

以下の場合、コンソールログには"Leanne Graham"が表示されます。【期待通り】

```Javascript
async function access(url) {
  const res = await fetch(url);
  const json = await res.json();
  console.log(json.name);
}
const url = 'https://jsonplaceholder.typicode.com/users/1';
access(url);
```


以下の場合、コンソールログにはundefinedと表示されます。【期待通りでない】

```Javascript
async function access(url) {
  const res = await fetch(url);
  const json = res.json();
  console.log(json.name);
}
const url = 'https://jsonplaceholder.typicode.com/users/1';
access(url);
```

私の理解では、「fetch(url)」の結果（Promise.resolve）が返ってくるまで待っていて、
resに結果が入ってから次の「res.json()」が実行される認識ですので、
「res」が「undefined」とはならないのでは？という疑問です。

どうぞよろしくお願いいたします。


[Javascript] async関数内のawaitは、結果が返るまで待っていると認識していますが。

JSで神経衰弱を作っています。
最初から裏向きで何も書かれていない面を表示することをしたいと思っています。
現在はトランプを表向き（マークと数字）に表示することはできたのですが、これを最初から裏向きにすることができないので質問させてもらいました。
現状のコードにどういうコードを書いていいのかが全くわからなくなっているのでぜひ教えていただけたらうれしいです。
最終的には押したら、裏向きから表向きに切り替わる処理も加えていきたいです。
```
var cards = ["../images/001.png","../images/002.png","../images/003.png","../images/004.png","../images/005.png",
"../images/006.png","../images/007.png","../images/008.png","../images/009.png","../images/010.png",
"../images/011.png","../images/012.png","../images/013.png",
"../images/101.png","../images/102.png","../images/103.png","../images/104.png","../images/105.png",
"../images/106.png","../images/107.png","../images/108.png","../images/109.png",
"../images/110.png","../images/111.png","../images/112.png","../images/113.png",
"../images/201.png","../images/202.png","../images/203.png","../images/204.png","../images/205.png",
"../images/206.png","../images/207.png","../images/208.png","../images/209.png","../images/210.png",
"../images/211.png","../images/212.png","../images/213.png",
"../images/301.png","../images/302.png","../images/303.png","../images/304.png","../images/305.png","../images/306.png",
"../images/307.png","../images/308.png","../images/309.png","../images/310.png","../images/311.png","../images/312.png","../images/313.png",
];
var image = "../images/trump_back.jpg";

var shuffle = arrayShuffle(cards);
console.log(shuffle);

for (var i = 0;i < 4; i++){
  var tr1 = document.createElement("tr");
  for(var a = 0;a < 4; a++){
    var td1 = document.createElement("td");
    tr1.appendChild(td1);
    td1.id = "card";
    td1.onclick = flip;
    td1.innerHTML = "<img src=" + shuffle[i*13+a] +  ">";
  }
  document.getElementById("wrap").appendChild(tr1);
}
function arrayShuffle(array) {
  for(var i = (array.length - 1); 0 < i; i--){
  
    var r = Math.floor(Math.random() * (i + 1));

    var tmp = array[i];
    array[i] = array[r];

    array[r] = tmp;
  }
  return array;
}

function flip(){
  console.log("aaa");
}


js 画像の切り替え

### 前提

jqueryを正しく動作させたい

### 実現したいこと

上記と同じです。
jqueryに指示を3つ出したいのですが、１つが機能してくれません。
(②のheader部分のクリックをすると、その部分にクラス名を追加するものが動いてくれません。）


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

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

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<link rel="favicon" href="/favicon.ico">



<link rel="stylesheet" href="/css/reset.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"
media="screen and (max-width:767px)">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>


<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Satisfy&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://use.typekit.net/qph3iir.css">

<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />


<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js"></script>
</head>

<body>
<header class="header">
<section class="header">
<div class="header-container">

<div class="header-flex">
<a href="" class="header-container-img">
<img src="/img/logo_header.png" alt="">
</a>

<nav class="header-nav">
<ul class="header-ul">
<li class="header-li">
<a href="#about" >About</a>
</li>
<li class="header-li">
<a href="#menu">Menu</a>
</li>
<li class="header-li">
<a href="#shop">Shop</a>
</li>
<li class="header-li">
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
</div>

</div>
</section>

</header>


```

```scss


.header {
position: fixed;
width: 100%;
z-index: 1000;
}

.header-container {
background-color: #2F2F2F;
padding-left: 31px;
padding-right: 70px;

@include mq(sp) {
padding-left: 18px;
padding-right: 16px;
}
}

.header-container-img {
@include mq(sp) {
width: 14.4%;
}
}

.header-flex {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
}

.header-ul {
display: flex;
}

.header-li {
font-size: 1.8rem;
line-height: calc(21.6/18);
letter-spacing: 0.03em;
color: #fff;
font-family: 'reross-quadratic', sans-serif;
position: relative;

&::before {
position: absolute;
bottom: -3px;
left: 0;
content: '';
width: 0;
height: 2px;
background-color: #F2F4F1;
transition: .3s;
}

&:hover::before {
width: 100%;
}


&:not(:first-child) {
margin-left: 40px;

@include mq(sp) {
margin-left: 20px;
}
}

@include mq(sp) {
font-size: 1.4rem;
line-height: calc(16.8/14);
}
}

.header-li.active {
color: red;
// width: 100%;
// border-bottom: 2px solid #000;
// background-color: #F2F4F1;
}
```



```jquery
①
$(window).on("scroll", function () {

    if (window.matchMedia("(max-width: 1023px)").matches) {
        if (8400 < $(this).scrollTop()) {
            $('.to-top').addClass('is-show');
        } else {
            $('.to-top').removeClass('is-show');
        }
    } else {
        if (9200 < $(this).scrollTop()) {
            $('.to-top').addClass('is-show');
        } else {
            $('.to-top').removeClass('is-show');
        }
    }
});


②
$(function () {
    $('.header-li').click(function () {
        $('.header-li').removeClass('active');
        $(this).addClass('active');
        return false;
    })
});


③
$(function () {
    $('a[href^="#"]').click(function () {
        $('.nav-ul').removeClass('open');
        let speed = 500;
        let type = 'swing';
        let href = $(this).attr("href");
        let target = $(href == "#" || href == "" ? 'html' : href);
        let position = target.offset().top;
        $("html,body").animate({
            scrollTop: position
        }, speed, type);
        return false;
    })
});


```

### 試したこと

書き方の順番を入れ替えたりしたのですが、うまくいきませんでした。
①③をコメントアウトすると、②は動くような状態です。
①②③を動かしたいのですが、どこが間違っているか分からず困り果てています。

よろしくお願いします。

jqueryが正しく動いてくれない

いつもお世話になっています。
Wordpressの記事をカスタムフィールドで絞り込む機能をつけたいと思っています。
こちらでご教示頂きながら、
```php
<?php
 $args = array(
  'meta_query' => array(                  
          'relation' => 'AND',
          array(
              'key' => 'Wall',
              'value' => $_GET["WallMin"], 
              'compare' => '>=',
              'type' => 'NUMERIC',
          ),
          array(
              'key' => 'Wall',
              'value' => $_GET["WallMax"], 
              'compare' => '<=',
              'type' => 'NUMERIC',
          ),
          
          array(
              'key' => 'BT',
              'value' => $_GET["BTMin"], 
              'compare' => '>=',
              'type' => 'NUMERIC',
          ),
          array(
              'key' => 'BT',
              'value' => $_GET["BTMax"], 
              'compare' => '<=',
              'type' => 'NUMERIC',
          ),
          array(
              'key' => 'KT',
              'value' => $_GET["KTMin"], 
              'compare' => '>=',
              'type' => 'NUMERIC',
          ),
          array(
              'key' => 'KT',
              'value' => $_GET["KTMax"], 
              'compare' => '<=',
              'type' => 'NUMERIC',
          ),
          
        ),
);

$my_query = new WP_Query($args);
if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();
?>
 
<?php the_title(); ?><?php the_post_thumbnail(); ?><?php the_excerpt(); ?>
 
<?php endwhile; endif; wp_reset_postdata(); ?>
```
という検索だとすぐに結果が出てくるようになったのですが、

```php
<?php
 $args = array(
  'meta_query' => array(                  
          'relation' => 'AND',
           array(
              'key' => 'Year',
              'value' => $_GET["YearMin"], 
              'compare' => '>=',
              'type' => 'NUMERIC',
          ),
          array(
              'key' => 'Year',
              'value' => $_GET["YearMax"], 
              'compare' => '<=',
              'type' => 'NUMERIC',
          ),
          array(
              'key' => 'Wall',
              'value' => $_GET["WallMin"], 
              'compare' => '>=',
              'type' => 'NUMERIC',
          ),
          array(
              'key' => 'Wall',
              'value' => $_GET["WallMax"], 
              'compare' => '<=',
              'type' => 'NUMERIC',
          ),
          
          array(
              'key' => 'BT',
              'value' => $_GET["BTMin"], 
              'compare' => '>=',
              'type' => 'NUMERIC',
          ),
          array(
              'key' => 'BT',
              'value' => $_GET["BTMax"], 
              'compare' => '<=',
              'type' => 'NUMERIC',
          ),
          array(
              'key' => 'KT',
              'value' => $_GET["KTMin"], 
              'compare' => '>=',
              'type' => 'NUMERIC',
          ),
          array(
              'key' => 'KT',
              'value' => $_GET["KTMax"], 
              'compare' => '<=',
              'type' => 'NUMERIC',
          ),
          
        ),
);

$my_query = new WP_Query($args);
if ($my_query->have_posts()) : while ($my_query->have_posts()) : $my_query->the_post();
?>
 
<?php the_title(); ?><?php the_post_thumbnail(); ?><?php the_excerpt(); ?>
 
<?php endwhile; endif; wp_reset_postdata(); ?>
```
のように
```php
array(
      'key' => 'Year',
      'value' => $_GET["YearMin"], 
      'compare' => '>=',
      'type' => 'NUMERIC',
 ),
 array(
      'key' => 'Year',
      'value' => $_GET["YearMax"], 
      'compare' => '<=',
      'type' => 'NUMERIC',
),
```
を追加すると検索結果が表れるまで１０秒程度かかってしまいます。
まだテスト段階で記事も２～３個の状況なのになぜこれを追加すると極端に時間が掛かるようになるのかわからず困っています。

カスタムフィールドの設定は「Advanced Custom Fields」というプラグインを利用しており、いずれのカスタムフィールドもタイプを数値にしてます。ラベル、名前、最小値、最大値が違うだけで、その他の設定は初期のままです。

```php
array(
      'key' => 'Year',
      'value' => $_GET["YearMin"], 
      'compare' => '>=',
      'type' => 'NUMERIC',
 ),
 array(
      'key' => 'Year',
      'value' => $_GET["YearMax"], 
      'compare' => '<=',
      'type' => 'NUMERIC',
),
```
がない状態で
```php
echo $_GET["YearMin"];
```
を表示させて見ても表示に時間が掛かることはありません。

KazuhiroHatano様からご教示頂きましたQuery Monitorの計測結果は

Yearを追加してもしなくても
６４Q遅いクエリー２重複クエリー４
PHPエラー(10notice,675deprected)
でした。

確認すべき場所、改善点、疑わしい点などご教示お願いいたします。


Wordpressのカスタムフィールドでの検索で特定の条件を追加すると処理に時間がかかる理由または調査方法を教えてください

### 前置き
みなさまにはいつもお世話になっております。
WEB開発初心者です。1つ教えていただきたいのですが、
### 分からないこと
jQueryで、一番上までスクロールされたら発火する処理をしたいのですが、
調べても、一番下までスクロールした時の記事はあるのですが、
上のパターンはありませんでした。
どなたか、教えていただけると嬉しいです。


jQueryで一番上までスクロールされたら発火する処理をしたい

以下のプログラムですが
<span>～</span>間にある　ＳＱＬカフェ掲示板だよ　の文字フォントサイ
ズ35ptですが　jk.gif　画像のつま先の「右横」に配置されます。

次に
以下に変更します。
<div>～</div>に変更すると　上記の「文字」が　jk.gif　画像の　下に　移動します。

以上ですが「文字」の位置が　変わります。
<div>～</div>すると　文字の位置が下に移動するのは何故ですか？

よろしくお願いいたします。
　
jk.gif　の画像は以下のサイトにあります。

❶　https://www.sbcr.jp/support/14130/
❷　サンプルデータのダウンロード(320Mb)
❸　MySQL_Book.zip(解凍する)
❹　MySQL_Book(解凍後のファイル)
❺　chapter
❻　CHAPTER21
❼　pic
❽　jk.gif

=========================

<?php

/**********　データベース情報等の読み込み　**********/
require_once("data/db_info.php");

/******　データベースへ接続、データベース選択　********/
$s=new pdo("mysql:host=$SERV;dbname=$DBNM",$USER,$PASS);

/***************　タイトル、画像等の表示　**********/
print <<<eot1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ＳＱＬカフェのページ</title>
</head>
<body style="background-color:silver">
<img src="pic/jk.gif" alt="女子のイラスト">
<span style="color:purple;font-size:35pt">
ＳＱＬカフェ掲示板だよ
</span>

<p>見たいスレッドの番号をクリックしてください</p>
<hr>
<div style="font-size:20pt">（スレッド一覧）</div>
eot1;

/***************　クライアントIPアドレス取得　***************/
$ip=getenv("REMOTE_ADDR");

/***　スレッド名の変数$su_dにデータがあればtbj0に挿入　******/
$su_d=isset($_GET["su"])? htmlspecialchars($_GET["su"]):null;
if($su_d<>""){
$s->query("INSERT INTO tbj0 (sure,niti,aipi) VALUES ('$su_d',now(),'$ip')");
}

$re=$s->query("SELECT * FROM tbj0");
while($kekka=$re->fetch()){
print <<<eot2
<a href="keizi.php?gu=$kekka[0]">$kekka[0] $kekka[1]</a>
<br>
$kekka[2]作成<br><br>
eot2;
}

/***************　スレッド作成フォーム、検索ページへのリンク　*****/
print <<<eot3
<hr>
<div style="font-size:20pt">（スレッド作成）</div>
新しくスレッドを作るときは、ここでどうぞ！
<br>
<form method="GET" action="keizi_top.php">
新しく作るスレッドのタイトル
<input type="text" name="su" size="50">
<div><input type="submit" value="作成"></div>
</form>
<hr>
<span style="font-size:20pt">（メッセージ検索）</span>
<a href="keizi_search.php">検索するときはここをクリック</a>
<hr>
</body>
</html>
eot3;
?>

<span>を<div>に変更すると ＳＱＬカフェ掲示板だよ の文字が下に移動した。

```jquery
<div class="day">
 <div class="dayone">
  <h2>1日目</h2>
    <p>東京</p>
  </div>
  <div class="daytwo">
   <h2>2日目</h2>
    <p></p>
  </div>
</div>
```

上記のように２日目の中身が空の場合、daytwoのdivごと非表示にしたいです。
自分でjqueryでやってみたのですが、全然出来ませんでした。
ちなみにこれはPHPのforeachで複数出ている状態でそれぞれに適用させたいです。
説明が少なくてわかりにくいかと思うのですが、少しでもヒントが欲しいのでよろしくお願いします。

p要素が空の場合親要素のdivごと非表示にしたいです。

DetaiDashboard3.js、DetailDashboardList.js、api.jsがあります。
**コードは以下のとおりです。**

**DetaiDashboard3.js**
```Javascript

const DetailDashboard3 = () => {
    const [kuchikomis, setKuchikomis] = useState([]);

    useEffect(() => {
        fetch();
    }, [])

    const preid = useParams();     
            const stringprename = JSON.stringify(preid);
            const obj = JSON.parse(stringprename);

    const fetch = async() => {
            const id = obj.id;
            const data = await Api.openDetailDashboard(id);
            console.log(data[0]); //1
            await setKuchikomis(data);
            console.log(data[0]); //2
            console.log(kuchikomis); //3
    }
    const classes = useStyles();
    return (
        <div className={classes.root}>
        <h1>詳細ページ</h1>
            <DetailDashboardList kuchikomis={kuchikomis} fetch={fetch} />
        </div>
    )
};
    
export default DetailDashboard3;
```

**DetailDashboardList.js**
```Javascript
const DetailDashboardList = (props) => {
    const classes = useStyles();
    const kuchikomilist = props.kuchikomis.map((kuchikomi) => {
        return (            
        <ListItem key={kuchikomi.id}>
        <h1>kuchikomilistの内容</h1>
        省略
        </ListItem>
            )
    }
    );
    return (
        <div className={classes.root}>
            <h2>最近の投稿</h2>
            <ul className={classes.ul}>{kuchikomilist}</ul>
        </div>
    )
}
export default DetailDashboardList;
```

**api.js**
```Javascript
export const openDetailDashboard = async(id) => {
    const kuchikomi = await db.collection("kuchikomi").doc(id);
    let kuchikomis = [];
    kuchikomi.get().then((doc) => {
        if (doc.exists) {            
            kuchikomis.push({
                id: doc.id,
                content: doc.data().content,
                kind: doc.data().kind,
                lowTemp: doc.data().lowTemp,
                Images: doc.data().Images,
            });
            console.log(kuchikomis); //4
            console.log(kuchikomis[0]); //5
        } else {
        }
    }).catch((error) => {
    });
    return kuchikomis;
};
```

**結果**
ブラウザの表示は、以下の２行のみ表示され、DetailDashboardList.jsの省略の部分は表示されません。

　詳細ページ
　　最近の投稿

しかし、サーバーを起動させた状態でDetailDashboardList.jsの一部（例えば<h1>タグ内の文言）を編集して保存をかけると省略の部分も表示されるのです！
もちろん本来は、省略の部分も初めから表示させたいです。

コンソールは、以下の順序で呼ばれ、//1と//2はundefinedで、//3は空の配列です。
DetaiDashboard3.js内で示した//1
DetaiDashboard3.js内で示した//2
DetaiDashboard3.js内で示した//3
api.js内で示した//4
api.js内で示した//5

このようなことが起こる原因は、思うように非同期処理が機能していないことが原因と考えたのですが解決策を知りたいです。
自分としては調べ尽くしたのですが分かりませんでした。
初歩的な質問で申し訳ありませんがよろしくお願いします。




javascriptの非同期処理が待ってくれません。

バニラでのコーディングを勉強中です。
読み込んだ画像に対してaddEventListenerで「クリックしたらcanvasに描画」を記述したいと思っています。canvasにはfabricを使っていますが、今回の質問には関連しないと思います。

```javascript
document.getElementById( "target" ).addEventListener( "change", function() {
	var fileList = this.files ;
	var num = 100;
	for( var i=0,l=fileList.length; l>i; i++ ) {
		var blobUrl = window.URL.createObjectURL( fileList[i] ) ;

        document.getElementById('Hikidasi').insertAdjacentHTML('beforeend','<img id="' + i + '" class="Htool" src="' + blobUrl + '" style="width:5vw">');
        document.querySelectorAll('.Htool').forEach(function(cards){
        cards.addEventListener('click',function(){
            console.log(cards.src);
            fabric.Image.fromURL(cards.src, function(oImg) {
            oImg.scaleToWidth(Can.width*0.1);
	        oImg.set('left', Can.width*0.3);
	        oImg.set('top', Can.height*0.3);
            Can.add(oImg);
        });
        });
        });
	}
    });
```

目的通り読み込んだ画像をクリックでcanvasへの描画はできましたが、forEachで回しているからだと思いますが、1個目の画像は1回、6個目の画像は6回分Can.add(oImg)されてしまいます。
querySelectorAllへのイベントなのでforEachを使っていますが、これが原因だと思いますが、解決策がわかりません。
すべて1回の描画に収めるのはどのようにすればよいでしょうか。


javascriptのquerySelectorAllにクリックイベントを付与したいが、回数がおかしい

現在、英語の並び替えアプリを作っており、
問題がランダムに出題されるようになっているのですが、
その問題に日本語訳をつけたいです。
ここで、ランダムに出題される問題に対し、
どうしたらその問題と和訳を対応させられるのかがわかりません。
どなたか教えてください。
和訳はプログラム内のlet qで上から順番に
「私は日曜日に映画を時々見ます。」
「この本は私には難し過ぎます。」
「ユミは叔母の家に泊まることができません。」
「彼らは今どこでサッカーをしているのですか？」
でお願いします。


```ここに言語を入力
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>並び替え問題</title>

<script>
  let q_bk = [];
  let pos = 0;

  function btnActivate() {
      document.querySelector('#prev').disabled = (pos === 0);
      document.querySelector('#next').disabled = (pos === q_bk.length - 1);
  }

  window.addEventListener('DOMContentLoaded', ()=>{

    document.querySelector('.ans').addEventListener('click',()=>{
        const ansText = q_bk[pos].charAt(0).toUpperCase() + q_bk[pos].slice(1) ;
        document.querySelector('.answer_view').innerHTML = ansText;
    });

    btnActivate();

    const shuffle=(x,flg)=>x.map((y,z)=>[y,(flg&&x.length==z+1)?1:Math.random(),z]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
    let q = [
      "i sometimes watch movies on Sunday .",
      "this book is too difficult for me .",
      "yumi can't stay at her aunt's house .",
      "where are they playing soccer now ?",];
    q=shuffle(q);
    q_bk = [...q]
    document.querySelectorAll('.view').forEach((view,idx)=>{
        shuffle(q[idx].split(' '),true)
        .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
    view.addEventListener('dragover',e=>e.preventDefault());
    var t=null;
    view.querySelectorAll('div').forEach((x,y,z)=>{
        if(z.length>y+1){
          x.setAttribute("draggable","true");
        }
        x.addEventListener('drop',e=>{
          if(x.getAttribute('draggable')){
            view.insertBefore(t,x.nextElementSibling);
          }
        });
        x.addEventListener('dragstart',e=>{
          t=e.target;
        });
      });
    });

    document.querySelector('.btn-score').addEventListener('click',()=>{
      let score = 0;
      const totalScore = document.getElementById('score-message');
      document.querySelectorAll('.view').forEach((view,idx)=>{
        const a=[...view.querySelectorAll('div')].map(x=>x.textContent).join(' ');
        if(q[idx]==a) score++;
      });
      totalScore.textContent = score + "点";
    });
  });

  window.addEventListener('DOMContentLoaded', ()=>{
  const next=document.querySelector('#next');
  const q=[...document.querySelectorAll('.q')];
  next.addEventListener('click',()=>{
    pos = pos + 1;
    document.querySelector('.answer_view').innerHTML = "";
    const active=document.querySelector('.q:not([hidden])');
    const idx=q.indexOf(active);
    active.setAttribute('hidden','');
    q[idx+1].removeAttribute('hidden');
    btnActivate();
  });
});

window.addEventListener('DOMContentLoaded', ()=>{
  const prev=document.querySelector('#prev');
  const q=[...document.querySelectorAll('.q')];
  prev.addEventListener('click',()=>{
    pos = pos - 1;
    document.querySelector('.answer_view').innerHTML = "";
    const active=document.querySelector('.q:not([hidden])');
    const idx=q.indexOf(active);
    active.setAttribute('hidden','');
    q[idx-1].removeAttribute('hidden');
    btnActivate();
  });
});
</script>

<style type="text/css"> 
    body {
      font-family: serif;
      text-align: center;
    }
    .quizzes-container {
      width: 400px;
      margin: 50px auto;
    }
    .quiz-container {
      border-bottom:1px solid black;
      padding-bottom: 20px;
    }
    #score-container {
      border: 1px solid black;
      height: 50px;
      width: 20%;
      position: relative;
      left: 40%;
    }
    .btn-score {
      display: block;
      margin: 20px auto;
      font-family: serif;
      background-color: white;
    }
    .view{
      display:flex;
      position: relative;
      top: 0;
      bottom: 0;
      right: 0;
      left: 38%;
    }
    .view div{border:solid 2px;padding:8px 16px 8px 16px ;}
    .view div:not(:first-child){border-left:solid 0px;}
</style>

<H2>並び替え問題</H2>
<div class="quiz-container"></div>
<div class="q">
<h2>第1問</h2>
<div class="view"></div><br>
<div class="quiz-container"></div></div>
<div class="q" hidden>
<h2>第2問</h2>
<div class="view"></div><br>
<div class="quiz-container"></div></div>
<div class="q" hidden>
<h2>第3問</h2>
<div class="view"></div><br>
<div class="quiz-container"></div></div>
<div class="q" hidden>
<h2>第4問</h2>
<div class="view"></div><br>
<div class="quiz-container"></div></div><br>

<input type="button" value="前へ" id="prev">
<input type="button" value="次へ" id="next"><br><br>
  <div id="score-container">
    <p id="score-message"></p>
  </div><button class="btn-score" type="button">合計得点を見る</button></div>
</div><button class="ans" type="button">解答を見る</button></div>
<div class="answer_view"></div>
```

問題に説明文をつける

headerを画像の様に横並びさせたいです。
これだと、「リスト」と「りすと」がズレたり、上手くを幅を設定出来ずにいます。
どの様なコードにしたり、追加したら良いのでしょうか。
お助け下さい。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-01-24/5f5aea7c-fddb-42a0-b0d6-acfbb9a8a59c.jpeg)

```html
 <header>
         <div class="container-jg d-flex">
         <div class="header-logo">
           <img src="..." alt="ロゴ">
         </div>
         <div class="header-block">
           <ul class="header-list">
             <li>リスト1</li>
             <li>リスト2</li>
             <li>リスト3</li>
             <li>リスト４</li>
             <li>リスト5</li>
             <li>リスト6/li>
           </ul>
             <ul class="header-list margin-l-r">
               <li><span>りすと1</span></li>
               <li><span>りすと2</span></li>
               <li><span>りすと3</span></li>
               <li><span>りすと4</span></li>
               <li><span>りすと5</span></li>
               <li><span>りすと6</span></li>
             </ul>
         </div>
         <div class="header-item">
           <ul>
             <li>
               <a class="navbar-brand" href="..."> <img src="アイコン1" alt="" width="29" height="29"></a>
               </li>

             <li><a class="navbar-brand" href="..."> <img src="アイコン2" alt="" width="29" height="29"></a>
             </li>
             <li class="mark">マーク</li>
           </ul>
         </div>
         </div>
       </header>
```
```css
.container-jg{
  width: 100%;
  width: 1146px;
  margin-left: auto;
  margin-right: auto;
}

header{
  background-color: #000000;
  width: 1920px; /* or max-widht */
  height: 80px;
}

.d-flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:center;
}

.header-logo img{
  padding-top: 27.3px;
  padding-bottom: 27.3px;
  padding-right: 100px;
}

.header-list　{
  float: left;
  list-style: none;
}
.header-list ul{
  display:flex;
}
.header-list li{
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 18px;
  letter-spacing: 0.05em;
  line-height: 25px;
  text-align: left;
  color: #fff;
}

ul{           /*ulの余白を消す*/
  margin:0;
  padding:0;
}

ul li{
  list-style:none; /*リスト装飾消す*/
}
.header-list li{
  display:inline-block;  /*リストを縦に横並び*/
}
.margin-l-r {
  margin:0 60px;   /*下のリストの左右に余白*/
}

.header-list li+li{    /*隣合う場所に余白*/
  margin-left:20px;
}

.header-list span{
  font-family: YuMincho;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.05em;
  line-height: 14px;
  text-align: left;
  color: #fff;
}
.header-item ul{     /* 追加*/
  display:flex;      /*追加*/
  display:space-between;
}
.header-item ul li{
  margin-left:20px;    /*左に余白*/
}

.mark{
  font-family: "Adobe Garamond Pro";
  font-weight: normal;
  font-size: 18px;
  line-height: 34px;
  text-align: left;
  color: #fff;
}

```

header 横並び（flex、grid）

### したいこと
jsで時間が〇〇:△△〜n分以内ならtrueになるコード
簡単に言うと指定した時間内か判別したい

### やったこと
Dateもやったけどプロパティーとか多くてよくわかりませんでした。
今**頭に浮かんでいる**のはnew Date()で現在時刻取得=>ifの&&使って判別 <=ここまでを関数に
っていうこと。やり方がわかりません><

#### 詳細
最小単位:1分
関数内でDate作成=変数外では生成しない
true/false
こんなかんじが理想↓
```js
// inDate(時+分,何分以内か)
inDate("0930",”45”) // 9時半から45以内(9:00~9:45)ならtrue
inDate("2100",”5”) // 21時から5以内(21:00~21:05)ならtrue
inDate("0030",”45”) // 0時半から45以内(0:30~1:15)ならtrue
```


[html5 javascript] 指定時間内かの判別

input type=fileでキャンセルが押された場合にオブジェクトを破壊したいです
addEventListenerで探知はできないようなのですが、
この場合どのように参照押したあとにキャンセルされたか判定すればいいのでしょうか？
下記ではダメでした

input.addEventListener("change",function(){
if(this.value==null||this.value==""||!this.value){
this.remove();
}
});

```ここに言語を入力
<script>
window.onload=function(){
input=document.createElement("input");
input.type="file";
input.addEventListener("change",function(){
alert("選択");
});
input.addEventListener("canncel",function(){
this.remove();
});
document.body.appendChild(input);
}
</script>
```

JavaScript input fileのキャンセル

### 前提・実現したいこと
ヘッダーを上部に固定し、スクロールしても追従してくるようにしたいです
### 発生している問題・エラーメッセージ
スマホで確認するとヘッダー部分とハンバーガーメニュー内のナビゲーションメニューをスクロールすると下へスクロールできますが、メインビジュアル部分のみスクロールできません。
pcで見たり、pc上のスマホバージョンでもスクロールできます。メインビジュアルのスライドショーが始まるとタッチしてもスクロールバーが表示されなくなるようです。
初心者で至らない点があるかと思いますがどうぞよろしくお願いします。


### 該当のソースコード

```html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo3hair salon caravan</title>	
<link rel="stylesheet" href="bootstrap-reboot.css">	
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>	
<script src="js/main.js"></script>	
<script src="js/smooth-scroll.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="pc.css" media="(min-width:768px)">
<link rel="stylesheet" href="sp.css" media="(max-width:767px)">	
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
 <script>
	var scroll = new SmoothScroll('a[href*="#"]');
 </script>
</head>

<body>
<header id="page-header">
<div id="header-container">	
<div id="btn-container" >	
<div id="btn-menu">
  <i></i>
  <i></i>
  <i></i>
</div>
</div>
<div class="pc rogo"><img src="images/caravan-rogo3.png"></div>
	<div class="rogo sp"><img src="images/sp-caravan-rogo3.png"></div>

<div class="yoyaku pc"><a href=""><img src="images/pc-btn-casravan.jpg"></a></div>
<div class="yoyaku sp"><a href=""><img src="images/btn-yoyaku.jpg"></a></div>							
	
	
</div>	
</header>
			
	
<main>
	<div id="mv-container">
	<div class="mainvisual-container">
	<img src="images/sp-caravan-m1−3.jpg" alt="salon image">
	<img src="images/sp-caravan-m2.jpg" alt="salon image">
	<img src="images/sp-caravan-m3.jpg" alt="salon image">
	<img src="images/sp-caravan-m8.jpg" alt="salon image">
	<img src="images/sp-caravan-m4.jpg" alt="salon image">
	<img src="images/sp-caravan-m10.jpg" alt="salon image">
		
	</div>	
    </div>
</main>		
		
<nav id="nav-main">	
	<div class="background">
<ul>
	<li>menu</li>
	<li>staff</li>
	<li>blog</li>
	<li>access</li>
	<li>reserve</li>
	<li>recrute</li>
	<li>info</li>
</ul>	
		</div>
</nav>	

<script>
  $(document).ready(function(){
    $('.mainvisual-container').bxSlider({
		mode: 'fade',
        speed: 3900,
        auto: true,
		pager: false,
		controls: false

	});
  });
</script>
<script>
	$('#btn-menu').on('click',function(){
		$('#btn-menu, #nav-main' ).toggleClass('show');
	});
</script>
	
	
	<script>
	$(function() {
		const
		height=$("header-container").height();
		$("main").css("padding-top",height +40 );
	});
	</script>
```

```css
<style.css>
#header-container {
	display: flex;
	position: fixed;
	z-index: 10;
	width: 100%;
	height: auto;	
	top: 0;
	background-color: #fff;
   }

#header-container .pc{
	margin: 0 0 0 auto;
}
#header-container .sp{
	margin: 0 0 0 0;
}
#page-header{
	height: 40px;
}
#btn-menu {
  display: block;
  width: 25px;
  height: 33px;
  position: relative;

}

main {
	top: 45px; 
}
#nav-main {
	position: fixed;
	top: 3rem;
	left:0;
	right: 0;
	bottom:0;
	height: fit-content;
	padding: 1rem;
	display: none;
	transition: opacity .5s, visibility .5s;
}
#nav-main.show {

	display: block;
	position: fixed;	
    left: 0;
	padding: 0;
	z-index: 11;
}  
```

```javascript
<main.js>
```
### 試したこと
・ヘッダーに100vhを指定するとスクロールできますが、リンク先をクリックできず、またヘッダーの背景を白にしたいので画面全体が真っ白になります。
・position: stickyを指定しましたが変化がありませんでした。
・その他スムーズにスクロールするjqueryなど試しましたが変化がありませんでした。
### 補足情報（FW/ツールのバージョンなど）
スライドショーにはjqueryを使用しています。
js/main.jsには現在何も書いておりません

smooth-scroll.jsは文字数の都合上こちらに記載いたしました。
[リンク内容](https://codepen.io/hitomizu4/pen/vYeWpEO)

動作確認していただくためデモサイトをアップしました。pcバージョンの画像加工が完了していないため、スマホバージョンで見ていただけると助かります。(実際にスマホで見るとメインビジュアルがスクロールできない状態です。)
デモサイト　[リンク内容](http://hiotmi0223.html.xdomain.jp/)

スマホでサイトをみた時にメインビジュアルのみスクロールできません

オリジナルテーマのサイトを現在改修しています。
今回新しくtaxonomy.phpを作成し、一覧ページとtaxonomy.phpにタクソノミーで絞り込みできるリンクを設置しました。
taxonomy.phpでは該当するタームのリンクにカレントのclassを付与したいのですが、現在のタームを取得する方法がわかりません。

### 構造
index.php

/blog/
　└index.php（URLパラメータで一覧・詳細・絞り込みを振り分け）
　└archives.php（一覧）
　└single.php（詳細）
　└taxonomy.php（絞り込み）

/news/（blogとほぼ同じ構造）

/wp/（wordpressのファイル）

他静的ページ等

ーーーーーー
blogページは
詳細がhttps://hogehoge.com/blog/?p=投稿ID
絞り込みがhttps://hogehoge.com/blog/?タクソノミー名=ターム名
で表示されるようになっています。

### html
```php
<div class="link'>
 <?php
  $terms = get_terms('タクソノミー名');
  foreach ($terms as $termitem) {
   if ($term === $termitem->slug) {
    echo '<a href="/blog/?タクソノミー名='.$termitem->name.'" class="current">'.esc_html($termitem->name).'</a>';
   } else {
    echo '<a href="/blog/?タクソノミー名='.$termitem->name.'">'.esc_html($termitem->name).'</a>';
   }
  }
 ?>
</div>
```
現在上記の状態ですが、全てelseの方が出力されてしまいます。
### 試したこと
<?php echo $terms; ?>をやっても何も表示されませんでした。
taxonomy.php自体は表示されているものの、そもそもタームが紐付いていないのでしょうか…

wordpress　taxonomy.phpで現在のタームを取得しカレントをつけたい

### 前提・実現したいこと
自分の模写したコードに対し、Javascriptでハンバーガーメニューを実装したい。

ここに質問の内容を詳しく書いてください。

### 発生している問題・エラーメッセージ
Javascriptを勉強し始めたばかりのものです。
スクールの課題でハンバーガメニューをJavaScriptで作ることになり、資料などを見ながら勉強しているのですがjQuelyなどの予備知識が一才ないまま勉強をしているので訳がわからなくなっています。

そこでもし可能ならばJavaScriptでのハンバーガメニューを作る際のヒントが欲しいと思い投稿させていただきました。

一応変数の指定はできていると思うのでそれ以降の流れをヒントとしていただければ嬉しいです。

### 試したこと
ネット上でハンバーガーメニューを作っているサイトはたくさん見たのですが、jQuelyで作っているものが多かったりコードの長さもまちまちで何から参考にしていいのか全く検討がつかないです。

＄があるものはjQuelyの書き方なんだなと調べながらにわかっているつもりなのですが・・・