1
     <script>
$(document).ready(function(){
    
$(this).on("click", "#add", function(){
    
var html =  '  <div id="trav"><div class="adults"><p>Adults</p><div class="buttons"><button id="minusone" type="button">-</button> <p class="stspan"><span id="1stspan">1</span></p><button id="addone" type="button">+</button>        </div> </div><div class="children"><p>Children</p><p class="ages">(Ages 2-17)</p>                 <div class="buttons"><button id="minusone1">-</button> <p class="stspan"><span id="1stspan1">0</span></p><button id="addone1" >+</button>   </div></div>';
html += '<button id="add">Add another room + </button><button id="remove">Remove</button></div>'    
    
  $("#counter").append(html);
    let input1 = document.querySelector('#inp5'); 
  input1.value = parseInt(input1.value) + 1 + "rooms"   

    
}); 
    

This is an appended div I want to change <p class="stspan"><span id="1stspan">1</span></p> appended element's innerHTML on button click. So I tried this

 $('#counter').on('click', '#addone', function(){
    
    var valueCount
    
    valueCount = document.getElementById("1stspan").innerHTML;
    
    //input value increment by 1
    valueCount++;
    
    //setting increment input value

    document.getElementById("1stspan").innerHTML= valueCount 
    
   
});    

This works, but it changes the innerHTML of the initial span, but I need to change innerHTML of the appended span

1
  • 2
    Where is #addone and #counter in the html? Dec 25, 2020 at 6:38

3 Answers 3

2

Is this what you are trying to do?

$(function(){
    $("#addone").click(function(){
      $("#1stspan").text( Number($("#1stspan").text()) + 1 );
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:void(0)" id="addone">Add One</a>
<p class="stspan"><span id="1stspan">1</span></p>

1

Try the below one

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script>
function onCounterClick(){
valueCount = document.getElementById("1stspan").innerHTML;
valueCount++;
document.getElementById("1stspan").innerHTML=valueCount;
}
</script>
</head>
<body>
<p class="stspan"><span id="1stspan">1</span></p>
<button id="counter" onclick="onCounterClick()">counter</button>
</body>
</html>
1

I assume that you have the following HTML.

<p class="stspan"><span id="1stspan">1</span></p>

<button id="counter">Increment</button>

Here is the updated jQuery code for it.

$('#counter').on('click', function(){
  var valueCount;
  valueCount = document.getElementById("1stspan").innerHTML;

  //input value increment by 1
  valueCount++;

  //setting increment input value
  document.getElementById("1stspan").innerHTML= valueCount 
});

I've removed #addone from on.

Suggestion: If you're using jQuery, then what not use $("#1stspan") and .val()?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.