常連

注目の的

質問力

node.js v8.15.0
Nuxt.js nuxt@2.4.5 SSR

すごく基本的な質問なんだと思います。
ローカルで一通り作って出来たと思いサーバーにのせたのですが、最後にnpm startするとき
```text
Server listening on http://localhost:3001
```
と出ます。

アップしたサーバーからhttp://localhost:3001でcurlすると、正しいindex.htmlの中身が落ちてきているので途中までは合っているのだと思います。
でも本来使用するサーバーのドメインでアクセスすると、
```text
このサイトにアクセスできません hogehagehoge.com で接続が拒否されました。
次をお試しください:

接続を確認する
プロキシとファイアウォールを確認する
ERR_CONNECTION_REFUSED
```
と表示されてアクセスできません。

3001ではなくてポート3000は、Nuxt.jsではなくてExpressだけの別サイトで使用しているのですが、こちらは何もしなくてもhogehagehoge.com:3000で普通にアクセスできています。

何か設定が足りていないのでしょうか？
Nuxt.jsで関連していそうな部分は、
package.json
```javascript
  "scripts": {
    "dev": "NUXT_PORT=3001 NODE_ENV=localhost nodemon server/index.js --watch server",
    "build": "NUXT_PORT=3001 NODE_ENV=production nuxt build",
    "start": "NUXT_PORT=3001 NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
  },
```
いじった設定はここでNUXT_PORT=3001を追加しただけで、nuxt.config.jsは何も設定はしていません。

このpackage.jsonでNUXT_HOST=hogehagehogeを追加したり、NUXT_HOST=xxx.xxx.xxx.xxx（サーバーのIPアドレス）を追加したのですが、いずれもうまくいきませんでした。

どこか別の設定を追加すべきなのでしょうか。
ご存知の方、教えて頂けないでしょうか？

Nuxt.jsでサーバーから独自ドメインで公開する方法

例えばAさんとBさんの所持金が1000円でAさんが入力フォームから100と入力してBさんに送信するとBさんに100円を送金できるシステムを組みたいです。
Vuexのactions内でfirestoreの特定のフィールドを呼び出して書き換えることで実現しましたが、こちらのコードですと送金される側のコードが実行されなかった場合に、送金した側の所持金だけが変更されてしまいます。
そこでfirestoreのtransactionを使用したいのですが、送金する側される側二つの処理をtransactionで行いたい場合はどのような記述をしたら良いでしょうか？

```Vuex
// getTransfer 入力フォームの金額
// isMyUid 送金する側のfirebaseAuthのUID(各ユーザーのfirestoreのフィールドにUIDを格納している)
// state.isUid 送金される側のfirebaseのUID
// balance 所持金

updateUserBalance({ state, commit }, getTransfer) {
      const isMyUid = firebase.auth().currentUser.uid
      //送金される側
      db.collection('users').where('uid', '==', state.isUid).get()
        .then((docs) => {
          docs.forEach((doc) => {
            db.collection('users').doc(doc.id).update({
              balance: Number(state.isBalance) + Number(getTransfer)
            })
          })
          commit('updateDestinationBalance', getTransfer)
        })
        .catch(function(error) {
          console.log(error)
        })
      //送金する側
      db.collection('users').where('uid', '==', isMyUid).get()
        .then((docs) => {
          docs.forEach((doc) => {
            db.collection('users').doc(doc.id).update({
              balance: Number(state.balance) - Number(getTransfer)
            })
          })
          commit('updateMyBalance', getTransfer)
        })
        .catch(function(error) {
          console.log(error)
        })
    }
```

(Vue.js)Firestoreのトランザクションで2つの処理をしたい

### 前提・実現したいこと

vue.jsでwebシステムの開発を行っています。
昨日からnpm run serveを実行すると下記のエラーが表示されます。
何かわかることがあればご指摘お願い致します。

### 発生している問題・エラーメッセージ

```
'vue-cli-service' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! reportsystem@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the reportsystem@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Demo\AppData\Roaming\npm-cache\_logs\2019-10-25T08_39_37_0
12Z-debug.log
```

### 該当のソースコード

```
ソースコード
```

### 試したこと

思い当たることとして直前に copy-webpack-plugin のインストールを行っていたため当該プラグインの削除を行いました。
またnode.jsとnpmのバージョンアップを行ってみました。
node.js : 10.16.0 → 12.13.0
npm : 4.0.5 → 6.12.0

### 補足情報（FW/ツールのバージョンなど）
package.jsonは以下の通りです。

{
  "name": "reportsystem",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^2.6.5",
    "element-ui": "^2.4.5",
    "firebase": "^6.2.0",
    "firebase-admin": "^8.3.0",
    "moment": "^2.24.0",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-plugin-eslint": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-cli-plugin-element": "^1.0.1",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.9"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

npm run serveでエラーになる

こんにちは。プログラミング初心者のため初歩的な質問ですが答えていただけるとうれしいです。
【やりたいこと】
Vue.jsのドロップダウンで生年月日をユーザーに選択させるとき、100年分の生年を西暦＋和暦(例: 2020(令和2年)  2019(令和1年)　2018年(平成31年)......)にして表示させたいのですが上手くいかず…アドバイスを頂けると幸いです。よろしくお願いいたします。

【エラー】
特に出ておりません。
コンソールでnengoesを出力すると値が一つしか入っていないのでnengo()の繰り返しが上手くできていないのかなと思いますが試行錯誤の上わかりませんでした。

```HTML
  <select id="year" v-model="year" @change="get_days">
            <option v-for="i in 100" :value="i + 1920">{{ i + 1920 }}{{ nengo }}</option>  
        </select>
        <label>年</label>
```
```Vue.js
 new Vue({
            el: '#app',
            data: {
                year: 2020,
                month: 1,
                date: 1
            },
            computed: {
                nengo: function () {
                    const nengoes = [];
                    for (let i = 2020; i > 1920; i--) {
                        if (i > 2018) {
                            nengoes.push = "(令和" + (i - 2018) + "年)";
                        } else if (i > 1988) {
                            nengoes.push = "(平成" + (i - 1988) + "年)";
                        } else if (i > 1925) {
                            nengoes.push = "(昭和" + (i - 1925) + "年)";
                        } else if (i > 1911) {
                            nengoes.push = "(大正" + (i - 1911) + "年)";
                        }
                    }
                    return nengoes;
                }
            }
        });
```
![イメージ説明](b724c4bd6b7ad1e5a46fe6ef9cbe5957.png)

Vueのドロップダウンを使って西暦と和暦を合わせて一項目にして表示したい

### 前提・実現したいこと

あるサーバのAPIを使ってクイズアプリを作っているのですが、thenメソッドの外で関数を宣言するとエラーが発生してしまいます。thenメソッドのスコープ内で関数を宣言すると問題なく動作するのですが、スコープの外で宣言する方法を知りたいです。


### 発生している問題・エラーメッセージ

クイズアプリの処理をする関数を外に出すとdata is not difinedのエラー表示が出ます。

該当のソースコード：

fetch('https://opentdb.com/api.php?amount=10')
.then(response =>{
return response.json();
})
.then(data =>{
setQuiz();
});  

言語：JavaScript

ソースコード：

(function(){
  'use strict';
    const startBtn = document.getElementById('start');
    const genre = document.getElementById('genre');
    const diff = document.getElementById('difficulty');
    const qs = document.getElementById('qs');
    const answs = document.getElementById('answers');
    const qsNum = document.getElementById('qs-num');
    const btn = document.getElementsByClassName('btn');
    let score = 0;
    let count = 0;
    let answsArr = [];


    fetch('https://opentdb.com/api.php?amount=10')
    .then(response =>{
      return response.json();
    })
    .then(data =>{
      setQuiz();
    });  


     //クイズをセットする処理
     function setQuiz(){

       let qsCount = count + 1;

       genre.innerText = "[ジャンル] " + data.results[count].category;
       genre.style.display = "block";
       diff.innerText = "[難易度] " + data.results[count].difficulty;
       diff.style.display = "block";
       qs.innerText = data.results[count].question;
       qsNum.innerText = "問題" + qsCount;

       buildAnsChoises();

     }


     function buildAnsChoises(){
         // correct_answerを配列answsArrへプッシュ
       answsArr.push(data.results[count].correct_answer);
       //incorrect_answersを配列answsArrへプッシュ
       for(let i = 0; i < data.results[count].incorrect_answers.length; i ++){
         answsArr.push(data.results[count].incorrect_answers[i])
       }
       //answsArrをシャッフル
       let length = answsArr.length;
       for(let i = length - 1; i > 0; i --) {
        let j = Math.floor(Math.random() * (i + 1));
        let tmp = answsArr[i];
        answsArr[i] = answsArr[j];
        answsArr[j] = tmp;
       }
       //DOM生成処理
       for(let i = 0; i < answsArr.length; i ++){
         let dd = document.createElement('dd');
         let inp = document.createElement('input');
         answs.appendChild(dd);
         dd.appendChild(inp);
         inp.type = "button";
         inp.className = "btn";
         inp.value = answsArr[i];
       }
       //btn押下時処理
       for(let i = 0; i < btn.length; i ++){
         btn[i].addEventListener('click',function(){
           if(this.value === data.results[count].correct_answer){
             score ++;
             count ++;
           }else{
             count ++;
           }
           // クイズが終了した時の表示
           if(count === 10){
             qsNum.innerHTML = "あなたの正解数は" + score + "です！";
             qs.innerHTML = "再度チャレンジする場合は以下をクリック";
             genre.style.display = "none";
             diff.style.display = "none";
           }
           answsArr = [];
           answs.textContent = [];
           setQuiz();
         });
       }
     }
})();

JavaScript　非同期処理　thenメソッドの関数スコープの外でAPIのデータを扱うには

### 前提・実現したいこと
ご教授お願いします。
opne trivia という様々なクイズが保存されているDBからAPIを使用してデータを取得し、HTMLにて
出力するという簡単なアプリを作成しようとしています。

### 発生している問題・エラーメッセージ
取得したJsonデータをHTMLにて出力する際に文字化けを起こしてしまいます。

```
Which artist&rsquo;s studio was known as &#039;The Factory&#039;?
```

### 該当のソースコード

```javascript
const startBtn = document.getElementById('start');
const topContent = document.getElementById('topContent');
const center = document.getElementById('centerContent');
const down = document.getElementById('downContent');
const header = document.getElementById('header');
const content = document.getElementById('content');
let questionData;

startBtn.addEventListener('click', () => {
  waitingPage();
  startBtn.remove();
  asynchronousFunc().then(questionPage);

});

const asynchronousFunc = () => {
  return new Promise((resolve, reject) => {
    fetch('https://opentdb.com/api.php?amount=10')
      .then(response => response.json())
      .then(data => {
        questionData = data;
        resolve();
      })
  });
}

const waitingPage = () => {
  header.innerText = '取得中';
  content.innerText = '少々お待ちください';
}

const questionPage = () => {
  header.innerText = '問題1';
  createCategory();
  createLevel();
  createQuestion();
}

const createCategory = () => {
  const category = questionData.results[0].category;
  const genre = document.createElement('h3');
  const genreContent = document.createTextNode('[ジャンル] ' + category);
  genre.appendChild(genreContent);
  topContent.appendChild(genre);
}

const createLevel = () => {
  const difficulty = questionData.results[0].difficulty;
  const level = document.createElement('h3');
  const levelContent = document.createTextNode('[難易度] ' + difficulty);
  level.appendChild(levelContent);
  topContent.appendChild(level);
}

const createQuestion = () => {
  const question = questionData.results[0].question;
  content.innerText = question;
}

```

### 試したこと

fetchにてデータを取得した際の文字コードに問題があるのかと思い、fetchのオプジョンにて
headers: {
      'Content-Type': 'application/json; charset=utf-8'
    }
と指定してみましたが、通信自体ができなくなりました。

fetchで取得したデータの文字化け

### 前提・実現したいこと

クイズデータのAPIから、特定のデータを抽出したいです。



### 発生している問題・エラーメッセージ

```
undefined
```

### 該当のソースコード

```ここに言語名を入力
fetch('https://opentdb.com/api.php?amount=10')
  .then(response => response.text())
  .then(text => {
    console.log(text); // OK
    console.log(text.results); // NG
    console.log(text.results[0].question); // NG
  });
```

### 試したこと
text.resultsなど、色々試しましたが、データが抽出できません。

### 補足情報（FW/ツールのバージョンなど）

Chrome。Windows、

クイズデータのAPIから、特定のデータを抽出したいです。

## 実現したいこと
クイズのデータをAPIで取得し、勉強としてクイズアプリを作成しています。

**ソースコードにある変数「quizData」を他の関数でも使いたいので、グローバル変数のように扱いたいです。**
## 試したこと1
クイズのデータが格納されている「quizData」をreturnしました。
```JavaScript
const callApi = async () => {
  const res = await fetch('https://opentdb.com/api.php?amount=10&type=multiple');
  const quizData = await res.json();
  return quizData.results
}
callApi();
console.log(callApi());
```上記を実行すると、コンソールに以下が実行されました。
![イメージ説明](8de07238fc77108f69bd07d7b881f1f0.png)
「PromiseValue」から値を持ってくることができず断念しました。

## 試したこと2
クイズのデータを関数外の配列である、変数「arr」に追加すれば使えるのではと考えました。
```JavaScript
let arr = [];

const callApi = async () => {
  const res = await fetch('https://opentdb.com/api.php?amount=10&type=multiple');
  const quizData = await res.json();
  for (i = 0; i < quizData.results.length; i++) {
    arr.push(quizData.results[i]);
  }
}
callApi();
console.log(arr);
```上記を実行すると、コンソールに以下が実行されました。
![イメージ説明](69bc2261df2567e7a55b87d3639995a5.png)
なぜか配列に追加されず、クイズデータを扱えなかった。

## 何が原因だと考えるか
私の非同期処理やAPIの扱い方の理解が足りていないのが原因だと考えます。

どのようにすれば、クイズデータを他の関数などにも使い回すことができるでしょうか。

よろしくお願いします。

async、await内の変数をグローバル変数のように使い回したい

### 前提・実現したいこと
javascriptでtodoリストを作っております。
項目追加ボタンを押すと項目の後ろに『作業中』か『完了』の状態を表す表すボタンがついており、切り替えることが出来ます。
『全体』『作業中』『完了』のラジオボタンが３つあって、その内の一つを押すとそれぞれの状態のリストが表示されます。
以下の例を見ていただきたいのですが、実装したいことは、全体のリストの配列番号をそのまま『作業中』『完了』に引き継ぎたいのに、配列番号が今現在のコードの場合絶対に０から始まってしまいます。

実装したいこと
【全部のリスト】0:あああ(作業)　1:いいい(完了)　2:ううう(作業)  3:えええ(完了)
【作業中のリスト】0:あああ 2:ううう
【完了のリスト】1:いいい 3:えええ
今現在の状態
【全部のリスト】0:あああ(作業)　1:いいい(完了)　2:ううう(作業)  3:えええ(完了)
【作業中のリスト】0:あああ 1:ううう
【完了のリスト】0:いいい 1:えええ
### 発生している問題・エラーメッセージ
エラーメッセージなし

### コード

```javascrpt
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoList</title>
</head>
<body>
    <h1>ToDoリスト</h1>
    <div id="todo-list">
        <input type="radio" name="select-item" id="all-select" checked>全て
        <input type="radio" name="select-item" id="doing-select">作業中
        <input type="radio" name="select-item" id="done-select">完了
        <h2>新規タスクの追加</h2>
        <input type="text" id="add-todo">
        <input type="button" id="add-btn" value="追加">
    </div>
    <table>
        <thead>
            <th>ID</th>
            <th> コメント </th>
            <th> 状態 </th>
            <th></th>
        </thead>
        <tbody  id="display">
        </tbody>
    </table>
    <script>
        'use strict';
        //配列定義
        const todoList = [];
        const btn = document.getElementById('add-btn');
        const todoListElement = document.getElementById('display');
        btn.addEventListener('click', () => {
            displayList();
        });
        //空の配列に入力値を入れていくfunction
        const displayList = () => {
            const todo = document.getElementById("add-todo").value;
            document.getElementById("add-todo").value = "";
            const todoItem = {task: todo, status: '作業中'};
            const tasks = todoList.task;
            if(todo){
                todoList.push(todoItem);
                displayResult(todoList);
            }
        };
        //表示function
        const displayResult = (filterdTodoList) => {
            while(todoListElement.firstChild){
                todoListElement.removeChild(todoListElement.firstChild);
            };
            filterdTodoList.forEach((todo, index) => {
                const trList = document.createElement('tr');
                //index番号の要素追加
                const tdIndex = document.createElement('td');
                tdIndex.textContent = index;
                //コメントの要素追加
                const tdValue = document.createElement('td');
                tdValue.textContent = todo.task;
                //作業中、削除ボタンの要素追加
                const checkButton = createCheckButton(todo);
                const removeButton = createRemoveButton(index);
                //表示
                trList.appendChild(tdIndex);
                trList.appendChild(tdValue);
                trList.appendChild(checkButton);
                trList.appendChild(removeButton);
                todoListElement.appendChild(trList);
            });
        };
        //作業中ボタンの生成function
        const createCheckButton = (todo) => {
            const tdBtn = document.createElement('td');
            const checkBtn = document.createElement('input');
            checkBtn.setAttribute('type', 'button');
            checkBtn.setAttribute('value', todo.status);
            checkBtn.addEventListener('click', () => {
                checkTodo(todo);
            });
            return checkBtn;
        };
        //削除ボタンの生成function
        const createRemoveButton = (index) => {
            const tdBtn = document.createElement('td');
            const removeBtn = document.createElement('input');
            removeBtn.setAttribute('type', 'button');
            removeBtn.setAttribute('value', '削除');
            removeBtn.addEventListener('click', () => {
                removeTodo(index);
            });
            return removeBtn;
        };
        //作業中を押す
        const checkTodo = (todo) =>{
            if(todo.status === "作業中"){
            todo.status = "完了";
            }else{
            todo.status = "作業中";
            };
            console.log(todo.status);
            displayResult(todoList);
        };
        //削除を押す
        const removeTodo = (index) =>{
            todoList.splice(index,1);
            displayResult(todoList);
        };
        //作業中リストアップ
        const doingRadio = document.getElementById('doing-select');
        doingRadio.addEventListener('click', () =>{
            const filterdTodoList = todoList.filter(todo => todo.status === "作業中");
            displayResult(filterdTodoList);
        });
　　　　//完了リストアップ
        const doneRadio = document.getElementById('done-select');
        doneRadio.addEventListener('click', () =>{
            const filterdTodoList = todoList.filter(todo => todo.status === "完了");
            displayResult(filterdTodoList);
        });
    </script>
</body>
</html>
```

### 試したこと
『作業中』『完了』のリスト作成は全体のリストとは別に配列を作ってfilterで絞り込んで格納しているのでindexをfilterdTodoListに引き渡してreturnで[index,todo.status === "作業中"]を返せばいいのではないかと思った。
→リスト細分化されずどのラジオボタンを押しても全体のリストが表示された。

プログラミング初心者で初歩的な質問で申し訳ありませんがぜひご回答いただければ幸いです。

JavaScript  配列番号表示について

Javascriptでtodoリスト作成の課題があり取り組んでおります。
タスクの追加ボタンを押すとID, 作業内容、進捗状況、削除ボタンが出るようにしております。
進捗状況の「作業中」ボタンは、押すと「完了」に表示が変わるようにしております。

![イメージ説明](d01a6caac54fd52db2daca0d2d646df8.jpeg)

２点、どうしても分からない事があります。
```html
<body>
  <h1>Todoリスト</h1>

  <div>
	<input type="radio" name="swich-display" id="radioAll" checked="checked">全て
	<input type="radio" name="swich-display" id="radioDoing">作業中
	<input type="radio" name="swich-display" id="radioComplete">完了
  </div>

  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>コメント</th>
        <th>状態</th>
        <th></th>
      </tr>
    </thead>
    <tbody id="todoList">
    </tbody>
  </table>

  <h2>新規タスクの追加</h2>
  <input type="text" id="inputContent">
  <button id="addButton">追加</button>

  <script src="kadai2.js"></script>
</body>
```
```JavaScript
  //＊＊＊＊＊　Dom開始　＊＊＊＊＊
  window.addEventListener('DOMContentLoaded', () => {

    //１．<iuput>タグを取得する
    const inputContent = document.getElementById('inputContent');

    //２．<tbody>タグを取得する
    const todoList = document.getElementById('todoList');

    const todos = [];

    //追加ボタンの要素を取得
    const addButton = document.getElementById('addButton');


    //＊＊＊＊＊　追加ボタンイベントを押す　＊＊＊＊＊
    addButton.addEventListener('click', () => {

      const id = todos.length;
      const comment = inputContent.value;
      let switchBtn = '作業中';
      const dlt = '削除';

      let task = {
        id,
        comment,
        switchBtn,
        dlt
      };

      todos.push(task);

      console.log(todos);


      //▲▲▲▲　tr エレメントを新規作成(ただ生成するだけ)　▲▲▲▲
      let tr = document.createElement('tr');
      tr.classList.add('addTr');

      //---- td idエレメントを新規作成 ----
      let td = document.createElement('td');
      //tdの中に入れたいモノをセット
      td.textContent = id;

      //生成したtdをtrにセット
      tr.appendChild(td);
      //---- td idエレメント終わり ----


      //---- td inputした内容を新規作成 ----
      td = document.createElement('td');
      //tdの中に入れたいモノをセット
      if (comment == '') {
        return false;
      } else {
        td.textContent = comment;
      }
      //生成したtdをtrにセット
      tr.appendChild(td);
      //---- td 入力した内容終わり ----


      //---- td 作業中ボタンを新規作成 ----
      td = document.createElement('td');
      td.classList.add('state');

      //ボタンをセット
      const btn = document.createElement('button');
      btn.textContent = (switchBtn);
      td.appendChild(btn);
      tr.appendChild(td);
      //---- td 作業中ボタン終わり ----


      //●●●●　作業中イベントボタン　●●●●
      btn.addEventListener('click', (e) => {

        switch (switchBtn) {
          case '作業中':
            switchBtn = '完了';
            btn.textContent = (switchBtn);
              if (task.switchBtn === '作業中') {
                task.switchBtn = '完了'
              }
            console.log(todos);
            break;
          case '完了':
            switchBtn = '作業中';
            btn.textContent = (switchBtn);
            if (task.switchBtn === '完了') {
              task.switchBtn = '作業中'
            }
            console.log(todos);
            break;
        }
      });
      //●●●●　作業中イベントボタン終わり　●●●●


      //---- td 削除を新規作成 ----
      td = document.createElement('td');
      const removeBtn = document.createElement('button');
      removeBtn.textContent = (dlt);
      td.appendChild(removeBtn);
      tr.appendChild(td);
      //---- td 削除ボタン終わり ----

      todoList.appendChild(tr);
      //▲▲▲▲　エレメントをtbody内に追加　▲▲▲▲


      //●●●●　削除イベントボタン　●●●●
      removeBtn.addEventListener('click', (e) => {
        const idx = Array.from(document.querySelectorAll('.remove button')).indexOf(e.target);
        console.log(idx);
        todos.splice(idx, 1);
        const element1 = e.target.closest('tr');
        element1.parentNode.removeChild(element1);
        console.log(todos);
      });
      //●●●●　削除イベントボタン終わり　●●●●



      // ラジオボタンの要素を取得
      const radioAll = document.getElementById('radioAll');
      const radioDoing = document.getElementById('radioDoing');
      const radioComplete = document.getElementById('radioComplete');
      //＊＊＊＊＊　ラジオボタンを押した時の関数を作る　＊＊＊＊＊

      radioAll.addEventListener('change', () => { //全て
      });

      radioDoing.addEventListener('change', () => { //作業中
        const progress = todos.filter(x => x.switchBtn === '作業中');
        console.log(progress);
      });

      radioComplete.addEventListener('change', () => { //完了
        const complete = todos.filter(x => x.switchBtn === '完了');
        console.log(complete);
      });
      //＊＊＊＊＊　ラジオボタン終わり　＊＊＊＊＊




    });
    //　＊＊＊＊＊　追加ボタン終わり　＊＊＊＊＊





    //＊＊＊＊＊　Dom終わり　＊＊＊＊＊
  });
```



【１】
ID番号の取得について、todos.lengthで取得しておりましたが、課題者曰く、これでは不可で、
forEachを使って取得するよう指示が出ております。
todos.forEach((index, value) => {
  console.log(index);
});
で、検証してみたものの、このインデックス値をどのようにして、オブジェクトリテラルの中に代入すれば良いかが分かりません。

【２】
ラジオボタンで作業中、完了を押すと、ソートが出来るようになるようにしたいのですが、
課題者曰く、forEachを使用して、HTMLに表示させる処理を追加するようにとの事です。


【１】、【２】共に、どのようにすれば良いか想像がつかず、大変お手数ですが、アドバイスを頂けると嬉しいです。

どうぞ宜しくお願い致します。

JavaScriptでのindex番号取得とフィルタリングについて

ラジオボタンを使ってcssのスタイルを表示・非表示をしたい

###質問の内容。
javaScriptでtodoListというものを作っています。
ラジオボタンには、すべて/作業中/完了の３つチェックボタンがあり、それぞれチェックするとそれに合った配列が表示される様な仕組みを作っています。チェックは１つしか選択できません。
### 発生している問題・エラーメッセージ
addEventListenerとif文で条件分岐しチェックされた項目がtrueの場合、チェックされてない配列をstyle.display="none"で非表示にし、falseの場合は同じ配列のstyle.display=""とし再表示されると思っていたのですが、一旦非表示になるとチェックを外しても非表示のまま戻らないです。


### 該当のソースコード　

```html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>todoアプリ</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <h1>ToDoリスト</h1>
  <form name="form1" id="checkedTask">
    <input type="radio" name="task" id="radio-all"  checked>すべて</input>
    <input type="radio" name="task" id="radio-work" >作業中</input>
    <input type="radio" name="task" id="radio-done"  >完了</input>
  </form>

  <div class="todolist">
    <p>ID コメント 状態</p>
    <ol start="0" id="task-list">
      

    </ol>
  </div>

  <div class="newtask">
    <h1>新規タスク追加</h1>
    <form id="form">
      <input type="text" id="new-task" value="">
      <button class="btn" type="button" id="btn">追加</button>
    <form>
  </div>



  <script src="js/main.js"></script>
</body>

</html>
```

```javascript

(function(){
  'use strict'
  var btn = document.getElementById('btn');
  var taskList = document.getElementById('task-list'); /*olタグ*/
  var tasks = [];
  var radioWork = document.getElementById('radio-work'); /*ラジオボタン作業中のid*/
  var radioDone = document.getElementById('radio-done'); /*ラジオボタン完了のid*/
  var radioAll = document.getElementById('radio-all');


  /*作業中ボタン作成処理*/
  var createWorkBtn = function(){
    var WorkBtn = document.createElement('button');
    var WorkText = document.createTextNode('作業中');
    WorkBtn.appendChild(WorkText);
    // 作業ボタン押下処理
    WorkBtn.addEventListener('click',function(){
      if(this.textContent == "作業中"){
        this.textContent = "完了";
        // 親要素へclassNameをつける処理
        var doneParent = this.parentNode;
        doneParent.className= 'workDone';/*完了class*/
      }else{
       this.textContent = "作業中";
       // ボタン押下で生成されたdomの中の親要素へclassNameをつける処理
       var workParent = this.parentNode;
       workParent.className = 'work';/*作業中class*/
      }
    })
    return WorkBtn;
  }

     // 削除ボタン作成処理
  var createDelBtn = function(){
    var delBtn = document.createElement('button');
    var delText = document.createTextNode('削除');
    delBtn.appendChild(delText);
    delBtn.id = 'delId';

    // 削除ボタン押下処理
    delBtn.addEventListener('click',function(){
      var li = this.parentNode;
      var result = confirm('タスクを削除しますか？');
      if(result){
        li.remove();
        alert('削除しました。');
        return;
      }else{
      return;
      }
    })
    return delBtn;
  }

       /*追加ボタン押下時処理 タスクを追加する*/
  btn.addEventListener('click',function(){
    var form = document.getElementById('form');
    var task = document.getElementById('new-task').value;
    if(task==""){
      alert("タスクを入力して下さい");
      return;
    }
    tasks.push(task); /*new-taskの値を配列tasksへpush */

    //liタグ作成処理
    var li = document.createElement('li');
    li.className = 'work';
    taskList.appendChild(li); /*taskList(olタグ)の子要素へ変数liを入れる*/

    for(var i = 0; i < tasks.length; i++ ){ /*i==配列のインデックス*/
      li.textContent = tasks[i] /*liタグの要素へ配列tasks[i]を代入*/
    }
    li.appendChild(createWorkBtn()); /*returnで帰ってきたworkBtn*/
    li.appendChild(createDelBtn());/*returnで帰ってきたDelBtn*/
  })
  

  /*ラジオボタン完了を押下時の処理*/

    radioDone.addEventListener('click',function(){
      var workTsks = document.getElementsByClassName('work');
      workTsks = Array.from(workTsks);

      if(radioDone.checked === true){
        workTsks.forEach(function(workTsks){
        workTsks.style.display = "none";
      })
      }else{
        workTsks.forEach(function(workTsks){
        workTsks.style.display = "";
        })
      }
    })


  // ラジオボタン作業中押下時処理

    radioWork.addEventListener('click',function(){
      var doneTsks = document.getElementsByClassName('workDone');
      doneTsks = Array.from(doneTsks);

      if(radioWork.checked === true){
        doneTsks.forEach(function(doneTsks){
        doneTsks.style.display = "none";
        })
      }else{
        doneTsks.forEach(function(doneTsks){
        doneTsks.style.display = "none";
        })
      }
    })

})();
```

### 試したこと
ググって２時間くらい調べましたが、上記のコードで表示/非表示を切り替わる内容の記事鹿見つけることが出来ませんでした。


### 補足情報（atom editor使用しています）

JavaScriptで、ラジオボタンを使ったCSSスタイルを表示・非表示に変えたい。

##質問の内容　[課題内容](https://github.com/manaberuit/javascript_practice2/blob/master/README.md)
javaScriptでtodoListを作っています。
ラジオボタンには、すべて/作業中/完了の３つチェックボタンがあり、それぞれチェックするとそれに合った配列が表示される様な仕組みを作っています。チェックは１つしか選択できません。

現在、以下のコードでは「ラジオボタンの作業中を押したときに完了が消え、ラジオボタンの完了を押したときに作業中が消えるという仕組み」を作ろうとしています。 

##試したこと
以下のコードの「button-done」「button-working」が間違っているというのは分かるのですが、どう書き換えればいいかが分かりりません。
```
      //フォーム
      document.getElementById('button-done').style.display = "";
      document.getElementById('button-working').style.display = "none";
    } else if (radio[1].checked) {
      //フォーム
      document.getElementById('button-done').style.display = "none";
      document.getElementById('button-working').style.display = "";
    }
```


以下、現在のコードです。


```
<!DOCTYPE html>
<html lang="ja">
​

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>ToDoリスト</title>
  <link rel="stylesheet" href="css/style.css">
  ​
</head>
​

<body>
  <h1>ToDoリスト</h1>
  ​
  <div class="radiobutton">
    <label for="button-1" ><input type="radio" id="button-1" name="radio1" value="1" checked="checked" />すべて</label>
    <label for="button-2"><input type="radio" id="button-done" name="radio1" value="2" onclick="entryChange1();" />完了中</label>
    <label for="button-3"><input type="radio" id="button-working" name="radio1" value="3" onclick="entryChange1();" />作業中</label>

    ​
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>コメント</th>
          <th>状態</th>
        </tr>
      </thead>
      <tbody id="idTbody">
      </tbody>
    </table>
    ​
    <h2>新規タスクの増加</h2>
    ​
    <p id=id_p>
      <input type="text" id="id_text" value="">
      <button id="btn" type="btn" class="button" value=""> 追加</button>
    </p>
  </div>
  ​
  <script src="js/main.js"></script>
</body>

</html>
```



```
'use strict'
let taskid = 0;
//イベントリスナ―を登録
const add_btn = document.getElementById('btn');
add_btn.addEventListener('click', () => {
  const id_td = document.createElement("td");
  id_td.textContent = taskid;
  const comment = document.getElementById("id_text").value;
  const commentEl = document.createElement("td");
  commentEl.textContent = (comment);


  const createWorkingBtn = function () {
    //作業中ボタンを生成する処理
    const workingBtn = document.createElement("button");
    workingBtn.textContent = "作業中";
    workingBtn.addEventListener('click', () => {
      console.log('表示を変更');
      if (workingBtn.textContent === "作業中") {
        workingBtn.textContent = "完了";
      } else {
        workingBtn.textContent = "作業中";
      }
    })
    //生成した作業中ボタンを返す処理
    return workingBtn;
  }
  const workingBtn = createWorkingBtn();


  const createDelBtn = function () {
    //削除ボタンを生成する処理
    const delBtn = document.createElement("button");
    delBtn.textContent = "削除";
    delBtn.addEventListener('click', () => {
      idTbody.removeChild(trEl);
    })
    //生成した削除ボタンを返す処理
    return delBtn;
  }
  const delBtn = createDelBtn()


  const trEl = document.createElement("tr");
  trEl.appendChild(id_td);
  trEl.appendChild(commentEl);
  trEl.appendChild(workingBtn);
  trEl.appendChild(delBtn);
  const todoEl = document.getElementById("idTbody");

  todoEl.appendChild(trEl);
  taskid++;
}, false); 

  /*ラジオボタン作業中、完了を押下時の処理*/
  function entryChange1() {
　　const radio = document.getElementsByName('radio1')
    if (radio[0].checked) {
      //フォーム
      document.getElementById('button-done').style.display = "";
      document.getElementById('button-working').style.display = "none";
    } else if (radio[1].checked) {
      //フォーム
      document.getElementById('button-done').style.display = "none";
      document.getElementById('button-working').style.display = "";
    }
  }

  //オンロードさせ、リロード時に選択を保持
  window.onload = entryChange1;


```

＃＃編集後のコード

```ここに言語を入力
<!DOCTYPE html>
<html lang="ja">
​

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>ToDoリスト</title>
  <link rel="stylesheet" href="css/style.css">
  ​
</head>
​

<body>
  <h1>ToDoリスト</h1>
  ​
  <div class="radiobutton">
    <input type="radio" id="filter-all" name="radio1" value="1" checked="checked" />
    <label for="filter-all">すべて</label>
    <input type="radio" id="filter-done" name="radio1" value="2" />
    <label for="filter-done">完了中</label>
    <input type="radio" id="filter-working" name="radio1" value="3" />
    <label for="filter-working">作業中</label>
    ​
    <table>
      <thead id>
        <tr>
          <th>ID</th>
          <th>コメント</th>
          <th>状態</th>
        </tr>
      </thead>
      <tbody id="idTbody">
      </tbody>
    </table>
    ​
    <h2>新規タスクの増加</h2>
    ​
    <p id=todo-form>
      <input type="text" id="todo-comment" value="">
      <button id="btn" type="btn" class="button" value=""> 追加</button>
    </p>
  </div>
  ​
  <script src="js/main.js"></script>
</body>

</html>
```　

```ここに言語を入力
'use strict'
let taskid = 0;
function entryChange() {
  radio = document.getElementsByName('radio1')
  //ラジオボタンの0（すべて）がチェックされたとき
  if (radio[0].checked) {
    document.getElementsByClassName('done').style.display = "";
    document.getElementsByClassName('doing').style.display = "";
    //ラジオボタンの1(完了）がチェックされたとき
  } else if (radio[1].checked) {
    //フォーム
    doing.forEach(done => {
      console.log(done);
      document.getElementsByClassName('done').styledisplay = "";
      document.getElementsByClassName('doing').style.display = "none";
    })
    //ラジオボタンの2(作業中）がチェックされたとき
  } else if (radio[2].checked) {
    //フォーム
    doing.forEach(work => {
      console.log(work);
      document.getElementsByClassName('done').style.display = "none";
      document.getElementsByClassName('doing').style.display = "";
    })
  }
}
//オンロードさせ、リロード時に選択を保持
window.onload = entryChange;

//イベントリスナ―を登録
const add_btn = document.getElementById('btn');
add_btn.addEventListener('click', () => {
  const id_td = document.createElement("td");
  id_td.textContent = taskid;
  const comment = document.getElementById("todo-comment").value;
  const commentEl = document.createElement("td");
  commentEl.textContent = (comment);

  const createWorkingBtn = function () {
    //作業中ボタンを生成する処理
    const workingBtn = document.createElement("button");
    workingBtn.classList.add("doing");
    workingBtn.textContent = "作業中";
    workingBtn.addEventListener('click', () => {
      console.log('表示を変更');
      if (workingBtn.textContent === "作業中") {
        workingBtn.classList.add("doing");
        workingBtn.textContent = "完了";
        // ボタン押下で生成されたdomの中の親要素へclassNameをつける処理
        const doneParent = workingBtn.parentNode;
        doneParent.className = 'workDone';
      } else {
        workingBtn.classList.add("done");
        workingBtn.textContent = "作業中";
        // ボタン押下で生成されたdomの中の親要素へclassNameをつける処理
        const workParent = this.parentNode;
        workParent.className = 'work';
      }
    })
    //生成した作業中ボタンを返す処理
    return workingBtn;
  }
  const workingBtn = createWorkingBtn();


  const createDelBtn = function () {
    //削除ボタンを生成する処理
    const delBtn = document.createElement("button");
    delBtn.textContent = "削除";
    delBtn.addEventListener('click', () => {
      idTbody.removeChild(trEl);
    })
    //生成した削除ボタンを返す処理
    return delBtn;
  }
  const delBtn = createDelBtn()

  const trEl = document.createElement("tr");
  trEl.appendChild(id_td);
  trEl.appendChild(commentEl);
  trEl.appendChild(workingBtn);
  trEl.appendChild(delBtn);
  const todoEl = document.getElementById("idTbody");

  todoEl.appendChild(trEl);
  taskid++;

}, false); 
```