How to get php echo data in jquery - php

Question

How to get php echo data in jquery. i want dataDAY1 in jquery. i am using on progress bar. i use php and sql. i nedd total var total_goals and var goals_completed data from database
<div id="dataDAY1"><?php echo $row["ipoSize"]; ?></div>
<script>
$(document).ready(function(){
var total_goals = document.getElementById("dataDAY1")
// var total_goals = '$json_array';
var goals_completed = 3000;
var bar = new ProgressBar.Circle('#container', {
color: '#00b819',
strokeWidth: 4,
trailWidth: 4,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#cecece', width: 4 },
to: { color: '#00b819', width: 4 },
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';
bar.animate(goals_completed/total_goals); // Number from 0.0 to 1.0
});
</script>

Answer 1

try this...
for JQuery: var total_goals = $("dataDAY1").html();
for Javascript: var total_goals = document.getElementById("dataDAY1").innerHTML;
snippet:
var total_goals = $('#dataDAY1').html();
console.log(total_goals);
var total_goals_js = document.getElementById('dataDAY2').innerHTML;
console.log(total_goals_js);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dataDAY1">Your Data From Php Variable</div>
<div id="dataDAY2">Your Data From Php Variable 2</div>

Answer 2

Try this:-
var total_goals= <?php echo json_encode($json_array); ?>;
console.log(total_goals);

Answer 3

You can use php in javascript. See below code
<script>
var total_goals = "<?php echo $row['ipoSize']; ?>";
</script>