Change data id onclick

Question

I need to change data-matchId value when user clicks a button. I can get value on click but can not set it to data-matchId.

HTML Part:

<script id="betradar" type="text/javascript" data-matchId="" src="http://cs.betradar.com/ls/widgets/?/universalsoftwaresolutions/tr/Europe:Istanbul/widgetloader/widgets"></script>

JavaScript Part:

$('.livemenumatch').click(function() { 
        clearInterval(refreshIntervalId);
        var id = $(this).attr('data-id');
        var betradar = $(this).attr('data-betradar');
        localStorage.setItem("lastid", id);
        $.ajax({
            url: '<?php echo site_url('canli'); ?>/' + id,
            type: 'POST',
            data: { 'submit': true },
            success: function(data) {
                
                $("#matchDetails").html(data);
                $("#betradar").attr('data-matchId' , betradar);
            },
        }); 
    
        var lastid = localStorage.getItem('lastid', lastid);
        refreshIntervalId = setInterval(function() {
            refreshDiv(lastid)
        }, 3000);  
    });

I know, giving id value to script tag can be foolish but I tried a few ways and couldn't find any solution about it. For example; I tried to return HTML after success(Check JS code please) but it failed too.

Thanks in advance.

Edit 1:

I tried another way to fix it, now I changed my HTML part to this:

<div id="track"></div>

And change JavaScript part to this:

var betradar = 'somemanualid';
$("#track").html('<script type="text/javascript" data-matchId="'+ betradar +'" src="http://cs.betradar.com/ls/widgets/?/universalsoftwaresolutions/tr/Europe:Istanbul/widgetloader/widgets">');

Now, it gives error on widget. It's strange 'cause when I put

<script type="text/javascript" data-matchId="someidhere" src="http://cs.betradar.com/ls/widgets/?/universalsoftwaresolutions/tr/Europe:Istanbul/widgetloader/widgets">

part directly on HTML, working perfect.

Edit 3:

I'm sharing all HTML and JS part:

live.php page:

<body style="">


<div id="loading" style="display: none;">
    <span class="imgload"></span>
</div>
<!-- Header -->
<?php $this -> load -> view('user/headerMenu'); ?>
<!-- End of Header -->

<!-- Content -->
<div class="content-pro shade">
    <div class="content-pro3">
        <div class="content-row">
            <!-- Left -->
            <div class="content-left">
                <div id="liveMenu">
                    
                </div>
                

            
            </div>
            <!-- Center -->
            
            <div class="lmt-container" style="width: 98%"></div>
            <div id="matchDetails">
            </div>
            
            <!-- End of Center -->
            <!-- Right -->
            <div class="content-right">
                <div id="coupon_block">

                    <div class="kupon-pro-fixed">
                        <div class="kupon-pro">
                            <div class="loading">
                                <div class="imgload"></div>
                            </div>
                            <!-- Kupon Title -->
                            <div class="kupon-titlewrap bordertop">
                                <div class="kupon-title bordertop">
                                    <span class="glyphicon glyphicon-list"></span><h1>Bahis Kuponu</h1>
                                    <a onclick="setCouponPosition(this);" class="change-static" title="Kuponu sabitle"></a>
                                    <span class="badge"><span id="coupon_count"></span> Seçim</span>
                                </div>
                            </div>
                            <!-- // Kupon Title -->

                            <!-- Kupon Empty -->
                            <div class="kupon-pro-empty borderbottom">
                                <p class="pad10">
                                    <span class="glyphicon glyphicon-info-sign font12"></span> Bahis yapmak için bir seçim yapmanız gerekir
                                </p>
                            </div>
                            <!-- // Kupon Empty -->

                        </div>
                    </div>
                </div>
                <div class="right-area">

                </div>
            </div>
            <!-- End of Right -->

            <span id="lbl_collapse" style="display:none;">Tümünü Kapat</span>
            <span id="lbl_expand" style="display:none;">Tümünü Aç</span>
            <span id="lbl_betgroup" style="display:none;">Bahis Grubu Seçin</span>
            <span id="lbl_betgroupall" style="display:none;">Bütün Bahisler</span>
            <span id="lbl_game" style="display:none;">Oyun</span>
            <span id="lbl_all" style="display:none;">Hepsi</span>
        </div>
    </div>
