Toggle html content with javascript

Question

With this code (JS)

<script>
  function changeText(element){
        element.innerHTML = "<span class='icon-remove3'>Content icon-remove3</span> Eliminar del pack";
         element.style.background = "#CCC";

    }   
</script>

I can change the content of the following label:

<label class="anadir_producto" for="additional_buy_{$packcontent.id_product}" onclick="changeText(this);" id="anadir"><span class="icon-4">Content Icon 4</span>Añadir al pack</label>

but the problem comes when I am trying to switch back to "Añadir al pack", since it does not toggle back.

JSFIDDLE

Any clue?

Why would it toggle back? You have no code that does so.

isherwood
– isherwood

2014-08-04 21:14:05 +00:00
Commented Aug 4, 2014 at 21:14 — isherwood
– isherwood, Commented Aug 4, 2014 at 21:14

Frank van Puffelen · Accepted Answer · 2014-08-04 21:15:03Z

2

You're never setting the original text back. Something like this is probably the simplest next step:

function changeText(element){
  if (element.innerHTML.indexOf("icon-4") >= 0) {
    element.innerHTML = "<span class='icon-remove3'></span> Eliminar del pack";
  } else {
    element.innerHTML = "<span class='icon-4'>Content Icon 4</span>Añadir al pack";
  }
  element.style.background = "#CCC";
}

See how we check what the text is, before setting the new contents? That way you can toggle between the values.

There are a lot of cleaner ways to do this, such as checking the class of the span using the DOM instead of a string comparison.

answered Aug 4, 2014 at 21:15

Frank van Puffelen

603k85 gold badges895 silver badges869 bronze badges

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

Comments

guest271314 · Accepted Answer · 2014-08-04 22:29:31Z

1

Utilizing jquery library ,

Try

(function (_o) {
  $("label.anadir_producto").on("click", function (e) {
    $(this).html(function (i, o) {
       return ( o === _o 
              ? "<span class='icon-remove3'>"
                + "Content icon-remove3"
                + "</span>Eliminar del pack"
              : _o );
    });
    return ( $("span", this).is(".icon-remove3") 
           ? $(this).css("background", "#ccc") 
           : $(this).css("background", "transparent") );
    })
}($("label.anadir_producto").html()));

http://jsfiddle.net/guest271314/5U27a/

edited Aug 4, 2014 at 22:29

answered Aug 4, 2014 at 22:20

guest271314

1

Comments

Guru3908048 · Accepted Answer · 2014-08-04 21:19:20Z

1

Else part needs to be handled to switch to original content

function changeText(element){    
    if(!element.isFlipped){
        element.innerHTML = "<span class='icon-remove3'></span> Eliminar del pack";
        element.style.background = "#CCC";
        element.isFlipped = true;
    }
    else{
        element.innerHTML = "<span class='icon-4'>Content Icon 4</span>Añadir al pack";
        element.style.background = 'none';
        element.isFlipped = false;
     }
    }

answered Aug 4, 2014 at 21:19

Guru3908048

364 bronze badges

Comments

isherwood · Accepted Answer · 2014-08-04 21:23:54Z

1

If you're using jQuery, use jQuery. :-)

http://jsfiddle.net/isherwood/U8yY8/5/

$('.anadir_producto').toggle(function() {
    $(this).html('<span class="icon-remove3">Content icon-remove3</span> Eliminar del pack');
}, function() {
    $(this).html('<span class="icon-4">Content Icon 4</span>Añadir al pack');
});

Notice that I've removed your onclick property from the HTML. It's usually better to keep things separate.

edited Aug 4, 2014 at 21:23

answered Aug 4, 2014 at 21:18

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

2 Comments

Xavi Alsina Over a year ago

But your code misses the background color from the clicked event :(

isherwood Over a year ago

True, but that would be trivial to do with a toggled class.

Collectives™ on Stack Overflow

Toggle html content with javascript

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related