在 html 代码中显示 javascript 变量

Question

我是 javascript 的新手，我遇到了两个问题：

-第一个问题：如何在 html 代码中显示变量，这是我的：

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

这是我正在尝试做的事情：

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

-第二个问题是如何使用函数onclick:

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

感谢您的宝贵时间:)

Answer 1

您通常会使用带有某种模板的框架来完成此操作。但是，有很多方法可以将 javascript 变量注入到您的 html 中。在您的 javascript 文件或脚本块中：

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;

要将事件添加到函数，请在节点上使用 addEventListener。

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

Answer 2

很高兴认识你朋友。

首先，纯javascript很难直接在html中显示变量。如果您想喜欢您的代码，请检查 javascript 库（AngularJS 或 hadlebar）

第二

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

</script>

...

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

Answer 3

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>

在 html 代码中显示 javascript 变量

display javascript variable in html code

html

javascript

php

variables

function