やりたいこと
一次元配列からselectの選択肢を動的に作成
中身
selectにondblclickクリックで、optionをselectに追加
See the Pen
createselect by Hirofumi Sato (@hfmst)
on CodePen.
コード
index.html
<select id="test" ondblclick="create_op()"></select>
js.html
function create_op(){
let arr = ["赤","青","緑","黒","白"]; //適当な配列用意
let sl = document.getElementById('test'); //対象のselect取得
if(sl.length<arr.length){ //selectが空の時のみ関数実行
for(let num in arr){ //arrの要素数を0から順にnumに入れて繰り返し処理
let op = document.createElement('option'); //optionを新しく毎回作る
op.text = arr[num]; //optionのテキストに配列[num番目]の値を入れる
sl.appendChild(op); //optionをselectに追加
}
}
}
React app(ポートフォリオサイト)をやっとデプロイできた
最終的に成功した時に参考にしたサイト
試した中でこのページ以外のやり方だと、なぜかエラーが出てデプロイできなかった。
エラーメッセージ
npm ERR! missing script: build
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kakizakimanato/.npm/_logs/2021-06-07T14_05_58_985Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio@0.1.0 deploy: `npm run build && gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kakizakimanato/.npm/_logs/2021-06-07T14_05_59_032Z-debug.log
kakizakimanato@kakiMacBook-Air portfolio % npm run deploy
> portfolio@0.1.0 deploy /Users/kakizakimanato/deploy/portfolio
> npm run build && gh-pages -d build
npm ERR! missing script: build
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kakizakimanato/.npm/_logs/2021-06-07T14_06_57_636Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portfolio@0.1.0 deploy: `npm run build && gh-pages -d build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portfolio@0.1.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/kakizakimanato/.npm/_logs/2021-06-07T14_06_57_690Z-debug.log
まだ自分がデプロイできるかわからない時は、ファイルをコピーしてデプロイテスト用のディレクトリ内で試すといいかもしれません
(色々な方法試しているうちにpackage.jsonファイルなどぐちゃぐちゃになります...)
少し追加でやらないといけないこと
GitHubのアカウント情報を紐付ける
$ git remote add origin https://github.com/<GitHubアカウント名>/<GitHubリポジトリ名>.git
を実行する前に、GitHubアカウントの情報を設定する必要があった
$ git config --global user.name "[githubユーザー名]"
$ git config --global user.email "[githubで使用しているメールアドレス]"
これでgit remote add originができる
GitHub Pagesの設定
ソースブランチをmasterに設定し、rootファイルをdocsに変更し、["Save"]をクリック
数分待ってURLをクリックすると、成功していればWebサイトが見られるはず
次はファイルを編集後、再デプロイできるようになりたい
