'i want to create a counter which change every time i click on the button in javascript

a set a button which create an new div everytime i click on it , every div created must have a new i so i try to create an counter which change every time i click on the button i try a lot of codes but none work correctly , this is the last code i tried

function AddDiv() {
  var i = 0;
  $("#AddDrop").click(function() {
    i++;
  });
  const e = document.createElement('div');
  e.setAttribute('id', i);
  e.style.border = 'solid';
  e.style.width = '300px';
  e.style.height = '100px'
  e.innerHTML = 'Droppable'
  question = document.getElementById("QU");
  question.appendChild(e);
}

function GetText() {
  const event = document.createElement('div')
  const text = document.getElementById("in").value;
  event.innerHTML = text;
  question = document.getElementById("QU");
  question.appendChild(event);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <title>Document</title>
</head>

<body>
  <div class="row">
    <div class="col-md-6">
      <textarea id="in" style="width: 500px; height: 300px;"></textarea>
      <br>
      <button onclick="GetText();" class="btn btn-primary">Add Text</button>
      <button onclick="AddDiv();" class="btn btn-success" id="AddDrop">Add div</button>
      <input type="file" accept="image/*" value="Add Images" style="margin-top: 30px;">
    </div>
    <div class="col-md-6" id="QU" style="border: solid; height: 600px;">

    </div>
  </div>

</body>

</html>
javascripthtmljquerycssalgorithm


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions