Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

JavaScript / HTML work with DOM, Button which count click and make new string every time when I click

I need create button which count click but make every time new string. I have that function with scope which make count every time when I click, but I cannot understand, why in HTML it every time count zero, should be like this:
(Verticaly every click make new string with updated count)
1
2
3
4

<form action="#">
    <input type="button" value="Count" onclick="add_count()">
</form>

function add_count() {
let integer = (function () {
    let counter = 0;
    return function() {return counter++;};
}());
let tag = document. createElement("p");
let text;
text = document. createTextNode(integer());
tag. appendChild(text);
let element = document. getElementsByTagName("body")[0];
element. appendChild(tag)};

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

You just need to move the counter initialization outside of the function scope

I’ve tweaked your code a bit.

Note: try not using inline event listeners, instead use event listeners in JavaScript file

let counter = 0;

const button = document.querySelector('input');

function add_count() {
  let integer = (() =>  counter++);
  const tag = document.createElement("p");
  const text = document.createTextNode(integer());
  tag.appendChild(text);
  const element = document.body
  element.appendChild(tag)
};

button.addEventListener('click', add_count)
<form action="#">
  <input type="button" value="Count">
</form>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading