常連

### 前提

Gitにフォルダーをプッシュしたいのですが、error: failed to push some refs to URL と出てしまいます。



### 発生している問題・エラーメッセージ

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-02/896a96a9-1f0e-4131-8961-3f040db167a6.jpeg)

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

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-02/c5920173-b2e1-4462-ad70-bbb7099b559a.jpeg)

### 試したこと

こちらのサイトに沿って行っていました。
https://tech-blog.rakus.co.jp/entry/20200529/git#1-4-%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B

このサイトの　git fetchとgit mergeをやってみましたが、同じ結果にたどり着きました。
https://dianxnao.com/git-push%E3%82%A8%E3%83%A9%E3%83%BC%EF%BC%9Aerror-failed-to-push-some-refs-to-%E3%81%AF%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%81%AE%E6%96%B9%E3%81%8C%E6%96%B0%E3%81%97%E3%81%84%E3%81%AE%E3%81%A7/

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-02/545514ed-d9e7-44e8-b5f6-1b21eb39726c.jpeg)

### 補足情報（FW/ツールのバージョンなど）

Hyperというターミナルを使っています。

### Cocode様のアドバイスを試した結果

Cocode様

丁寧な解説誠にありがとうございます。

手順①、②までは順調でしたが、手順③を行うと下の画像のように表示されてしまいました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-02/eac2aeab-0f07-4189-b614-56a0a4a27176.jpeg)

git pull origin main はこの記事を参考に行いました。
https://qiita.com/katsuyuki/items/8e03e5eb4223912a08c5

最後にまたgit pull... とあるのでまたgit pullをすべきなのでしょうか...

### 追加質問への回答を行った結果

Cocode様
本当に丁寧でわかりやすいご指導ありがとうございます。

ご指示いただいた案内に沿っていたのですが、git push -u origin mainでまたerrorになってしまいました。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-02/d7acfeb3-6703-4e13-9fbf-891b19f23365.jpeg)

そこでこちらのサイト
https://pgmemo.tokyo/data/archives/1535.html
の方法を試しましたが、２．マージするの部分で下のようなerror？が出ました。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-02/8b86cde1-4f5b-405b-9c9d-2a2e5e031bde.jpeg)

この夢は諦めた方がいいのでしょうか...😅

### $ git logの実行結果

返信が遅くなり申し訳ございません。こちらです。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-02/29b23201-6a02-48a2-8064-2d074ea1b5c7.jpeg)

### 解決しました！！！！！😂😂😂

Cocode様

追加情報ありがとうございます！
無事追加されました！
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-10-03/f173b77b-b42a-4dc1-b5bb-3a370fa74ecb.jpeg)

### 解決手順


```terminal

//だめパターン
$ git init

$ ls

$ git status

$ git add .

$ git status

$ git commit -m "added by hyper"

$ git log

$ git remote add origin URL

$ git push

$ git push --set-upstream origin main

//okパターン
$ git init 

$ git commit --allow-empty -m "first commit"

$ git branch -M main

$ git push origin main  >>> error

$ git pull origin main >>> refusing to merge unrelated histories と出たので

$ git merge --allow-unrelated-histories origin/main

$ git push origin main

```

以上でしっかりGithubに反映されました！ながいことお付き合いしていただいて本当にありがとうございます！
これらのサイトを参考にerror達に対処しました。
https://qiita.com/Takao_/items/5e563d5ea61d2829e497

https://qiita.com/mei28/items/85bc881ac1f26332ac15


git リモートリポジトリにプッシュする

### 現状
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-13/85be5d30-e2d4-4c99-b299-0096320a6cea.png)

すべてのキーワードから探すをクリックすると
ポップアップで一覧が出るようにしています。

そこで問題が発生しています。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-13/449f7552-3b3b-4b92-acdd-ea9fe7ab37e0.png)

このようにポップアップに重なって表示されてしまいます。

### 解決策
①JavaScriptですべてのキーワードから探すをクリックしたら
z-index: 1;を削除する
②そもそもz-indexの重なり順に問題がある

### コード
```
.tag_container
    .key_tag_contanier
       button.key_tag_all data-type='keywords' すべてのキーワードから探す
          .abc
            .test
             | マーケティング
            .test
              | マーケティング
            .test
              | マーケティング
            .test
              | マーケティング
          .abc 
            .test
              | マーケティング
            .test
              | マーケティング
            .test
              | マーケティング
            .test
              | マーケティング
      .key_tag_contanier
          button.key_tag_all data-type='sectors' すべての業界から探す
          // todo 下記のコードがないとポップアップの範囲外をクリックした時に閉じないのでdisplay:noneをしている jsで制御していそう
           button#left_menu_search_button_conditions data-type='conditions' さらに絞り込む ＋
```

```
.tag_container {
  display: flex;
  justify-content: space-around;
}

.key_tag_contanier {
  background: rgba(240,215,185,0.5);
  width: 40%;
  height: 390px;
  border-radius: 50%;
}

.key_tag_all {
  position: relative;
  display: flex;
  justify-content: center;
  color: #333;
  margin: 47px auto;
  z-index: 1;
}

.key_tag_all::before {
  content: "";
  position: absolute;
  background: #ffd69d;
  border: solid 1px #ffffff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
}

.abc {
  display: flex;
  justify-content: space-around;
}

.test {
  position: relative;
  display: flex;
  justify-content: center;
  color: #333;
  margin: 37px auto;
  z-index: 1;
}

.test::before {
  content: "";
  position: absolute;
  background: #ffd69d;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: -1;
}

#left_menu_search_button_conditions {
  display: none;
}
```
```
const target = document.getElementsByClassName('key_tag_all');

target.addEventListener('click', () => {	
	target.style.z-index = "0";	
}, false);

```

ポップアップ画面
```
    #js-popup-search-keywords-container.search_popup_container.hide
      .search_popup_background
      .search_popup
        .search_popup_title
          .search_popup_title_top
            | キーワード一覧
            span.search_popup_subtitle （複数選択可）
          = image_submit_tag s3_common_url(file_name: 'close-icon.svg'), class: :search_popup_form_submit
        = form_with url: companies_path, method: :get, local: true, class: :search_popup_form do |f|
          #popup-search-keywords.popup_search_items
          .search_popup_form_submit_container
            = f.submit '検索', class: :search_button
```
```
.search_popup_container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

.search_popup_background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(169,167,157,.5);
}

.search_popup {
  width: 900px;
  margin: auto;
  padding: 24px;
  font-size: 15px;
  background: #ffffff;
  border-radius: 9px;
  z-index: 10;
  overflow-y: auto;
  height: 635px;
}
_title {
  margin-left: 16px;
}

@media screen and (max-width:680px) {
  .search_popup {
    margin: 10px;
    padding: 14px;
    height: 450px;
  }
}

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

@media screen and (max-width:680px) {
  .search_popup_title {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (max-width:680px) {
  .search_popup_title_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.search_popup_subtitle {
  color: #E98F38;
}

.popup_search_items {
  display: grid;
  grid-template-columns:
      25%
      25%
      25%
      25%;
  margin-top: 20px;
  border-top: 1px solid #F0EEE7;
  border-bottom: 1px solid #F0EEE7;

  >label {
    border-bottom: 1px solid #F0EEE7;
    margin-bottom: -1px;
    padding: 16px;

    [type='checkbox'] {
      margin-right: 16px;
    }
  }
}

@media screen and (max-width:680px) {
  .popup_search_items {
    grid-template-columns: 55% 50%;
  }
  .popup_search_items > label {
    padding: 12px;
  }
}

.search_popup_form {
  position: relative;
}

.search_popup_form_submit_container {
  display: flex;
  justify-content: flex-end;
  margin: 16px 16px 0 0;
}

.search_button{
  background-color: #000;
  color: #ffffff;
  border-radius: 20px;
  padding: 2px 30px;
}
```
```
let key_tag_all = document.querySelectorAll('.key_tag_all');
  key_tag_all.forEach(function(target) {
    target.addEventListener('click', function(_event) {
      const form = document.getElementById(`popup-search-${this.dataset.type}`);
      if (form.children.length <= 1) {
        fetch(`/api/${this.dataset.type}`, {
          method: 'GET',
        }).then(response => {
          if (response.ok) {
            return response.json();
          }
        }).then(data => {
          setSearchPopupCore(form, `${this.dataset.type}[]`, data);
        }).catch(error => {
          console.log(error);
        });
      }
      closeSearchPopups();
      document.getElementById(`js-popup-search-${this.dataset.type}-container`).classList.remove('hide');
    });
  });

  document.getElementById('left_menu_search_button_conditions')
    .addEventListener('click', function(_event) {
      document.querySelectorAll('.key_tag_all').forEach(node => { node.click(); });
      closeSearchPopups();
      document.getElementById('js-popup-search-conditions-container').classList.remove('hide');
    });

  let close_search_popup = document.querySelectorAll('.search_popup_form_submit');
  close_search_popup.forEach(function(target) {
    target.addEventListener('click', closeSearchPopups);
  });

  let search_popup_form_close = document.querySelectorAll('.search_popup_form_close');
  search_popup_form_close.forEach(function(target) {
    target.addEventListener('click', closeSearchPopups);
  });

  let search_popup_background = document.querySelectorAll('.search_popup_background');
  search_popup_background.forEach(function(target) {
    target.addEventListener('click', closeSearchPopups);
  });
```

JavaScriptはとても初心者でイメージこのような感じで書いています。

### 理想像
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-13/da4d1e2c-d54a-4b94-bd47-592dc65e598a.png)

画像のようにポップアップが隠れないようにしたいです。

デベロッパーツールで
.key_tag_allについているz-index: 1;を削除したら理想な形になりますが、
こちらが消してしまうと
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-06-13/d0b423d7-7d04-442c-9246-5045be55297b.png)
このように背景色が消えてしまいます。

教えていただけますと幸いです。
よろしくお願いいたします。


















ポップアップが表示されたらcssのz-indexのプロパティを削除したい

ボタンをクリックするたびに○と×が交互に切り替わるプログラムを作ろうと
以下の様に組んでみたのですがクリックすると×のみが表示される状態になってしまいました。
どこを直したらよいのでしょう。

```
<html>
<head>
<title>○×ゲーム(１マス)</title>
</head>

<body onLoad=init()>
<h4>○×ゲーム(１マス)</h4><hr>

<script language="JavaScript">

function init(){
	document.tick.r1c1.value ="  ";
}


function ticktack(){
	
	document.tick.r1c1.value = "○";
}

function ticktack(){
	
	document.tick.r1c1.value = "×";
}

</script>

<form name="tick">
<input type="button" name="r1c1" onclick="ticktack()">
</p>
</form>
</body>
</html>
```

回答よろしくお願いします。