Adding an integer to string

Question

I am trying to add an integer to the card id so that I can delete it when pressing the delete button. Any help?

     var variable = '' + 
  '<div id="card+$num.toString(cnt);" class="card col-3" style="width: 18rem;" style="margin-right=3%; margin-right=3%">' + 
  '            <img src="..." class="card-img-top" alt="..." id="image"+String(cnt)>' + 
  '            <div class="card-body">' + 
  '                <h5 class="card-title" id="title"+String(cnt) contentEditable="true"; >Card title</h5>' + 
  '                <p class="card-text" id="desc"+String(cnt) contentEditable="true">Some quick example text to build on the card title and make up the' + 
  '                    bulk of the' + 
  '                    card\'s content.</p>' + 
  '                <a href="#" class="btn btn-primary" id="button"+ String(cnt) >Go somewhere</a>' + 
  '                <a href="#" id="btn"+String(cnt) class="close"+String(cnt)>Delete</a>' + 
  '            </div>' + 
  '        </div>' + 
  '';

  $(".create").click(function(){
    document.getElementById("lastRow").innerHTML+=variable;
  });

  $(".close"+String(cnt)).click(function(){
    console.log("Doulevw!");
    document.getElementById("card"+String(cnt)).hidden=true;
  });

You've to pull the variables out of the string, and concatenate the values to the string. JS doesn't read variable values inside a string. Or rather use template literals. — Teemu
– Teemu, Commented Dec 1, 2020 at 18:49

Nir Gofman · Accepted Answer · 2020-12-01 19:15:34Z

1

There are a few concepts that you have to know when rendering dynamic elements with js.

you have a click listener for your .close button. This listener will never fire because this listener is relevant only for your initial DOM. But your closing button is rendered dynamically, which means that listener not relevant for your button. Easily solving that by attaching onclick to the button, and creating a function. (example follows)
I inspected your code, you DON'T have to use id mechanism to delete/hide your card element (unless you need to fire POST request), you can use parentNode (example follows)

I made some simple changes to your code:


$(".create").click(function(){
  let element = `
      <div id="card" class="card col- 3" style="width:18rem;style="margin-right=3%; margin-right=3%"><img src="..." class="card-img-top" alt="..." id="image"+String(cnt)><div class="card-body"><h5 class="card-title" id="title" contentEditable="true">Card title</h5><p class="card-text" id="desc" contentEditable="true">Some quick example text to build on the card title and make up the                     bulk of the'                    card\'s content.</p><a href="#" class="btn btn-primary" id="button"+ String(cnt) >Go somewhere</a><a href="#" class="close" onclick='deleteCard(this)'>Delete</a></div></div>`;
  document.getElementById("lastRow").innerHTML+=element;
});

function deleteCard(delBtn){
  delBtn.parentNode.parentNode.hidden = true
}

Notice for the function I added and the onclick that enables the hiding action. Here is a codeped link for you to test by your self what I did.

Hope this was helpful, any other questions will be great :)

answered Dec 1, 2020 at 19:15

Nir Gofman

1641 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

agrotis2231 Over a year ago

Thanks for your answer, i thought something similar to yours but mine was wrong :) , anyway . Sadly, I have to fire a post request , thats what the exercise is about get,post,update,delete.

Nir Gofman Over a year ago

@agrotis2231 I changed the code in Codepen with the same link. If this answer got you satisfied, Please vote :)

agrotis2231 Over a year ago

GOAT , I was trying the last 3 hours to do this . Really apreciated. I tried to upvote but it says that it wont change the status cause my account is new. Thanks again!

Collectives™ on Stack Overflow

Adding an integer to string

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related