CODEWITHSUNDEEP
javascript
Developer
Developer

Reputation: 2706

How to replace a Html Tag?

Please check my code:

<div id="seconds">
  <a onclick="ChangeRefreshSeconds(15,this);" href="javascript:;">15</a>
  <b><span style="background-color:yellow;">30</span></b>
  <a onclick="ChangeRefreshSeconds(60,this);" href="javascript:;">60</a>
  <a onclick="ChangeRefreshSeconds(120,this);" href="javascript:;">120</a>
</div>

My current number is 30 When i click on the number 60 it should be-

<div id="seconds">
  <a onclick="ChangeRefreshSeconds(15,this);" href="javascript:;">15</a>
  <a onclick="ChangeRefreshSeconds(30,this);" href="javascript:;">30</a>
  <b><span style="background-color:yellow;">60</span></b>
  <a onclick="ChangeRefreshSeconds(120,this);" href="javascript:;">120</a>
</div>

Javascript:

<script>
function ChangeRefreshSeconds(s,t){
    //t.innerHTML='<span style="background-color:yellow;">'+s+'</span>';
    var textnode=document.createTextNode('<span style="background-color:yellow;">'+s+'</span>');
    t.replaceChild(textnode,t);
}
</script>

I am sure that i have written my JavaScript code in the wrong way.

Please solve my above code.

Upvotes: 1

Views: 84

Answers (4)

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

Following is my approach, try out this

function ChangeRefreshSeconds(event){
    event = event || window.event;
    var seconds = document.getElementById('seconds');
    var anchors = seconds.getElementsByTagName('a');
    
    var i;
    for (i = 0; i < anchors.length; i++) {
        anchors[i].className = '';
    }
   
    event.target.className = 'active';
}
.active {
    background-color:yellow;
}
<div id="seconds">
  <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">15</a>
  <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">30</a>
  <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">60</a>
  <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">120</a>
</div>

Upvotes: 0

Erik Terwan
Erik Terwan

Reputation: 2780

Something like this would be a lot easier with jQuery, if you have the possibility to use it, i would definitely advise you to.

As far as i can see your code only changes to <span> and doesn't change the already changed <span's> back to <a>. I assumed that's what you wanted? The piece of code for this script (in jQuery) would look something like:

$("div#seconds a").click(function(){
    var originalValue = $(this).html();
    var spanValue = $("b span", $(this).parent()).html();

    $("b", $(this).parent()).replaceWith('<a href="javascript:;">'+spanValue+'</a>');
    $(this).replaceWith('<b><span style="background-color:yellow;">'+originalValue+'</span></b>');
});

Upvotes: 1

azero0
azero0

Reputation: 2310

try this:

<script>
    function ChangeRefreshSeconds(s,t){
        var textnode=document.createTextNode('<span style="backgroundcolor:yellow;">'+s+'</span>');
        t.parentNode.replaceChild(textnode,t);
     }
 </script>

Upvotes: 0

dfsq
dfsq

Reputation: 193311

You can replace tags for sure. But you don't have to do that. It's much simple and less obtrusive to go with just CSS approach. With CSS when you have class active you have great deal of flexibility to style currently selected item whatever you want. 

function ChangeRefreshSeconds(seconds, obj) {

    // do nothing if it's already active
    if (obj.className === 'active') return;

    var a = document.getElementById('seconds').children;
    for (var i = 0; i < a.length; i++) {
        a[i].className = '';
    }
    obj.className = 'active';

    // do something else
    alert('Current seconds: ' + seconds);
}
#seconds .active,
#seconds .active:active {
    background: yellow;
    cursor: default;
    color: #333;
    font-weight: bold;
}
<div id="seconds">
    <a onclick="ChangeRefreshSeconds(15, this);" href="javascript:;">15</a>
    <a onclick="ChangeRefreshSeconds(30, this);" href="javascript:;" class="active">30</a>
    <a onclick="ChangeRefreshSeconds(60, this);" href="javascript:;">60</a>
    <a onclick="ChangeRefreshSeconds(120, this);" href="javascript:;">120</a>
</div>

Upvotes: 1

Related Questions