LoginSignup
0
0

More than 5 years have passed since last update.

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

Posted at

目的

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を書いたので稚拙なコードですが
アドバイスいただけると嬉しいです

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0