Change button Striketrough javascript

374 views Asked by At

I have this web application where you can make to do items. What I want is that when you check the check box, that the text field gets stroked through.

When you then press the add todo button, there is a new item made in JavaScript. Now when you press the check box (Which called button) is pressed, the text field should be stroked. How can I achieve this?

Thanks in advance!

this is the part of my html where the todo's come.

<div class="items">

                <h3>Items</h3>

                <div id="itemList">
                </div>

                <button id="addItem" >Add Item</button>

            </div>

this is my kind of constructor for an new item

function item(content, list) {
    /* Global attributes */
    this.content = content;
    this.checked = false;
    this.id = 0;
    this.settings = new Settings();
    this.element = $("<div>");
    /* Local attributes */
    var button = $("<input type='checkbox' Class='inputCheck'>"); 
        button.appendTo(this.element);
    var text = $("<input type='text'>"); 
        text.appendTo(this.element); text.val(content);
    var edit = $('<button>Edit</button>'); 
        edit.appendTo(this.element);
    var deleteButton = $('<input type=\'image\' src=\'Images/trash.png\' height=\'20\' width=\'20\'>'); 
        deleteButton.appendTo(this.element);
    var thisObject = this;


    /* Appending item */
    list.addItem(this);
    text.attr("disabled", true);
}

(edit)

when i press the add todo item button, this function is called:

$("#addItem").click(function(event){
    var newItem = new item("Default message", listSelected);
});

and when this method is called, the current object (called thisObject) checkbox is changed to the opposite. Here should also the text get strikethrough

button.click(function() {
    thisObject.checked = button.is(":checked");
    //thisObject.text => strike
});
1

There are 1 answers

1
Michael Coker On BEST ANSWER

The code you provided doesn't appear complete, but to make text striked through, you use the CSS text-decoration: line-through;.

You can enable using checkboxes to strike text in an adjacent text input field (using your HTML structure) this way input[type="checkbox"]:checked + input[type="text"].

You can also apply a class to the element you want to strike, and manipulate the element's class (applying strike or removing it) dynamically via Javascript in your application.

Since you're using jQuery, here's an example of how you can strike text by checking a checkbox (pure CSS) or by clicking a button (javascript/jQuery) - http://codepen.io/anon/pen/PWoaYZ