echo a javascript variable - javascript

What is the best way to echo the variable get_parestotal?
Some help please!
Thank you
<script type="text/javascript">
$(document).ready(function(){
var get_parestotal = 0
$(".parestotal").each(function(){
get_parestotal += parseFloat($(this).text());
});
alert(get_parestotal);
});
</script>
<? echo json_encode($get_parestotal); ?>

You can log variables and so on in the console.
e.g.:
console.log(get_parestotal);
You can even concatenate witht he use of +
console.log('This is your variable'+get_parestotal)
You can even add styling to your log (color, background-color,...):
console.log('%cThis is your variable'+get_parestotal+'!','color:green;');
There are some alternatives to console.log() you could use:
console.warn();
console.info();
console.error();
console.debug();

You can either do alert(myvar) or console.log(myvar).
Caveat: console.log is only supported in certain browsers...see the link.

if you want a console output than use console.log(get_parestotal);

Related

jQuery is not overwriting text coming from php include

I have a php file coming from a global assets folder, in the footer I have this:
<?php
include('../global/includes/footer_template.php');
?>
and in that template I have something like this:
<a href="<?php echo $legalUrl;?>"target="_blank">
<?php echo ($isLangSpanish?'Nota Legal':'Legal Notices');?>
</a>
so in the view you will see 'Legal Notices', for one of the pages the client is asking me to uncapitalize the 'N' in Notices. So I did this with jQuery
<?php
include('../global/includes/footer_template.php');
?>
<script type="text/javascript">
$(document).ready(function(){
$('.footer p a').text().replace('Notices', 'notices');
});
</script>
And it works in the browser console:
But I can't see that change in the view.
What can I do?
NOTE:
I can't change the footer template in the assets because it's been used for other projects.
You have to assign the value back.
$(document).ready(function(){
$('.footer p a').text($('.footer p a').text().replace('Notices', 'notices'));
});
a little cleaner:
$(document).ready(function(){
var link = $('.footer p a'),
updatedText = link.text().replace('Notices', 'notices');
link.text(updatedText);
});
Posting an alternative solution using a callback to text(),
$('.footer p a').text(function(){
return $(this).text().replace('Notices', 'notices')
});
.text( function )
A function returning the text content to set. Receives the index position of the element in the set and the old text value as arguments.

Random button that reload a div or script not page using jquery or javascript

I'm really new at this and I need a random button on my page that would show a new line of information in a div every time someone click on the random button. I was also wondering if there is over 800 lines is it possible to put it in an outside file as txt or html.
Here is what I got so far and well it doesn't work and I'm getting confuse... Please help
<script type="text/javascript" src="jquery-2.2.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#text').hide();
$('a#random').click(function(){
$('#text').toggle();
})
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
document.getElementById('#text').innerHTML=textarray[rannum];
}
var textarray = [
"Hello",
"How are you",
"Good Bye"
];
$("#text").load()
})
</script>
<body>
<div id="text">Line to Show</div>
RANDOM
</body>
Uh. Pretty much this:
$('a#random').click(function(){
$('#text').toggle();
RndText(); //you're good
});
Although I will point out that RndText() uses document.getElementById when it could use $("#text") instead. (there's a .html() method that will write the value instead of the .innerHTML property).
document.getElementById is also not currently working because you used "#text" instead of "text", jQuery uses CSS selectors, getElementById does not.
Add execution of RndText when you clicks on Random button.
$('a#random').click(function(){
$('#text').show();
RndText();
})
This will give you a button and you can run this code by clicking the button below. However, I did not quite understand you second part of the question: 800 lines in separate file, what do you wanna do with it? Tell me so that I can helo you further...
Editted:
<?php
$data = file_get_contents('demo.txt');
$lines= split("\n",$data);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var textarray = <?php echo json_encode($lines); ?>;
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
$('#text').text(textarray[rannum]);
console.log(textarray[rannum]+" "+rannum+" "+textarray.length);
}
$(document).ready(function(){
$('#text').hide();
$('#random').click(function(){
$('#text').show();
RndText();
});
});
</script>
<body>
<div id="text"></div>
<button id="random">RANDOM</button>
</body>

My for in loop output fork fails

