jQuery 输入转换器？

Question

简单的 PPC 投资回报率计算器。我需要输入 4 个变量并让它们在前端进行转换。我是 Javascript 的新手，需要一些帮助。

我需要弄清楚如何使 html 中 span 区域的输入框自动更新。我知道我需要围绕每个 getElementByID 脚本的功能，但我不知道从哪里开始或如何开始。我在网上找不到其他任何东西。

数学应该是正确的，但在您输入 4 个框后在下面更新它是很棘手的。任何人都可以为学习者提供帮助吗？我能够按原样从头开始创建所有这些，所以至少我不是一个完整的菜鸟，对吧？ ...对吗？

<script>

    var // variables
        clicks_purchased = $('#clicks_purchased').val(),
        cost_per_click = $('#cost_per_click').val(),
        rate = $('#rate').val(),
        conversion = clicks_purchased * rate,
        avg_purchase = $('#avg_purchase').val(),
        // calculations
        total = clicks_purchased * cost_per_click,
        responders = clicks_purchased,
        buyers = conversion * clicks_purchased,
        revenue = buyers * avg_purchase,
        profit = revenue - total,
        cost_per_responder = cost_per_click,
        cost_per_buyer = cost_per_click / conversion;

    document.getElementById("total").innerHTML = total;
    document.getElementById("responders").innerHTML = responders;
    document.getElementById("buyers").innerHTML = buyers;
    document.getElementById("revenue").innerHTML = revenue;
    document.getElementById("profit").innerHTML = profit;
    document.getElementById("cost_per_responder").innerHTML = cost_per_responder;
    document.getElementById("cost_per_buyer").innerHTML = cost_per_buyer;

</script>

<div class="row">
    <div class="small-12 columns">
        <div class="calculator">
            <input id="clicks_purchased" type="text" placeholder="Number">
            <input id="cost_per_click" type="text" placeholder="Dollar">
            <input id="rate" type="text" placeholder="Percentage">
            <input id="avg_purchase" type="text" placeholder="Dollar">
        </div>
    </div>
    <div class="small-12 columns">
        <div class="results">
            <h1>Expected Results:</h1>
            <div>
                Total: <span id="total"></span>
            </div>
            <div>
                Responders: <span id="responders"></span>
            </div>
            <div>
                Buyers: <span id="buyers"></span>
            </div>
            <div>
                Revenue: <span id="revenue"></span>
            </div>
            <div>
                Profit: <span id="profit"></span>
            </div>
            <div>
                Cost per Responder: <span id="cost_per_responder"></span>
            </div>
            <div>
                Cost per Buyer: <span id="cost_per_buyer"></span>
            </div>
        </div>
    </div>
</div>

Answer 1

创建一个函数，并在用户离开文本框（模糊时）时调用该函数

function computeROI(){
    var clicks_purchased = $('#clicks_purchased').val(),
        cost_per_click = $('#cost_per_click').val(),
        rate = $('#rate').val(),
        conversion = clicks_purchased * rate,
        avg_purchase = $('#avg_purchase').val(),
        // calculations
        total = clicks_purchased * cost_per_click,
        responders = clicks_purchased,
        buyers = conversion * clicks_purchased,
        revenue = buyers * avg_purchase,
        profit = revenue - total,
        cost_per_responder = cost_per_click,
        cost_per_buyer = cost_per_click / conversion;

    $("#total").html(total);
    $("#responders").html(responders);
    $("#buyers").html(buyers);
    $("#revenue").html(revenue);
    $("#profit").html(profit);
    $("#cost_per_responder").html(cost_per_responder);
    $("#cost_per_buyer").html(cost_per_buyer);
};

$('input').on('blur', computeROI);

https://jsfiddle.net/7daffjh8/15/

Answer 2

一旦输入更改，您将需要让 Javascript 执行。要使用 jQuery 执行此操作，您需要将每个输入元素绑定到一个 change 事件。您还需要将发布在函数中的 JS 代码包装起来，如下所示：

function calculate() {
    var // variables
        clicks_purchased = $('#clicks_purchased').val(),
    //...etc
}
// On DOM ready
$(function() {
    $('input').on('change', function() {
        // Do this for each element
        calculate();
    });
});

这是一个工作示例：http://jsfiddle.net/bcfL25o3/。

jQuery 输入转换器？

jQuery input converter?

html

jquery

converter