如何让HTML中的JavaScript正常工作？_Javascript_Html_Function_Switch Statement

如何让HTML中的JavaScript正常工作？

javascript html function

如何让HTML中的JavaScript正常工作？,javascript,html,function,switch-statement,Javascript,Html,Function,Switch Statement,我是javaScript新手，我正在尝试在我在HTML文件中创建的按钮点击上运行一个函数。我希望函数将值返回到html文件中的段落标记现在，这是我第一次尝试这个，我不知道如何将参数从文本框传递到脚本的函数中，并将值打印到段落标记。有人能告诉我怎么做吗谢谢 <script> var calculateTotalCosts = function(salary,numWorkers,city) { fixedCosts = 5000; varia

我是javaScript新手，我正在尝试在我在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>


var calculateTotalCosts=函数（工资、员工人数、城市）
{
固定成本=5000；
可变成本=工资*员工人数；
交换机（城市）
{
案件“BEJ”：
租金=25000；
打破
案例“纽约”：
租金=30000；
打破
违约：
租金=10000；
打破
}
归还租金+可变成本+固定成本；
};
薪金：
工人人数：
城市：

算计

您可以获取元素值并在函数中计算它们，然后将其传递到pHTML元素中

 <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>


函数CalculateCosts（）{
var costsVal=document.getElementById（“成本”）.value；
var workersVal=document.getElementById（“workers”）.value；
var cityVal=document.getElementById（“城市”）.value；
计算总成本（成本、工人价值、城市价值）；
}
var calculateTotalCosts=函数（costsVal、workersVal、cityVal）{
var variableCosts=成本VAL*workersVal；
var租金；
开关（城市风）{
案件“BEJ”：
租金=25000；
打破
案例“纽约”：
租金=30000；
打破
违约：
租金=10000；
打破
}
//归还租金+可变成本+固定成本；
document.getElementById（“displayCost”）.innerHTML=租金+可变成本；
};
薪金：
工人人数：
城市：


算计

您可以获取元素值并在函数中计算它们，然后将其传递到pHTML元素中

 <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>


函数CalculateCosts（）{
var costsVal=document.getElementById（“成本”）.value；
var workersVal=document.getElementById（“workers”）.value；
var cityVal=document.getElementById（“城市”）.value；
计算总成本（成本、工人价值、城市价值）；
}
var calculateTotalCosts=函数（costsVal、workersVal、cityVal）{
var variableCosts=成本VAL*workersVal；
var租金；
开关（城市风）{
案件“BEJ”：
租金=25000；
打破
案例“纽约”：
租金=30000；
打破
违约：
租金=10000；
打破
}
//归还租金+可变成本+固定成本；
document.getElementById（“displayCost”）.innerHTML=租金+可变成本；
};
薪金：
工人人数：
城市：


算计

您必须提供输入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>


函数calculateTotalCosts（）
{
input_text=document.getElementsByTagName（“输入”）；
工资=输入[0]；
numWorkers=输入[1]；
城市=输入[2]；
固定成本=5000；
可变成本=工资*员工人数；
国际城市=0；
如果（城市==“BEJ”）{intCity=0；}
如果（城市==“纽约市”）{intCIty=1；}
交换机（国际城市）
{
案例0：
租金=25000；
打破
案例1：
租金=30000；
打破
违约：
租金=10000；
打破
}
结果=租金+可变成本+固定成本；
document.getElementById（“displayCost”）.innerHtml=结果；
}

或者使用id进行输入，这样您就可以确定选择的是哪种输入。

您必须给出输入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>


函数calculateTotalCosts（）
{
input_text=document.getElementsByTagName（“输入”）；
工资=输入[0]；
numWorkers=输入[1]；
城市=输入[2]；
固定成本=5000；
可变成本=工资*员工人数；
国际城市=0；
如果（城市==“BEJ”）{intCity=0；}
如果（城市==“纽约市”）{intCIty=1；}
交换机（国际城市）
{
案例0：
租金=25000；
打破
案例1：
租金=30000；
打破
违约：
租金=10000；
打破
}
结果=租金+可变成本+固定成本；
document.getElementById（“displayCost”）.innerHtml=结果；
}

或者对输入使用ID，这样您就可以确定选择的是哪个输入。

您需要在单击回调中选择输入元素的值。你应该用JavaScript而不是HTML来设置事件，就像在.CSS文件中保存CSS而不是在HTML中内联一样。@zzzzBov嘿，我明白了。我会在单独的文件中完成，但这是一个博客，我只得到一个HTML文件。@Downvoter-这是一个完美的问题。user123已经展示了对HTML和JavaScript的理解，现在想学习如何将它们结合起来进行DOM操作。提供了一段非常简洁易读的代码片段。解释既不长也不短。“你试过什么”的问题已经回答了。问题是什么？您需要选择输入元素的值作为单击回调的一部分。你应该用JavaScript而不是HTML来设置事件，就像在.CSS文件中保存CSS而不是在HTML中内联一样。@zzzzBov嘿，我明白了。我会在单独的文件中完成，但这是一个博客，我只得到一个HTML文件。@Downvoter-这是一个完美的问题。user123已经展示了对HTML和JavaScript的理解