I'm looking at this "for in" tutorial and I don't understand why I can't get the loop to write the aProperty value instead of just its name.
http://www.tutorialspoint.com/cgi-bi...=javascript_15
I've tried:
document.write(navigator.aProperty);
document.write(navigator + . + aProperty);
And various other forms, all have failed.
If I just code
document.write(navigator.onLine);
Why can't I make the var, "aProperty" work as a document.write parameter?
Thanks!
<script type="text/javascript">
<!--
var aProperty;
document.write("Navigator Object Properties<br /> ");
for (aProperty in navigator)
{
document.write(aProperty);
document.write("<br />");
}
document.write("Exiting from the loop!");
//-->
</script>
</body>
</html>
aProperty is, indeed, just the key. to return the value you need to ask navigator for it.
Add this in your for...in loop:
for (aProperty in navigator)
{
document.write(navigator[aProperty]);
document.write("<br />");
}

NaN or blank value for calculated JS var

I have the following javascript:
<script type="text/javascript">
function changeBet(parseFloat(bet)) {
var moneyline = parseFloat(<?php echo json_encode($win) ?>);
var gain = parseFloat(bet * moneyline);
document.getElementById("PotentialGain").value = gain;
}
</script>
The php variable $win is successfully var_dump'ed as a float. When the variable gain = bet, PotentialGain displays the user input from BetAmount as expected. Here is my echo'ed php code:
echo '<tr>';
echo '<td>type="text" name="BetAmount[]" id="BetAmount" onkeyup="changeBet(this.value);" ></td></tr><tr><td>Potential Gain:<input type="text" name="PotentialGain[]" id="PotentialGain" ></td></tr><tr><td><input type="Submit" name="send" value="Submit"></td>';
echo '</tr>';
However, I want gain(which is inputted as the PotentialGain value) to be the user input bet * the var moneyline.
The result is NaN. Is there a var that I am not parsing correctly to display the correct numerical value of gain?
Thanks for any help.
You can't put a function call where a parameter name is expected.
function changeBet(bet) {
bet = parseFloat(bet);
// rest of code
}
The problem is the incorrect syntax in this line:
function changeBet(parseFloat(bet)) {
you need to pass a parameter to the function, like this:
function changeBet(bet) {
Then, when you call the function, you can evaluate whatever argument you want to send through parseFloat:
changeBet(parseFloat(strBet));
Here is the final javascript that I used:
<html>
<script type="text/javascript">
function changeBet(bet) {
var moneyline = <?php echo $win ?>;
var gain = (bet * moneyline).toFixed(2);
document.getElementById("PotentialGain").value = gain;
}
</script>
</html>
My final notes are: 1. To remember to place the javascript function after the code with your php caclculations. 2. Thanks to everyone who clarified parseFloat is not necessary if you know the var is a int (or double in my case). 3. Thanks to everyone who clarified parseFloat did not belong in the function parameter.
Hopefully this helps others out!

Solution to jQuery.get() returning null on Localhost?

I'm having issues getting jQuery to work correctly while testing on Localhost.
The function that's giving me trouble:
function poll() {
$.get(location.href, function(data) {
var x = $('#datadump', data);
alert(x.html());
});
}
Where location.href = http://localhost/polltest.php
The alert merely returns null instead of a random number produced by PHP's rand function. The source of localhost/polltest.php is:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function poll() {
$.get(location.href, function(data) {
var x = $('#datadump', data);
alert(x.html());
});
}
</script>
</head>
<body onload="poll();">
<div id="datadump">
<?php
$val = rand(0, 100);
echo $val;
?>
</div>
</body>
</html>
Any help regarding a way for this to work would be wonderful and appreciated.
There could be multiple ways to achieve the value of the div with id datadump.
One of the ways being
function poll() {
$.get(location.href, function(data) {
x = $(data).filter('#datadump');
console.log(x);
});
}
The reason it is failing for you:
When you have an HTML string which contains <html>, <head>, <body> tags, and you try to do
$(string)
those elements will be ignored. Only those elements which can be put inside a div are valid. Read it in the jQuery documentation.
When passing in complex HTML, some browsers may not generate a DOM
that exactly replicates the HTML source provided. As mentioned, we use
the browser's .innerHTML property to parse the passed HTML and insert
it into the current document. During this process, some browsers
filter out certain elements such as <html>, <title>, or <head>
elements. As a result, the elements inserted may not be representative
of the original string passed.
This issue has been discussed in detail on this link: https://stackoverflow.com/a/5642602/410367
Can you try this way,
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var x = $('#ads');
alert(x.html());
$.get(location.href, function (data) {
var x = $('#ads', data);
alert(data);
alert(x.html());
});
});
</script>
</head>
<body>
<div id="datadump">
<?php
$val = rand(0, 100);
echo $val;
?>
</div>
</body>
Update: I have changed the script little bit similar to your original post. It works fine for me.

Categories

Resources