Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

306
Views
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>

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

In your AddDiv() function, you are always resetting i to 0, which means every time that you run the function, it's going to be one all over again. You need to take it out of the function to keep it counting.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!