Question

我尝试从JavaScript文件调用函数来定义项目的基本价格。

例如，如果您尝试购买500个积分，它会调用一个名为“getPrice（）”的函数，如下所示：

<div class="panelButton">
        <div class="header">Credits: 500</div>
        <div class="body">
            <p>Buy Credits 500 / <script type='text/javascript' src="scripts/price.js">getPrice(500);</script>€</p>
        </div>
    </div>

如果一个积分的基本价格为0.01欧元，它将显示从.js文件中购买500积分的正确金额。这是.js文件：

var baseCreditPrice = 0.05;
function getPrice(factor) {
    return baseCreditPrice * factor;
}

怎么叫？因为文本根本不会改变。如果我使用getPrice（500）;它会使文本显示一个0.05 * 500的数字。

Answer 1

您可以使用类似https://jsfiddle.net/5kccepc0/1/

的内容

HTML

<div class="panelButton">
    <div class="header">Credits: 500</div>
    <div class="body">
        <p data-amount="500"></p>
    </div>
</div>

JS

$(document).ready(function(){
    var baseCreditPrice = 0.05;
    $("p").each(function() {
        $(this).html("Buy Credit " + $(this).data("amount") + "/" + $(this).data("amount") * baseCreditPrice + "€");
    });
});

但如果可能的话，最好在服务器上进行评估。

Answer 2

这应该是您尝试完成的一个实例

你只需要在函数中操纵你的Dom。

您的脚本文件如下：

var baseCreditPrice = 0.05;
function getPrice(factor) {
    var credits=document.getElementById("credits");
    console.log(credits);
    credits.innerHTML =baseCreditPrice * factor;
}

并在您的html文件中添加脚本标记

<html>
<head>
<script type="text/javascript" src="./js/yourScript.js"></script>
</head>
<body>
<div class="panelButton" >
    <div class="header">Credits: 500</div>
    <div class="body">
        <p>Buy Credits 500 / <span id="credits">
            <script>
                getPrice(1000)
            </script></span>
        </p>
    </div>
</div>
</body>
</html>

如果您想支持多个按钮，只需插入要编辑的类的ID

你的JS

var baseCreditPrice = 0.05;
function getPrice(factor,id) {
    var credits=document.getElementById(id);
    console.log(credits);
    var price = baseCreditPrice * factor;
    price = price.toFixed(2);
    credits.innerHTML =price
}

您的HTML：

<html>
<head>
<script type="text/javascript" src="./js/yourScript.js"></script>
</head>
<body>
<div class="panelButton" >
    <div class="header">Credits: 500</div>
    <div class="body">
        <p>Buy Credits 500 / <span id="credits1">
            <script>
                getPrice(1000,"credits1")
            </script></span>
        </p>
        <p>Buy Credits 500 / <span id="credits2">
            <script>
                getPrice(3000,"credits2")
            </script></span>
        </p>
        <p>Buy Credits 500 / <span id="credits3">
            <script>
                getPrice(4000,"credits3")
            </script></span>
        </p>
    </div>
</div>
</body>
</html>

Answer 3

正如我之前所说，我不确定你的完整用例是什么，但我已经测试了以下内容，它可以满足您的需求。但是，我假设您将在页面上多次执行此操作，并仍然强烈建议AngulaJS这类事情。它只是让它变得如此简单！

HTML

<!DOCTYPE html>
<html>
    <head>
    <title>Test Credits</title>
    </head>
    <body onload="setPrice()">
        <div class="panelButton">
            <div class="header">Credits: 500</div>
                <div class="body">
                    <p id="buyCred"></p>
                </div>
            </div>
        </div>
    </body>
</html>

的JavaScript

var baseCreditPrice = 0.05;

function getPrice(factor) {
    return baseCreditPrice * factor;
}

function setPrice() {

    var dom = document.getElementById('buyCred');
    dom.innerHTML = 'Buy Credits 500 / ' + getPrice(500) + '€';

}

通过将onload置于正文中，它会启动setPrice()函数，该函数将定位ID为<p>的{{1}}标记，并将其值设置为期望的buyCred结果。

<--JSbin-->

Answer 4

您无法将JS文件中的数据或值传递到HTML中。你必须使用document.write已经像takethefake answered这样做了。如果您不想在HTML文件中编写函数，只需在script中添加head标记并加载JS文件

<html>
    <head>
        <script type="text/javascript" src="scripts/price.js"></script>
    </head>
    <body>
        <div class="panelButton">
            <div class="header">Credits: 500</div>
            <div class="body">
                <p>Buy Credits 500 /
                    <script>
                        document.write(getPrice(500));
                    </script>
                </p>
            </div>
        </div>
    </body>
</html>

从JavaScript文件的函数中获取一个数字到HTML

4 个答案: