Question

I just can't seem to wrap my head around why this will not update what is displayed in the output. I've made a jsfiddle for anyone to look at.

http://jsfiddle.net/sQrn7/

and here's the code:

function getPrices(basePrice){
    var dogeValue = 0.005343614; //When changed the output should change.
    var postage = 0.49/dogeValue;
    var sellAmount = (basePrice/dogeValue - postage) - (basePrice*0.1/dogeValue);
    rounded = Math.round(sellAmount);
    document.getElementById("txt").innerHTML = rounded;
}
var timer = setInterval(function() { getPrices(10) }, 1000);

Original/complete code:

<html>
<script>
var rounded = 0;
    function getPrices(basePrice){
        var dogeValue = <?php echo(file_get_contents("https://www.dogeapi.com/wow/?a=get_current_price")); ?>;
        var postage = 0.49/dogeValue;
        var sellAmount = (basePrice/dogeValue - postage) - (basePrice*0.1/dogeValue);
        rounded = Math.round(sellAmount);
        document.getElementById("txt").innerHTML = rounded;
    }
    var timer = setInterval(function() { getPrices(10) }, 1000);
</script>
<body onload="getPrices(10);">
    <div id="txt"></div>
</body>

Was it helpful?

Solution

The PHP part is executed only once on page load. Take a look at the source code (right click on the page, "show source code"), you'll see the value assigned statically, since it's generated with PHP before the page is loaded into the browser. Keep in mind that Javascript and PHP are executed in separated contexts : PHP > server side, Javascript > client side.

A little help to resolve your problem : http://www.w3schools.com/ajax/.

OTHER TIPS

If you take a look at the console, it will say Uncaught ReferenceError: sellAmount is not defined

The reason: you are missing space at the definition of the variable sellAmount: you wrote varsellAmount = ...

Use this, and it will work:

function getPrices(basePrice){
    var dogeValue = 0.005343614; //When changed the output should change.
    var postage = 0.49/dogeValue;
    var sellAmount = (basePrice/dogeValue - postage) - (basePrice*0.1/dogeValue);
    var rounded = Math.round(sellAmount);
    document.getElementById("txt").innerHTML = rounded;
}
var timer = setInterval(function() { getPrices(10) }, 1000);

See your updated feedle here: http://jsfiddle.net/sQrn7/

EDIT: after your edited Question, see this fiddle: http://jsfiddle.net/Ne2gN/

The output is always the same, because the value of the dogeValue always stays the same. You have to change the value, in order to see a change in the output.

This is the new code:

var dogeValue = 0.005343614; //When changed the output should change.
function getPrices(basePrice){

    var postage = 0.49/dogeValue;
    var sellAmount = (basePrice/dogeValue - postage) - (basePrice*0.1/dogeValue);
    var rounded = Math.round(sellAmount);
    document.getElementById("txt").innerHTML = rounded;
    dogeValue+=0.1;
}
var timer = setInterval(function() { getPrices(10) }, 1000);

Edit 2: After your question-edit, the answer stays the same - you can still define it globally:

<html>
<script>
var rounded = 0;
var dogeValue = <?php echo(file_get_contents("https://www.dogeapi.com/wow/?a=get_current_price")); ?>;

    function getPrices(basePrice){        
        var postage = 0.49/dogeValue;
        var sellAmount = (basePrice/dogeValue - postage) - (basePrice*0.1/dogeValue);
        rounded = Math.round(sellAmount);
        document.getElementById("txt").innerHTML = rounded;
        dogeValue+=0.1; //change it
    }
    var timer = setInterval(function() { getPrices(10) }, 1000);
</script>
<body onload="getPrices(10);">
    <div id="txt"></div>
</body>

You can place your php-Tags everywhere in your code - it doesn't matter if they are inside our outside a function. This code does exacly the same as yours, with the only difference, that getPrices() is now able to change the dogeValue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top