在html代码中显示javascript变量

Question

im really new to javascript and im kind of stuck with two problems :

-first problem: how can i display variables in html code, here's mine:

<script type="text/javascript">
var $first = 1000;
var $seconde = 50;
var $percentage = 0;
function pourcentage(somme, but) {
    percentage = ((somme / but ) * 100);} 
function incremente() {
    $first = $first + 10 ;}   
</script>  

and here's what im trying to do:

 <li><a href="#">first variable $first seconde one is $seconde</a></li>

-2nd problem is how to use a function onclick:

<li class="blue"><a href="#" onclick="incremente()">stuff</a></li>

thank you for your time :)

Answer 1

var $first = 1000;
var $seconde = 50;
var $percentage = 0;
var place1=document.getElementById('first');
var place2=document.getElementById('second');
function pourcentage(somme, but) {
    percentage = ((somme / but ) * 100);
  alert('pourcentage = '+percentage+'%');
} 
function incremente() {
  
    $first = $first + 10 ;
  place1.innerHTML=$first;
  place2.innerHTML=$seconde;
}   

<a href="#">first variable is <span id="first"></span> and seconde one is<span id="second"></span></a>
<br><button onclick="pourcentage(100,5)">pourcentage</button>
<br><button onclick="incremente()">incremente</button>

</div>