</div>
<!-- End of Content -->



<script type="text/javascript">
  SRLive.addWidget('widgets.lmts', {
    container: '.lmt-container',
    showPitch: 'true',
    showScoreboard: 'true',
   showMomentum: 'true',
      sidebarLayout: 'dynamic'// 'dynamic' | 'bottom'>
  });
</script>



<script type="text/javascript">
    $(document).ready(function() {
        setInterval(function() {
            $.ajax({
                url: '<?php echo site_url('canliMenu'); ?>/',
                type: 'GET',
                data : "",
                success: function(data)
                {
                    if(data!=null)
                    $("#liveMenu").html(data);
                },

                error: function (data)
                {
                    console.log(data);
                }
            })
        }, 1000);
    });
</script>

</body>

liveMenu.php file:

<div class="livenow-menuwrap">
                    <div class="livenowalt-title bordertop">
                        <h1>Şu An Canlı</h1><span class="badge">24</span>
                    </div>
                    <div class="livenowmenu-content">
                        <ul id="livemenu" class="navprolivenowalt">
                            <li id="lvm-1" class="menuc1 open sportm-order-1">
                                <a href="javascript:void(0)" onclick="liveMenuToggle(this)" class="live-theme1"><span class="sportmain"> <i class="sporttype1"></i></span> Futbol <span class="badge">12</span></a>
                                <ul id="sportm-ct-1">
                                    
                                    <?php foreach($liveList as $countryName => $rows) { ?>
                                    <li id="lvm-1-175" class="menuc2 active open countrym-order-9999">
                                        <a href="javascript:void(0)" onclick="liveMenuToggle(this)"><span class="flagmain"><i class="flag115"></i></span> <?php echo $countryName; ?></a>
                                        <ul id="countrym-fix-1-175">
                                            <?php foreach($rows as $m) { ?>
                                            <li class="fix-season-19182" id="lvmfix-2547028">
                                                <a data-id="<?php echo $m['matchId']; ?>" data-betradar="<?php echo $m['betradarId']; ?>" class="livemenumatch" id="lmi-2547028"> 
                                                    <span class="livenow-teams"><?php echo $m['homeTeam']; ?> - <?php echo $m['visitorTeam']; ?></span> 
                                                    <span class="livenow-scoreinfo" id="fix-spm-2547028"> 
                                                    <span class="livenow-inscore"><?php echo $m['score']; ?></span> 
                                                    <span class="livenow-inscore"><?php echo $m['minute']; ?></span> 
                                                    <span class="livenow-inscore"><?php echo $m['timeDetail']; ?></span>
                                                    </span> 
                                                </a>
                                            </li>
                                            <?php }?>
                                        </ul>
                                    </li>
                                    <?php }?>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
                
<script type="text/javascript">
    function refreshDiv(id){
        
    $.ajax({
        url: '<?php echo site_url('canli'); ?>/' + id,
        type: "GET",
        data : "",
        success: function(data)
        {
            if(data!=null)
            $("#matchDetails").html(data);
        },
       
        error: function (data)
        {
            console.log(data);
        }
    });

    }
    var refreshIntervalId;
        $('.livemenumatch').click(function() { 
            
            clearInterval(refreshIntervalId);
            var id = $(this).attr('data-id');
            
            localStorage.setItem("lastid", id);
            $.ajax({
                url: '<?php echo site_url('canli'); ?>/' + id,
                type: 'POST',
                data: { 'submit': true },
                success: function(data) {
                    
                    $("#matchDetails").html(data);
                    

                },
            }); 
        
            var lastid = localStorage.getItem('lastid', lastid);
            refreshIntervalId = setInterval(function() {
                refreshDiv(lastid)
            }, 3000);  
        });
</script>

liveDetail.php file:

            <div class="content-center" id="liveDiv">
                <div class="livescoreboard livescoreboard36" style="" id="livescoreboard">
                    <div class="livescoreboard-title accordion-toggle pointer" data-toggle="collapse" data-target="#livescore-close">
                        <span class="live-event-league"><span class="flagmain"><i class="flag252 margin0"></i></span> &nbsp;&nbsp;<?php echo $liveDetail['country']; ?></span>
                        <span class="live-event-hometeam"><?php echo $liveDetail['homeTeam']; ?></span>
                        <span class="live-event-scorenow"><?php echo $liveDetail['score']; ?></span>
                        <span class="live-event-awayteam"><?php echo $liveDetail['visitorTeam']; ?></span>
                        <span class="live-event-start"><span class="glyphicon glyphicon-time"></span> <?php echo $liveDetail['date']; ?></span>
                    </div>

                    <div class="livescoreboard-headwrap" style="display: none;">
                        <div class="livescoreboard-headlink">
                            <ul>
                                <li>
                                    <a href="javascript:void(0)" class="nohref video_lbl active" onclick="toggleVideo(this, 'graphic')"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Canlı Grafik</a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="nohref video_lbl" onclick="toggleVideo(this, 'video')"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span> Canlı Video</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="livescoreboard-content collapse in" id="livescore-close">
                        <div class="lmt-container"></div>
                        <script type="text/javascript" data-matchId="8047580" src="http://cs.betradar.com/ls/widgets/?/universalsoftwaresolutions/tr/Europe:Istanbul/widgetloader/widgets"></script>
                        <script type="text/javascript">
                          SRLive.addWidget('widgets.lmts', {
                            container: '.lmt-container',
                            showPitch: 'true',
                            showScoreboard: 'true',
                           showMomentum: 'true',
                              sidebarLayout: 'dynamic'// 'dynamic' | 'bottom'>
                          });
                        </script>
                    </div>

                </div>
                <div id="divOrta">
                    <div class="live-event-rate-well">
                        <div class="live-event-actions-title">
                            <div class="pull-left">
                                <div class="live-events-actions-column">
                                    <ul>
                                        <li>
                                            <a onclick="openAllFixture()"><span class="glyphicon glyphicon-chevron-down"></span> Tümünü Aç</a>
                                        </li>
                                        <li>
                                            <a onclick="closeAllFixture()"><span class="glyphicon glyphicon-chevron-up"></span> Tümünü Kapat</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            
                        </div>
                        <div class="live-event-bettype-title" style="display: none;">
                            <span class="pull-left">undefined</span><span class="pull-right"><a class="close-icon-sm clsoe-white" onclick="closeGroupMarketLine()"></a></span>
                        </div>
                        <div class="double-view">
                            <?php foreach($liveDetail['odds'] as $odds) { ?>
                            <div class="sub-main-well-live btg-order-1" id="fx-btg-<?php echo $odds['orderNo']; ?>">
                                <div class="sub-rate-title" data-toggle="collapse" data-target="#ac-kapa-sub-rate-<?php echo $odds['orderNo']; ?>">
                                    <span><?php echo $odds['oddType']; ?></span>
                                </div>
                                <div class="close-open in" id="ac-kapa-sub-rate-<?php echo $odds['orderNo']; ?>">
                                    <div class="sub-fixturelayout">
                                        <ul>
                                            <li>
                                                <div class="fixturelayout-rate">
                                                    <ul>
                                                        <li id="btg-odd-<?php echo $odds['orderNo']; ?>">
                                                            <?php echo $odds['odd']; ?>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <?php }?>
                        </div>
                    </div>
                </div>
            </div>

