如何让 HTML 中的 JavaScript 工作？答案

【问题标题】：How to get JavaScript within HTML to work?如何让 HTML 中的 JavaScript 工作？
【发布时间】：2013-03-29 21:03:28
【问题描述】：

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

【问题讨论】：

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

标签： javascript html function switch-statement

【解决方案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>

【讨论】：

或者你可以使用jquery：$('#displayCost').html(rent + variableCosts);
这太棒了，它有效:)。只有一个问题，所以没有直接的方法将参数传递给函数吗？我们必须这样做吗？
我编辑了答案。所以函数将接受外部参数。在这种情况下，您可以编写中间函数来收集参数并将它们传递给您的原始函数。

【解决方案2】：

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

或使用 ids 作为输入，这样您就可以确定您选择的是哪个输入。

【讨论】：