在 HTML 代码中显示 javascript 个变量

Question

我是 javascript 的新手。我想做的是在 javascript 中编写一个 C 程序（我知道这听起来非常错误）但它似乎不起作用。如果有人可以帮助我更正我的代码以将 javascript 变量注入 HTML 元素，我将不胜感激：

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

Answer 1

检查这个

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

Answer 2

我想这就是你想要的

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>

Answer 3

您的 var $percentage = ($amount / $goal ) * 100); 中缺少“(”。我还设置了您的 document.getElementById() 调用以等待 DOM 加载。

JSFiddle DEMO

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

Answer 4

你的代码有很多问题。

首先，您使用 "percentage" 作为函数，因为您试图通过单击百分比按钮来调用它。您将其定义为变量而不是函数。此外，计算 $percentage 末尾的括号是错误的。要解决此问题，您应该编写一个计算百分比的函数，然后使用它来填充您的 HTML.

您的 javascript 代码在加载 HTML 之前引用 HTML-components (place1,place2,place3)（脚本位于 HTML 之前代码），所以最好将它移到代码的底部。我想到了这个：

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

但是我不确定是否符合你的要求，因为你没有说明你申请的目的是什么

Answer 5

您需要将 html 文档与 javascript 文件放在同一文件夹中，然后将以下代码添加到您的 html 代码中，就在 head 段中的标记下方.请记住，您的 html 文档应该与 javascript 文档的文件夹位于同一文件夹中。命名文件夹，比如...滑块，就像我的情况一样。之后，编写以下代码，将 link 您的 html 文档添加到您的 javascript 文件。

在 HTML 代码中显示 javascript 个变量

Display javascript variables in HTML code

html

javascript

variables