如何使用按钮使用 JavaScript 对数组进行计数？
Posted
技术标签:
【中文标题】如何使用按钮使用 JavaScript 对数组进行计数？【英文标题】：How do I use a button to count through an array using JavaScript? 【发布时间】：2019-07-16 11:25:35 【问题描述】：如何使用按钮通过 javascript 对数组进行计数？
我的代码：
var dataset = ["A", "B", "C", "D", "E"];
var counter = 0;
function onClick()
counter++;
;
document.write(dataset[counter]);<button type="button" onClick="onClick()">Click me</button>我想先打印“A”，点击按钮时再打印“B”，以此类推。
我当前的代码不起作用。如何修复代码以实现此目的？
【问题讨论】：
【参考方案1】：您需要一个输出的目标元素，因为如果页面完成，您将创建一个新的 html 文档。
请看这里：Why is document.write considered a "bad practice"?
function onClick()
if (counter < dataset.length)
document.getElementById('output').innerHTML += dataset[counter++] + ' ';
;
var dataset = [ "A" , "B" , "C" , "D" , "E" ],
counter = 0;<button type="button" onClick="onClick()">Click me</button>
<div id="output"></div>【讨论】：
现在完美了 += on .innerHTML is considered a bad practice too, according to this. @CodeF0x，对，有很多作业。但在这里，不是。【参考方案2】：你应该把它写在onClick()函数里面。这样每当用户点击按钮时，onClick() 函数就会被调用并使用 innerHTML 属性更改元素中的值。
最好单独创建一个元素并更改其值，而不是使用document.write。
var dataset = ["A", "B", "C", "D", "E"];
var counter = 0;
function onClick()
const para = document.getElementById('para');
para.innerHTML = dataset[counter];
if(counter < (dataset.length-1))
counter++;
else
counter = 0;
;<button type="button" onClick="onClick()">Click me</button>
<p id="para"></p>【讨论】：
【参考方案3】：这对你有帮助
var dataset = ["A", "B", "C", "D", "E"];
var counter = 0;
function onClick()
document.getElementById("in").innerHTML = dataset[counter];
counter++;
if(counter == dataset.length) counter = 0;
;<button type="button" onClick="onClick()">Click me</button>
<p id ="in"></p>【讨论】：
【参考方案4】：您在底部的脚本只会在页面加载时运行一次，因此它不知道counter 正在发生变化。相反，您可以将文档写入添加到您的 onClick 方法中。
此外，此时您正在将字母附加到正文中，替换之前的所有内容，包括按钮。相反，您可以创建一个 div 来保存从数组中提取的结果字母。
此外，我建议您使用counter % dataset.length，以便每次到达数组末尾时都会环绕您的字母：
<script type="text/javascript">
var dataset = ["A", "B", "C", "D", "E"];
var counter = 0;
function onClick()
document.getElementById("res").textContent = (dataset[counter % dataset.length]);
counter++;
;
</script>
<button type="button" onClick="onClick()">Click me</button>
<div id="res"></div>【讨论】：
【参考方案5】：您可以拥有一个 div 并将其定位为 onClick 并使用 innerHTML 将数据集中的值添加到它
<script type="text/javascript">
var dataset = [ "A" , "B" , "C" , "D" , "E" ];
var counter = 0;
function onClick()
document.getElementById('data').innerHTML = dataset[counter]
counter++;
counter = counter % 5
;
</script>
<button type="button" onClick="onClick()">Click me</button>
<div id='data'></div>【讨论】：
【参考方案6】：var dataset = ["A", "B", "C", "D", "E"];
var counter = 0;
function onClick()
/* If you want the previous result to be removed and new result to appear use the below code*/
/*document.getElementById("result").innerHTML =dataset[counter]; */
/* Or if you want to append the result, retaining the previous result use this */
document.getElementById("result").innerHTML+=(dataset[counter] + ", ");
counter++;
if(counter == 5)
counter = 0;
;<button type="button" onClick="onClick()">Click me</button>
<div id='result'></div>【讨论】：
【参考方案7】：点击执行的代码是：
function onClick()
counter++;
如您所见，计数器增加但屏幕未刷新。要解决此问题，您可以考虑在函数内复制document.write(counter)，但第一次单击按钮时document.write 会覆盖原始HTML，并且按钮会消失：
counter = 0;
document.write(counter);
function onClick()
counter++;
document.write(counter);
<button onclick="onClick()">increase</button>要正确刷新屏幕，您需要知道DOM 是什么。粗略地说，DOM（文档对象模型）相当于 JavaScript 世界中的 HTML 文档。借助 DOM，您可以使用 JavaScript 操作 HTML 文档。
将 HTML 文档视为具有父元素和子元素的树（例如，<html> 有两个子元素，<head> 和 <body>）。这棵树的根是文档本身，文档的第一个子元素是<html> 元素。在 JavaScript 世界中，可以在名为 document 的预先存在的变量中找到该文档。您可以要求document 为您找到一些后代元素，如下所示：
html = document.children[0];
buttons = document.getElementsByTagName("button");
您还可以逐个操作元素。例如，如果你想改变按钮内的文字，你可以这样做：
button = buttons[0]; // first button found in the tree
button.textContent = "counter plus plus";
基于这些知识，这里有一个在点击时打印计数器的可能解决方案：
counter = 0;
function onClick()
counter++;
var span = document.getElementById("counter");
span.textContent = counter;
<button onclick="onClick()">increment</button>
<span id="counter">0</span>我想你可以自己完成这项工作:-)
【讨论】：
以上是关于如何使用按钮使用 JavaScript 对数组进行计数？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用jquery或javascript对对象数组进行排序[重复]
如何使用正则表达式对数组中的 Javascript 对象进行排序
如何使用javascript对属性上的数组进行分组以在特定键处获得每个组的聚合值？