javascript - 如何用一个按钮切换div的多个内容(how to switch div's multiple contents with one button)

Question

I want to create a div that its content (text) will be changed every time you click on a button - but not as a toggle but as multiple text changes.(我想创建一个div，它的内容（文本）将在每次单击按钮时更改-但不是作为切换键而是随着多个文本更改而更改。)

I have 14 sentences - I need only one sentence to be presented at the time.(我有14个句子-当时只需要陈述一个句子。) by clicking on a button it will present the next sentence and so on.(通过单击按钮将显示下一个句子，依此类推。) after the 14th sentence, I want it to loop back to the first one.(在第14句话之后，我希望它循环回到第一个句子。) do you have any idea how to approach it?(你有什么想法吗？) all the similar posts I found were about how to toggle two different text - I need multiple.(我发现的所有类似帖子都涉及如何切换两个不同的文本-我需要多个。) A good example of what I need - check the footer of this site(我需要的一个很好的例子-检查此网站的页脚)   ask by nirshh5 translate from so

Answer 1

You can declare a number which represents the sentence number, increment it at the button click and display the i th sentence modulo sentences array length in order to have a loop effect.(您可以声明一个表示句子编号的数字，在单击按钮时将其递增，并显示第i个句子模句子数组的长度，以产生循环效果。)

Like this:(像这样：) var sentences = ['first', 'second', 'third', 'fourth']; var senNum = 0; var sen = document.getElementById('sen'); sen.innerText = sentences[senNum++]; // set initial sentence document.getElementById('change').addEventListener('click', function(e) { sen.innerText = sentences[senNum++ % sentences.length]; }); <div id='sen'></div> <button id="change">Change</button>