Javascript: 入力したデータを種類毎のページに反映されるようにしたい。
Q&A
はじめまして、初めて質問させて頂きます、よろしくお願い致します。
現在、JavascriptでTodoリストを元にオーダーリスト（買い物リスト）を作成しています。
リストの追加と削除は出来るようになったのですが、リストを入力し終え、confirmボタンを押すと種類毎にそれぞれのページにリストが反映されるようにしたいと思っています。
（うまく説明ができないので図を添付致しますが、伝わるでしょうか？）
色々調べていますが、locationというのを使うという所までは分かったのですが、それを使っても特にエラーも出ず動作もしません。恥ずかしながら知識がなく、どうすればやりたいと思っている事が実現できるかが分かりません。
お時間を取らせて申し訳ないのですが、もしどなたか何かいい方法をご存じでしたら教えて頂ければ大変有難いです。
どうぞよろしくお願いします。
以下は作成したJavascriptのcodeになります。
'use strict';
{
const tBody = document.querySelector('tbody');
const addBtn = document.getElementById('add-btn');
// ボタンを押したときのイベントとサプライヤーを選ぶ
addBtn.addEventListener('click', e => {
e.preventDefault();
const tr = document.createElement('tr');
const supplier = document.createElement('td');
const select = document.getElementById('select');
supplier.textContent = `${select.value}`;
tr.appendChild(supplier);
// 商品コード入力
const product = document.createElement('td');
const codeInput = document.getElementById('code-input');
product.textContent = `${codeInput.value}`;
tr.appendChild(product);
codeInput.value = '';
codeInput.focus();
// オーダー数を入力
const quantity = document.createElement('td');
const qtnInput = document.getElementById('qtn-input');
quantity.textContent = `${qtnInput.value}`;
tr.appendChild(quantity);
qtnInput.value = '';
qtnInput.focus();
// デリートボタンを作成
const delBtn = document.createElement('td');
const createDelete = document.createElement('button');
createDelete.textContent = 'Del';
delBtn.appendChild(createDelete);
tr.appendChild(delBtn);
tBody.appendChild(tr);
// 選んだ商品のデリートをする
delBtn.addEventListener('click', () => {
tr.removeChild(supplier);
tr.removeChild( product);
tr.removeChild(quantity);
tr.removeChild(delBtn);
});
});
const confirmBtn = document.getElementById('confirm-btn');
confirmBtn.addEventListener('click', () => {
const select = document.getElementById('select');
if(select.value === 'Prokiwi') {
window.location= 'index-prokiwi.html';
} else if(select.value === 'Hallifax') {
window.location= 'index-hallifax.html';
} else if(select.value === 'Derek') {
window.location= 'index-derek.html';
} else if(select.value === 'Parrs') {
window.location= 'index-parrs.html';
} else {
window.location= 'index-others.html';
}
});
}
こちらはHTMLのcodeです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Plactice</title>
<link rel="stylesheet" href="ordersystem-stylesheet.css">
</head>
<body>
<div class="container">
<h1>Order System</h1>
<div class="order-container">
<table id="table1">
<thead>
<tr>
<th width="200">Supplier</th>
<th width="350">Product</th>
<th width="100">Quantity</th>
<th width="60">Del</th>
<!-- <th width="60">Update</th> -->
</tr>
</thead>
<form method = post action ="#">
<tbody>
<tr>
<td>
<select class="supplier" id="select" name="supplier">
<option>Prokiwi</option>
<option>Hallifax</option>
<option>Derek</option>
<option>Parrs</option>
</select>
</td>
<td class="product"><input type="text" id="code-input"></td>
<td class="quantity"><input type="text" id="qtn-input"></td>
<td id="del" type="button"></td>
<!-- <td id="updatebtn" type="button"></td> -->
<td width="60"><button id="add-btn">Add</button></td>
</tr>
</tbody>
</form>
</table>
</div>
<div class="confirm-button">
<div id="confirm-btn">Confirm</div>
</div>
</div>
<script src="ordersystem-main.js"></script>
</body>
</html>
0
