Display javascript variables in HTML code
Question
I'm new to javascript. What I am trying to do is write a C program in javascript (sounds super wrong, I know) but it doesn't seem to work. I would be grateful if someone can help me correct my code to inject the javascript variables into the HTML elements:
<html>
<script type="text/javascript">
var $goal = 1000;
var $amount = 50;
var $percentage = ($amount / $goal ) * 100);
var place1=document.getElementById('goal');
var place2=document.getElementById('amount');
var place3=document.getElementById('percentage');
function incremente() {
$amount = $amount + 10 ;
place1.innerHTML=$amount;
}
</script>
<a href="#">Goal is <span id="goal"></span> actual amount is <span id="amount"></span> percentage is <span id="percentage"></span></a>
<br>
<button onclick="percentage($amount,$goal)">percentage</button>
<br>
<button onclick="incremente()">incremente</button>
</html>
5 answers
solution1
0 2015-01-21 13:19:12
Check this
<html>
<a href="#">Goal is <span id="goal"></span> actual amount is <span id="amount"></span> percentage is <span id="percentage"></span></a>
<br><button id="per">percentage</button>
<br><button onclick="incremente()">incremente</button>
<script type="text/javascript">
var $goal = 1000;
var $amount = 50;
var place1=document.getElementById('goal');
var place2=document.getElementById('amount');
var place3=document.getElementById('percentage');
var b=document.getElementById('per');
b.addEventListener("click",function(){
var $percentage = ($amount / $goal ) * 100;
place1.innerHTML=$goal;
place2.innerHTML=$amount;
place3.innerHTML=$percentage;
});
function incremente() {
$amount = $amount + 10 ;
place1.innerHTML=$goal;
place2.innerHTML=$amount;
}
</script>
</html>
var $goal = 1000; var $amount = 50; var place1=document.getElementById('goal'); var place2=document.getElementById('amount'); var place3=document.getElementById('percentage'); var b=document.getElementById('per'); b.addEventListener("click",function(){ var $percentage = ($amount / $goal ) * 100; place1.innerHTML=$goal; place2.innerHTML=$amount; place3.innerHTML=$percentage; }); function incremente() { $amount = $amount + 10 ; place1.innerHTML=$goal; place2.innerHTML=$amount; }
<a href="#">Goal is <span id="goal"></span> actual amount is <span id="amount"></span> percentage is <span id="percentage"></span></a> <br><button id="per">percentage</button> <br><button onclick="incremente()">incremente</button>
solution2
0 ACCPTED 2015-01-21 13:20:50
I think this is what you want
var $goal = 1000; var $amount = 50; var place1 = document.getElementById('goal').innerHTML = $goal; var place2 = document.getElementById('amount'); var place3 = document.getElementById('percentage'); function incremente() { $amount = $amount + 10; place2.innerHTML = $amount; place3.innerHTML = ($amount / $goal) * 100; } place2.innerHTML = $amount; place3.innerHTML = ($amount / $goal) * 100;
<html> <a href="#">Goal is <span id="goal"></span> actual amount is <span id="amount"></span> percentage is <span id="percentage"></span></a> <br> <button onclick="incremente()">incremente</button> </html>
solution3
0 2015-01-21 13:26:44
You were missing a '(' in your var $percentage = ($amount / $goal ) * 100); . I also set up your document.getElementById() calls to wait until the DOM is loaded.
var place1;
var place2;
var place3;
document.addEventListener("DOMContentLoaded", function() {
place1 = document.getElementById('goal');
place2 = document.getElementById('amount');
place3 = document.getElementById('percentage');
});
var $goal = 1000;
var $amount = 50;
var $percentage = (($amount / $goal ) * 100);
function incremente() {
$amount = $amount + 10;
place1.innerHTML = $amount;
}
solution4
0 2015-01-21 13:29:53
There are many things wrong with your code.
First of all, you use "percentage" as a function since you are trying to call it by clicking the percentage button. You defined it as a variable rather than as a function. Moreover, the bracket at the end of your calculation of $percentage is erroneous. To fix this, you should write a function that calculates the percentage and then use this to fill up your HTML.
Your javascript code refers to HTML-components (place1,place2,place3) before the HTML is loaded (the script comes before the HTML in your code) so it would be better to move this to the bottom of your code. I came up with this:
<html>
<a href="#">Goal is <span id="goal"></span> actual amount is <span id="amount"></span> percentage is <span id="percentage"></span></a>
<br><button onclick="percentage()">percentage</button>
<br><button onclick="incremente()">incremente</button>
<script type="text/javascript">
var goal = 1000;
var amount = 50;
var place1=document.getElementById('goal');
var place2=document.getElementById('amount');
var place3=document.getElementById('percentage');
function percentage(){
place3.innerHTML = (amount/goal) * 100
}
function incremente() {
amount = amount + 10 ;
place1.innerHTML=goal;
place2.innerHTML=amount;
}
</script>
</html>
But I'm not sure whether it meets your requirements since you didn't explain what the purpose of your application is.
solution5
-1 2015-01-21 14:01:52
You need to have the html document in the same folder as your javascript file then add the following code to your html code, just below the tag in the head segment. Remember, your html document should be in the same folder with the javascript document's folder. name the folder, say like...slider, as in my case. After that, write the following code, tht will link your html document to your javascript file.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.