innerHTML basic,在循环

时间:2016-11-30 09:23:19

标签: javascript html innerhtml

我的javascript有问题。我想这样做,如果我点击添加糖果按钮。它声明有2个糖果。如果我再次点击它说有3个糖果。使用innerHTML最快的方法是什么?

function add() {
  var d = document.getElementById('idd').innerHTML;
  d = d + '<li>There is a candy</li>';
  document.getElementById('idd').innerHTML = d;
}
<body>
  <h1>Adding</h1>
  <p><input type="button" value="adding candy" onclick="add();"></p>
  <ul id="idd">
    <li>There is a candy.</li>
  </ul>
</body>

这让我整日头疼。

6 个答案:

答案 0 :(得分:2)

这将完美地运作

您必须声明一个全局变量,以便每次点击时添加点击次数并使用innerHTML显示

 <body>
    <h1>Adding</h1>
    <p><input type="button" value="adding candy" onclick="add();"></p>
    <ul id="idd">
      <li>There is a candy.</li>
    </ul>
  </body>

<script>
  var d=0;
function add() {
  d =d+1; 
  document.getElementById('idd').innerHTML = '<li>There are '+d+' candy</li>';
}
  </script>

答案 1 :(得分:1)

您可以跟踪函数外部变量的点击次数:

&#13;
&#13;
var candy = 1;

function add() {
  var element = document.getElementById('idd');
  
  // Increment candy
  candy = candy + 1;
  
  // Replace text
  element.innerHTML = '<li>There is ' + candy + ' candy</li>'
}
&#13;
<h1>Adding</h1>
<p><input type="button" value="adding candy" onclick="add();"></p>
<ul id="idd">
  <li>There is a candy.</li>
</ul>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

根据li的数量生成包含内容的新li元素,并将其附加到ul

&#13;
&#13;
function add() {
  // get the `ul` using id
  var d = document.getElementById('idd');
  // get count of `li` 
  var count = d.getElementsByTagName('li').length + 1;
  // create an li element
  var li = document.createElement('li');
  // add content to li based on count
  li.innerHTML = 'There is ' + (count) + ' candy.';
  // append generated li element to the ul
  d.appendChild(li)
}
&#13;
<body>
  <h1>Adding</h1>
  <p>
    <input type="button" value="adding candy" onclick="add();">
  </p>
  <ul id="idd">
    <li>There is a candy.</li>
  </ul>
</body>
&#13;
&#13;
&#13;

更新:如果您尝试更新相同的li内容,请使用全局变量进行更新。

&#13;
&#13;
var count = 1;

function add() {
  // get the li
  var d = document.querySelector('#idd li');
  // update content by based on count variable value
  d.innerHTML = 'There is ' + (++count) + ' candy.';
}
&#13;
<body>
  <h1>Adding</h1>
  <p>
    <input type="button" value="adding candy" onclick="add();">
  </p>
  <ul id="idd">
    <li>There is a candy.</li>
  </ul>
</body>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

我认为最好的方法是在HTML值周围添加一个容器,并在调用函数时更改它。

示例

&#13;
&#13;
var nbCandy=0;
function add()
{
  document.getElementById("candy-nbr").innerHTML = ++nbCandy == 1 ? "a" : nbCandy;
}
&#13;
<button onclick="add()">
  Add a candy
</button>
<div>
  There is <span id="candy-nbr">0</span> candy
</div>
&#13;
&#13;
&#13;

答案 4 :(得分:0)

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var counter = 0;
function add() {
counter ++;
document.getElementById("idd").innerHTML = counter;
}

</script>

</head>
 <body>
    <h1>Adding</h1>
    <button onclick="add()">
    adding candy
    </button>
     <a id="idd"></a>
      <a>There is a candy.</a>
  </body>
</html>

答案 5 :(得分:-1)

function add() {
  var d = document.getElementById('idd').innerHTML;
  
  var f=((document.getElementById('idd').children.length)+1);
  d = d + '<li>There is '+ f+ 'candy</li>';
  document.getElementById('idd').innerHTML = d;
}
<h1>Adding</h1>
    <p><input type="button" value="adding candy" onclick="add();"></p>
    <ul id="idd">
      <li>There is a candy.</li>
    </ul>