我的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>
这让我整日头疼。
答案 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)
您可以跟踪函数外部变量的点击次数:
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;
答案 2 :(得分:1)
根据li
的数量生成包含内容的新li
元素,并将其附加到ul
。
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
内容,请使用全局变量进行更新。
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;
答案 3 :(得分:0)
我认为最好的方法是在HTML值周围添加一个容器,并在调用函数时更改它。
示例
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;
答案 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>