Question

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

这让我整日头疼。

Answer 1

这将完美地运作

您必须声明一个全局变量，以便每次点击时添加点击次数并使用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>

Answer 2

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

＆＃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;

Answer 3

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

＆＃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;

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

＆＃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;

Answer 4

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

示例

＆＃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;

Answer 5

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

Answer 6

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>

innerHTML basic，在循环

6 个答案: