i try to make text strikethrough with javascript. I know nothing about Javascript and try to search on the net how to that.

 <script language="JavaScript">
            function recal(val,sum)
            { 
                if(sum == true)
                {
                    var total = parseInt(document.getElementById("total").innerHTML, 10);
                    total+=val;
                    document.getElementById("total").innerHTML=total;        
                }
                else
                {
                    var total = parseInt(document.getElementById("total").innerHTML, 10);
                    total-=val;
                    document.getElementById("total").innerHTML=total;   
                    var pnl = document.getElementById("totalEvents");
                }



                var pnl = document.getElementById("totalEvents");
                var pnl2 = document.getElementById("eventCategory");
                var pnl3 = document.getElementById("nameID");

                **strikethrough starts here**
                if (!sum && pnl.firstChild.tagName != "S" && pnl2.firstChild.tagname !="S")
                {
                    pnl.innerHTML = "<S>"+ pnl.innerHTML+"</S>";
                    pnl2.innerHTML = "<S>"+ pnl2.innerHTML+"</S>";
                }
                else 
                {
                    pnl.innerHTML = pnl.firstChild.innerHTML;
                    pnl2.innerHTML = pnl2.firstChild.innerHTML;
                }



            }
        </script>

it makes textstrikethrough but something is wrong. Even if i choose second checkbox it affects first checkbox why :(

/ (my full html page)

i try to make text strikethrough with javascript. I know nothing about Javascript and try to search on the net how to that.

 <script language="JavaScript">
            function recal(val,sum)
            { 
                if(sum == true)
                {
                    var total = parseInt(document.getElementById("total").innerHTML, 10);
                    total+=val;
                    document.getElementById("total").innerHTML=total;        
                }
                else
                {
                    var total = parseInt(document.getElementById("total").innerHTML, 10);
                    total-=val;
                    document.getElementById("total").innerHTML=total;   
                    var pnl = document.getElementById("totalEvents");
                }



                var pnl = document.getElementById("totalEvents");
                var pnl2 = document.getElementById("eventCategory");
                var pnl3 = document.getElementById("nameID");

                **strikethrough starts here**
                if (!sum && pnl.firstChild.tagName != "S" && pnl2.firstChild.tagname !="S")
                {
                    pnl.innerHTML = "<S>"+ pnl.innerHTML+"</S>";
                    pnl2.innerHTML = "<S>"+ pnl2.innerHTML+"</S>";
                }
                else 
                {
                    pnl.innerHTML = pnl.firstChild.innerHTML;
                    pnl2.innerHTML = pnl2.firstChild.innerHTML;
                }



            }
        </script>

it makes textstrikethrough but something is wrong. Even if i choose second checkbox it affects first checkbox why :(

http://jsfiddle.net/aHH9w/ (my full html page)

• javascript

• how you organized the markup? Maybe it's possibile to achieve the same effect using css only (or less javascript) – Fabrizio Calderan Commented Feb 21, 2012 at 10:03
• Can you post your html and script on jsfiddle.net ? also what's with the firstchild? there are simpler and safer ways such as object.getElementsBytagName("s").length>0 – mplungjan Commented Feb 21, 2012 at 10:04
• With JS Fiddle: put the rendered/output html into the html panel, the css into the css panel and the JavaScript into the JavaScript panel. You only need the contents enclosed within the body tag for the HTML. – David Thomas Commented Feb 21, 2012 at 10:13

1 Answer 1

You are peforming a pretty convoluted way of achieving this, something that can actually be quite easily done. If you have an HTML element, say with the id 'myelement':

<div id="myelement">Hello world</div>

To create a strikethrough, all you need to do in JS is:

var ele = document.getElementById("myelement");
ele.style.setProperty("text-decoration", "line-through");

If you need to check if there is a strikethrough on an element:

var ele = document.getElementById("myelement");
var isStruck = (ele.style.getProperty("text-decoration") == "line-through");

Although this is not really recommended. Use an internal variable to keep track of state.