Get a number from JavaScript file's function to HTML

Question

I tried to call a function from JavaScript file to define a base price for an item.

For example, if you try to buy 500 Credits, it will call a function called "getPrice()" like this:

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

If the base price for one credit is like 0.01€, it will display the correct amount for buying 500 Credits from the .js file. This is the .js file:

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

How is that called? Because the text won't change at all. If I use getPrice(500); it will make the text display a number that is 0.05 * 500.

Okay, I get what you are trying to do here. Funny thing is, your script is running, you just haven't targeted anything for the return value to show up on. For things like this I would highly recommend looking into AngularJS if you want to write things up in this manner. Otherwise, you could achieve this by giving a target to your script <p> tag and having the code run on page load. I don't know to the extent of what you want this code to be (i.e. will you have more of these <p> on one page? But I will create a quick example of what I mean. — xxSithRagexx
– xxSithRagexx, Commented Jan 28, 2017 at 22:31
I have no idea how to use AngularJS, can I have an example as you said? And I do have more <p>'s later but not in the same "section". — Timppa
– Timppa, Commented Jan 28, 2017 at 22:42

zelenyjan · Accepted Answer · 2017-01-28 22:43:07Z

1

You can use something like this 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 + "€");
    });
});

But it might be better to do the evaluation on server if it's possible.

answered Jan 28, 2017 at 22:43

zelenyjan

7036 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

takethefake · Accepted Answer · 2017-01-29 00:06:32Z

0

this should be a working example of what you're trying to accomplish

you simply needed to manipulate your Dom in the function.

your script file would be the following:

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

and in your html file you add it with the script tag

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

if you want to support multiple Buttons just insert the id of the class you want to edit

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

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

edited Jan 29, 2017 at 0:06

answered Jan 28, 2017 at 22:27

takethefake

8051 gold badge10 silver badges21 bronze badges

9 Comments

takethefake Over a year ago

for what did I received the down vote? This is a working example which features full expectations without adding unnecessary Boilerplate-Code

Timppa Over a year ago

I don't know why you got a downvote. I don't want that javascript to be in my HTML file, I could do this easily. I want it to be inside the javascript file and call from it. Is that possible? EDIT: And some people said that document.write is bad

takethefake Over a year ago

better practice should be to manipulate your Dom from the function, like I did with the current edit. You can always get your function from a different file with: <script type="text/javascript" src="js/credits"></script> in the head

Timppa Over a year ago

Okay now as I added more buy buttons (you can buy 500, 1000, 1500 etc), the first text will add up to the sum of each 3 buttons (or texts). So how do I set this value for each components?

takethefake Over a year ago

could you please refine this with your current working example in a fiddle or so?

|

Community · Accepted Answer · 2017-05-23 12:24:14Z

0

You can't pass data or values form JS files into HTML. You have to do it with document.write like takethefake already answered. If you don't want to write your function in the HTML file, you just have to add a script tag into the head and load your JS file

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

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Jan 28, 2017 at 22:43

NonPolynomial

3192 silver badges6 bronze badges

Comments

xxSithRagexx · Accepted Answer · 2017-01-28 22:53:36Z

As I stated before, I am not sure what your full use case is, but I have tested the following and it does what you wanted. However, I am assuming you will be doing this multiple times on the page and still highly recommend AngulaJS for this sort of thing. It just makes it so easy!

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) + '€';

}

By placing the onload into the body, it will launch the function setPrice() which will target the <p> tag with the id of buyCred and set its value to your desired getPrice() result.

<--JSbin-->

Collectives™ on Stack Overflow

Get a number from JavaScript file's function to HTML

4 Answers 4

Comments

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related