display javascript variable in html code

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 :)

possible duplicate of How to display a javascript variable into html — user557846
– user557846, Commented Jan 19, 2015 at 21:06
yes the only langages i used for programming are c, pascal and some object-oriented java :/ — Aerocover Apps
– Aerocover Apps, Commented Jan 19, 2015 at 21:11
i was able to display the variables using <?php ?> inside html code <li><a href="#">first variable <?php echo $first ?></a></li> but it seems that it cant work with the onclik= function() — Aerocover Apps
– Aerocover Apps, Commented Jan 19, 2015 at 21:16

Billy · Accepted Answer · 2015-01-19 21:15:37Z

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>

answered Jan 19, 2015 at 21:15

Billy

2,4381 gold badge13 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aerocover Apps Over a year ago

it displays (first variable is and seconde one is) doesnt show variables :/ ps:it worked perfectly on run code snippet*

Mouser · Accepted Answer · 2015-01-19 21:18:31Z

1

You would generally use a framework with some sort of templating to accomplish this. However, there are many ways to inject javascript variables into your html. Inside your javascript file or script block:

var $first = 1000;
var $seconde = 50;

//target the element whose html you want to edit
var el = document.getElementById('targetMe');

//use the innerHTML() method of DOM elements to edit the HTML of the targeted element
el.innerHTML = "first variable "+ $first +" second one is "+$seconde;

to add event to a function use addEventListener on a node.

el.addEventListener("click", pourcentage.bind(window, 100, 5), false);

edited Jan 19, 2015 at 21:18

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

answered Jan 19, 2015 at 21:10

Liam Schauerman

8415 silver badges10 bronze badges

Comments

lv0gun9 · Accepted Answer · 2015-01-19 21:15:21Z

-2

nice to meet you friend.

first, pure javascript is hard to display variable in html directly. If you want to do like your code, check javascript libraries(AngularJS or hadlebar)

2nd

<html>
...
<script>
function yourFunction() {
  //your code in here..
}

</script>

...

<li><a href="#" onclick="yourFunction()">something</a></li>

answered Jan 19, 2015 at 21:15

lv0gun9

6218 silver badges24 bronze badges

Collectives™ on Stack Overflow

display javascript variable in html code

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related