1

HTMLファイル内で作成したボタンクリックで実行する関数を取得しようとしています。関数が html ファイルの段落タグに値を返すようにします。

今、これを試すのは初めてです。テキストボックスからスクリプトの関数にパラメーターを渡し、値を段落タグに出力する方法がわかりません。誰か教えてください。

ありがとう

<script>
var calculateTotalCosts = function(salary,numWorkers,city)
    {
        fixedCosts = 5000;
        variableCosts = salary*numWorkers;
        switch(city)
        {
            case "BEJ":
                rent = 25000;
                break;
            case "NYC":
                rent = 30000;
                break;
            default:
                rent = 10000;
                break;
        }
        return rent + variableCosts + fixedCosts;
    };
</script>
Salary: <input type="text" value="Costs" />
No. Workers: <input type="text" value="Num of Workers" />
City: <input type="text" value="City" /><br />
<button onclick="calculateTotalCosts()"type="button">Calculate</button>
<p id="displayCost"></p>
4

2 に答える 2

1

要素の値を取得して関数で計算し、p html elemnet に渡すことができます

 <script>

    function CalculateCosts() {
        var costsVal = document.getElementById("costs").value;
        var workersVal = document.getElementById("workers").value;
        var cityVal = document.getElementById("city").value;
        calculateTotalCosts(costsVal, workersVal, cityVal);
    }

    var calculateTotalCosts = function (costsVal, workersVal, cityVal) {

        var variableCosts = costsVal * workersVal;
        var rent;
        switch (cityVal) {
        case "BEJ":
            rent = 25000;
            break;
        case "NYC":
            rent = 30000;
            break;
        default:
            rent = 10000;
            break;
        }
        //return rent + variableCosts + fixedCosts;
        document.getElementById("displayCost").innerHTML = rent + variableCosts;
    };

</script>
Salary:
<input id="costs" type="text" placeholder="Costs" />
No. Workers:
<input id="workers" type="text" placeholder="Num of Workers" />
City:
<input id="city" type="text" placeholder="City" /><br />
<button onclick="CalculateCosts()" type="button">
    Calculate</button>
<p id="displayCost">
</p>
于 2013-03-29T21:11:45.327 に答える
0

入力にIDを与えるか、どの入力が何を指しているかを知る必要があります。下記参照： 

 <script>
  function calculateTotalCosts()
     {
        input_text = document.getElementsByTagName("input");
        salary = input[0];
        numWorkers = input[1];
        city = input[2];

        fixedCosts = 5000;
        variableCosts = salary*numWorkers;
        intcity = 0;
        if (city == "BEJ") { intCity = 0;}
        if (city == "NYC") { intCIty = 1;}
        switch(intCity)
        {
            case 0:
               rent = 25000;
               break;
            case 1:
               rent = 30000;
               break;
            default:
               rent = 10000;
               break;
    }
    result = rent + variableCosts + fixedCosts;
    document.getElementById("displayCost").innerHtml = result;
}
</script>

または入力にIDを使用すると、選択している入力を確認できます。

于 2013-03-29T21:12:55.177 に答える