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

您的代码有很多问题。

首先，你使用＆＃34;百分比＆＃34;作为一个函数，因为您尝试通过单击百分比按钮来调用它。您将其定义为变量而不是函数。而且，在计算$百分比结束时的括号是错误的。要解决此问题，您应该编写一个计算百分比的函数，然后使用它来填充HTML。

您的javascript代码在加载HTML之前引用HTML组件（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 segment中的标记下方。请记住，您的html文档应与javascript文档的文件夹位于同一文件夹中。命名文件夹，比如...滑块，就像我的情况一样。之后，编写以下代码，将您的html文档链接到您的javascript文件。

在HTML代码中显示javascript变量

5 个答案: