Change div id by button click with Jquery attribute

Question

Trying to use .click with buttons to control the id of a div...

<button type="button" id="1" class="this">
  first
</button>
<button type="button" id="2" class="this">
  second
</button>
 <div id="id1"></div>



<script>
jQuery(document).ready(function($) {
    $('.this').click(function() {
        $(this).attr('#id1', '#id2');
    });
});
</script>

Just trying to learn jquery... need to change the div id from id="id1" to id="id2" when the second button is clicked.

Possible duplicate of [Changing an element's ID with jQuery](https://stackoverflow.com/questions/347798/changing-an-elements-id-with-jquery) — roberrrt-s, Nov 22 '17 at 12:38

ProEvilz · Answer 1 · 2017-11-22T12:46:27.180

You almost had it!

When using attr(), you do not need the hashtag symbol for the selector part and unless you literally want a hashtag in the ID that you're setting then you don't need it their either.

jQuery(document).ready(function($) {
    $('.this').eq(1).on('click', function(){
      $('#id1').attr('id', 'id2');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="1" class="this">
  first
</button>
<button type="button" id="2" class="this">
  second
</button>
 <div id="id1"></div>

score 0 · Answer 2 · answered Nov 22 '17 at 12:40

the attr() function's syntax requires the name of the attribute as the first parameter, not the current value:

jQuery(document).ready(function($) {
    $('.this').click(function() {
        $(this).attr('id', 'id2');
    });
});

p.s. this is a keyword, you should try not to use it as classname, that is bound to cause confusion.

caramba · Answer 3 · 2017-11-22T12:59:34.077

See comments in code for explanation

jQuery(document).ready(function($) {
    $('.this').click(function() {
        // you need to check if you clicked on the seccond button
        if('2' === $(this).attr('id')) {  // if seccond button
            $('#id1').attr('id', 'id2');  // change the id of id1
        }
    });
});

div {
  width: 100px;
  height: 100px;
}

#id1 {
  background-color: orange;
}

#id2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="1" class="this">
  first
</button>
<button type="button" id="2" class="this">
  second
</button>
 <div id="id1"></div>

Now because it's not the best approach to code like that (maintanability) and you might want to turn the id2 back to id1 you could do something like this:

jQuery(document).ready(function($) {
    $('[data-toggle-id]').click(function() {
        $('.toggle-me').attr(
            'id',
            $(this).attr('data-toggle-id')
        );
    });
});

div {
  width: 100px;
  height: 100px;
}

#id1 {
  background-color: orange;
}

#id2 {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-toggle-id="id1">
  first
</button>
<button type="button" data-toggle-id="id2">
  second
</button>
 <div id="id1" class="toggle-me"></div>

score 0 · Answer 4 · answered Nov 22 '17 at 12:41

0

Change the attribute parameter as in below code:

$(document).ready(function(){
$('.this').click(function() {
    $("#id1").attr('id', 'id2');
}); });

answered Nov 22 '17 at 12:41

Pragna

470
1
3
18

score 0 · Answer 5 · answered Nov 22 '17 at 12:46

<script  src="https://code.jquery.com/jquery-3.2.1.js"   integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>
<button type="button" id="1" class="this">
  first
</button>
<button type="button" id="2" class="this">
  second
</button>
<div id="id1"></div>

<script>
jQuery(function() {
    $('#2').click(function() {
       $('#id1').attr('id', 'id2');
    });
});
</script>

SilverSurfer · Answer 6 · 2017-11-22T13:18:57.253

0

The proper way to change an attribute is next:
$("mySelector").attr("attrName","newValueIWant")

I made and example for you, hope it helps:

jQuery(document).ready(function($) {

    console.log("Before click:")
    console.log("ID div: "+$("div").attr("id"))
    
    $("button#2").click(function() {
         $("#divId1").attr('id', 'divId2');
         console.log("After click:")
         console.log("ID div: "+$("div").attr("id"))
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="1" class="this">
  first
</button>
<button type="button" id="2" class="this">
  second
</button>
 <div id="divId1"></div>

edited Nov 22 '17 at 13:18

answered Nov 22 '17 at 12:50

SilverSurfer

4,281
6
24
50

Even though this works, it's bad practice to make the HTML order responsible for what should happen. Especially when the element contains the `id` with the information you're after. – caramba Nov 22 '17 at 12:56
Yes but this will work for the example he need. He specified change the id by clicking the second button, and after that they will have same id, wich is not reccomended. – SilverSurfer Nov 22 '17 at 13:02
No they will not have the same id. The button is `id="2"` and the div has `id="id2"`. But either way, what I was saying is, you can get on which button he clicked in many other (BETTER) ways then with `eq()` – caramba Nov 22 '17 at 13:12
Thats true thanks, I didnt read well the question, I have updated my answer. – SilverSurfer Nov 22 '17 at 13:21

Change div id by button click with Jquery attribute

6 Answers6