More than 5 years have passed since last update.

グローバル変数の取得について（取れたり取れなかったり）

Posted at 2018-01-16

##目的
csvから取得した値を基に計算するプログラム
一応送料計算のフォームを目指してます。

##csv
商品名,商品コード,商品の重さ
こんな感じのcsvです

ex
コカ・コーラ,co-21,2
ペプシ,pe-21,3

##ソース

soryo.html

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>送料計算</title>
<script src="jquery-1.10.2.min.js"></script>
</head>
<style>
form{
	width:auto;
	background-color:white;
	border:2px solid black;
	margin:0 auto;
	padding:3%;
	}

.skuf{
	width:30%;
	float:left;
	margin:0 10px;
	}
	
.quantityf{
	width:30%;
	float:left;
	margin:0 10px;
	}
	
.address{
	width:30%;
	float:left;
	margin:0 10px;
	}

.submit{
	width:30%;
	margin:5px;
	}

h2{
	font-size:18px;
	margin-bottom:5px;
	}
	
input{
	width:100%;
	padding:8px 0;
	margin-bottom:1%;
	}

select{
	width:100%;
	padding:8px 0;
	margin-bottom:1%;
	}

</style>

<script type="text/javascript">

//CSV読み込んで配列に入れるスクリプト
window.onload = function loadcsv(){
	$.ajax({
		//読み込むcsv
		url:'data.csv',
		//読み込むファイルの形式
		dataType:'text',
		//shift-jisを読み込むため
		beforeSend: function(myData){myData .overrideMimeType("text/html;charset=Shift_JIS");
		},//読み込み成功時の行動
		success: function(data){
			//改行ごとに区切って
			var tempArray = data.split("\n");
			csvArray = new Array();
			//カンマごとに区切る
			for(var i = 0; i<tempArray.length;i++){
    			csvArray[i] = tempArray[i].split(",");
				}
		}
	})
}



//送料計算スクリプト
function keisan(){
	//SKU取得
	var sku = document.form.sku.value;
	
	//数量
	var qua = document.form.quantity.value;
	
	//都道府県
	var add = document.form.address.value;
	
	
	
	//重量取得スクリプト
	var juryo = csvArray.filter(function(item, index){
		if (item[1] == sku){
			juryoget = item[2];
			}
		});
		
	//重量と数量を掛けた物
	var soryo = juryoget * qua;
	
	document.form.result.value = soryo;
}
</script>
<body>
	<form name="form">
    	<h1>送料検索フォーム</h1>
        <!--SKU入力-->
        <div class="skuf">
            <h2>商品のSKU</h2>
            <input type="text" name="sku">
        </div>
        <!--数量入力-->
        <div class="quantityf">
            <h2>購入する数量</h2>
            <input type="text" name="quantity">
        </div>
        
        <!--都道府県入力-->
        <div class="address">
            <h2>お住まいの都道府県</h2>
            <select name="address" size="1">
                <option value="">未選択</option>
                <option value="1">北海道</option>
                <option value="2">青森</option>
                <option value="2">岩手</option>
                <option value="2">宮城</option>
                <option value="2">秋田</option>
                <option value="2">山形</option>
                <option value="2">福島</option>
                <option value="3">茨城</option>
                <option value="3">栃木</option>
                <option value="3">群馬</option>
                <option value="3">埼玉</option>
                <option value="3">千葉</option>
                <option value="3">東京</option>
                <option value="3">神奈川</option>
                <option value="3">新潟</option>
                <option value="3">富山</option>
                <option value="3">石川</option>
                <option value="3">福井</option>
                <option value="3">山梨</option>
                <option value="3">長野</option>
                <option value="3">岐阜</option>
                <option value="3">静岡</option>
                <option value="3">愛知</option>
                <option value="3">三重</option>
                <option value="4">滋賀</option>
                <option value="4">京都</option>
                <option value="4">大阪</option>
                <option value="4">兵庫</option>
                <option value="4">奈良</option>
                <option value="4">和歌山</option>
                <option value="3">鳥取</option>
                <option value="3">島根</option>
                <option value="3">岡山</option>
                <option value="3">広島</option>
                <option value="3">山口</option>
                <option value="3">徳島</option>
                <option value="3">香川</option>
                <option value="3">愛媛</option>
                <option value="3">高知</option>
                <option value="5">福岡</option>
                <option value="5">佐賀</option>
                <option value="5">長崎</option>
                <option value="5">熊本</option>
                <option value="5">大分</option>
                <option value="5">宮崎</option>
                <option value="5">鹿児島</option>
                <option value="6">沖縄</option>
            </select>
        </div>
        
        <!--送信ボタン-->
        <input type="button" class="submit" value="計算する" onClick="keisan();">
        
        <!--結果-->
        <input type="text" name="result" size="8" value="0"> 
    </form>
</body>
</html>

##問題点
これを実行するとjuryogetが取得できる時とできないときがあります。

今回初めてjavascriptを書いたので稚拙なコードですが
アドバイスいただけると嬉しいです

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up