Possible duplicate of [jQuery .data() does not work, but .attr() does](http://stackoverflow.com/questions/8707226/jquery-data-does-not-work-but-attr-does) — Szabolcs Páll, Nov 17 '15 at 10:42
I don't see any error in your code. It should be working. Did you try to debug what you are getting for "var betradar" ? — Imrul.H, Nov 17 '15 at 10:58
Deniz, have you checked the success function? Maybe Ajax does not turn with success. check it by console.log("success"); — Kamuran Sönecek, Nov 17 '15 at 11:00
@KamuranSönecek I already checked it, there is nothing wrong with it. — Deniz B., Nov 17 '15 at 11:02
can u please try to use `.getScript` instead of `.html` and see if it works. — Harry Bomrah, Nov 17 '15 at 11:05
after you get value ```var betradar = $(this).attr('data-betradar');``` check betradar variable on console — Kamuran Sönecek, Nov 17 '15 at 11:10
@KamuranSönecek I already checked it too, I can get values right :) — Deniz B., Nov 17 '15 at 11:11
@KamuranSönecek I thought about it but there are lots of pages and it'll be to hard for everyone if I share it here. — Deniz B., Nov 17 '15 at 11:28

score 1 · Answer 1 · answered Sep 24 '22 at 20:49

You can do this like this:

let something = document.getElementById("something");
something.addEventListener('click', function(){
    something.id = 'something2'
  console.log(something);
});

<a id="something">something</a>

let me know if this work for you.

score 0 · Answer 2 · answered Nov 17 '15 at 11:22

0

I think its jquery which is not executing your script. Try pure js

t = document.getElementById("track")
var tag = document.createElement('script');
tag.setAttribute("data-matchId", "somethingHere");
tag.setAttribute("id","dynamic-script");
tag.src = "http://cs.betradar.com/ls/widgets/?/universalsoftwaresolutions/tr/Europe:Istanbul/widgetloader/widgets"; 
t.appendChild(tag);

See if this helps

answered Nov 17 '15 at 11:22

Harry Bomrah

1,658
1
11
14

I couldn't see any error on console but couldn't see the code too. – Deniz B. Nov 17 '15 at 11:32
I tried and i can see the code with the above script. – Harry Bomrah Nov 17 '15 at 11:38
There is something wrong but I couldn't find. It's strange. – Deniz B. Nov 17 '15 at 11:40
Share your whole js and html. Might help to debug – Harry Bomrah Nov 17 '15 at 11:44
I tried another way. With this way I'm calling content with Ajax call, codes are appearing correctly but not working. I think it happening because of that Ajax call thing, how can I fix it do you have any idea? – Deniz B. Nov 17 '15 at 11:44
Also try to check **net** section of your browser. see if it is actually getting anything from the server. – Harry Bomrah Nov 17 '15 at 11:45
Can you paste your ajax call method so i know more. – Harry Bomrah Nov 17 '15 at 11:46
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/95340/discussion-between-harry-bomrah-and-deniz-b). – Harry Bomrah Nov 17 '15 at 11:56

score 0 · Answer 3 · answered Feb 02 '17 at 09:54

Instead of loading matchId betradar, just add parameter into addWidget.

Instead of:

<script type="text/javascript" data-matchId="id" src="http://cs.betradar.com/ls/widgets/?/universalsoftwaresolutions/tr/Europe:Istanbul/widgetloader/widgets">

use:

<script type="text/javascript" src="http://cs.betradar.com/ls/widgets/?/universalsoftwaresolutions/tr/Europe:Istanbul/widgetloader/widgets">

And then do:

  SRLive.addWidget('widgets.lmts', {
    container: '.lmt-container',
    showPitch: 'true',
    showScoreboard: 'true',
    showMomentum: 'true',
    sidebarLayout: 'dynamic',
    matchId: <<yourIdHere>>
  });

score 0 · Answer 4 · answered Mar 22 '22 at 18:56

If I understand correctly you are trying to change an attribute, we can do it in two ways.

JQuery:

// Wait until page is loaded
$(document).ready(function(){
  // When the page is fully loaded, we listen for the click element of the element with id button.
  $("#button").click(function(){
    // We set the width attribute of the element with the img id to 500.
    // That need work for your problem
    $("#img").attr("width", "500");
  });
});

Pure JS:

// Select element
const element = document.getElementById('img');
// We're setting the width attribute 500.
element.setAttribute("width","500");

I hope this solves your problem.

score 0 · Answer 5 · answered Apr 13 '22 at 16:01

0

If you just want to change the ID, it's simple—first get a reference to your element, and then add an onclick() method.

var myElem = document.getElementById("demo");
myElem.onclick = function() {
    myElem.id = "otherId";
}

answered Apr 13 '22 at 16:01

JohnmanJohnston

38
1
6

rakeshboliya · Answer 6 · 2022-07-29T09:12:35.177

Change attribute value using jquery and javascipt

$(document).ready(function(){
  $("button").click(function(){
    $("div").attr("data-id", "newid");//jquery
    document.getElementById("myid").setAttribute("data-name", "rakesh");//javascript 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div data-id="oldid">Hello Good Morning</div>
<h1 id="myid" data-name="peter">Hello User</h1>
<button>Set attribute</button>

score 0 · Answer 7 · answered Aug 13 '22 at 00:03

I tried this and It's working fine. Try this

$('.livemenumatch').click(function() { 
        var id = $(this).attr('data-id');
        var betradar = $(this).attr('data-betradar');
        $.ajax({
            url: 'https://reqres.in/api/users?page=2',
            type: 'POST',
            data: { 'submit': true },
            success: function(data) {
                
                $("#matchDetails").html(data);
                $("#betradar").attr('data-matchId' , betradar);
            },
        }); 
    });

    <div id="matchDetails"></div>
<button class="livemenumatch" data-id="1" data-betradar="xyz">Change</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script id="betradar" type="text/javascript" data-matchId="" src="http://cs.betradar.com/ls/widgets/?/universalsoftwaresolutions/tr/Europe:Istanbul/widgetloader/widgets"></script>

score 0 · Answer 8 · answered Aug 14 '22 at 02:05

0

try to set both attr and data:

$("#betradar").attr('data-matchId' , betradar).data('matchId', betradar);

answered Aug 14 '22 at 02:05

Seyed Morteza Hosseini

392
1
5
18

score 0 · Answer 9 · answered Sep 08 '22 at 06:44

0

$("button").on('click',function(){
  $("#myid").attr("data-id", 2);//jquery
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h1 id="myid" data-id="1">Hello</h1>
<button>Click</button>

answered Sep 08 '22 at 06:44

Mitali Patel

395
2
9

score 0 · Answer 10 · answered Nov 16 '22 at 11:57

You can change attribute value using jQuery

$(document).ready(function(){
  $("#changeattr").on('click',function(){
  var genterateUniqueId = Date.now(); //TimeStamp
    $(".myselector").attr("data-attr", genterateUniqueId);//javascript
  });
});
console.log()

.myselector:after{
content: attr(data-attr);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myselector" data-attr="oldattr">Attribute:</div>
<button id="changeattr">Event Listener</button>

score 0 · Answer 11 · answered Nov 17 '22 at 13:59

For change the id of element to use below code :

<div class="div" id="dv1"></div>
<br>

<button onClick="ChangeId()">Change Id</button>
  
<script>                     
    function ChangeId() {
        document.getElementById('dv1').id = 'dv2';
    }
</script>

score 0 · Answer 12 · answered Dec 10 '22 at 17:13

0

Change Images  in javascript
<botton onclick="imgOne" type="button">Image 1<button>
<botton onclick="imgTwo" type="button">Image 2<button>
<img src="#" id="img">
<script>
    var img = document.getElementByID("img");
     function imgOne(){
     img.src ="image1.jpg";
     }
     function imgTwo(){
     img.src ="image2.jpg";
     }
</script>

answered Dec 10 '22 at 17:13

Rejwan Sharif

1
3

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 14 '22 at 15:48

Change data id onclick

12 Answers12