CODEWITHSUNDEEP
javascripthtmljquery
Vaishnav Sunil
Vaishnav Sunil

Reputation: 47

How to change the appended child's text dynamically - JQuery

The script works fine. But I want the text to change from "Team 1" to "Team 2" and so on as whenever the user adds another team. I know the code isn't the best and may not be the most efficient either but I am just beginning and I am doing this project personally to learn more.

var div = document.getElementById('team1');
var addbtn = document.getElementById('addt1');

$(addbtn).click(function(e) {
  e.preventDefault();
  $(div).append('<div><label id="teamnumber" class="teamnumber">Team 1</label><br><br><label for="part1">Team Member 1</label><input type="text" placeholder="Member 1" id="part1" class="part1"> <br><br><br><label for="part2">Team Member 2</label><input type="text" placeholder="Member 2" id="part2" class="part2"><br><br><br><br></div>'); //add input box
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="team1">
  <label id="teamnumber" class="teamnumber">Team 1</label><br><br>
  <label for="part1">Team Member 1</label><input type="text" placeholder="Member 1" id="part1" class="part1"> <br><br><br>
  <label for="part2">Team Member 2</label><input type="text" placeholder="Member 2" id="part2" class="part2">
  <button class="addteam" id="addt1"><img class="addicon" alt="svgImg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDgiIGhlaWdodD0iNDgiCnZpZXdCb3g9IjAgMCAyMjYgMjI2IgpzdHlsZT0iIGZpbGw6IzAwMDAwMDsiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxwYXRoIGQ9Ik0wLDIyNnYtMjI2aDIyNnYyMjZ6IiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD48ZyBmaWxsPSIjZmFmYWZhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMDMuNTgzMzMsMTguODMzMzN2ODQuNzVoLTg0Ljc1djE4LjgzMzMzaDg0Ljc1djg0Ljc1aDE4LjgzMzMzdi04NC43NWg4NC43NXYtMTguODMzMzNoLTg0Ljc1di04NC43NXoiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg=="/></button>
</div>

Upvotes: 0

Views: 121

Answers (1)

ikiK
ikiK

Reputation: 6532

var team = 1;

<label id="teamnumber" class="teamnumber">Team '+(++team)+'</label>

Set your team number as 1. when you add ++ in front, it will add team+1 on every initiation.

var div = document.getElementById('team1');
var addbtn = document.getElementById('addt1');

var team = 1;

$(addbtn).click(function(e) {
  e.preventDefault();
  $(div).append('<div><label id="teamnumber" class="teamnumber">Team '+(++team)+'</label><br><br><label for="part1">Team Member 1</label><input type="text" placeholder="Member 1" id="part1" class="part1"> <br><br><br><label for="part2">Team Member 2</label><input type="text" placeholder="Member 2" id="part2" class="part2"><br><br><br><br></div>'); //add input box
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="team1">
  <label id="teamnumber" class="teamnumber">Team 1</label><br><br>
  <label for="part1">Team Member 1</label><input type="text" placeholder="Member 1" id="part1" class="part1"> <br><br><br>
  <label for="part2">Team Member 2</label><input type="text" placeholder="Member 2" id="part2" class="part2">
  <button class="addteam" id="addt1"><img class="addicon" alt="svgImg" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDgiIGhlaWdodD0iNDgiCnZpZXdCb3g9IjAgMCAyMjYgMjI2IgpzdHlsZT0iIGZpbGw6IzAwMDAwMDsiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxwYXRoIGQ9Ik0wLDIyNnYtMjI2aDIyNnYyMjZ6IiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD48ZyBmaWxsPSIjZmFmYWZhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0xMDMuNTgzMzMsMTguODMzMzN2ODQuNzVoLTg0Ljc1djE4LjgzMzMzaDg0Ljc1djg0Ljc1aDE4LjgzMzMzdi04NC43NWg4NC43NXYtMTguODMzMzNoLTg0Ljc1di04NC43NXoiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPg=="/></button>
</div>

EDIT: Note that you should do the same with your id's, you are adding to documents same ids on every team add, ids need to be unique, or use classes.

Upvotes: 2

Related Questions