CODEWITHSUNDEEP
jqueryhtml
anu
anu

Reputation: 1007

change inner html using Jquery not working

I have a table with "tokens" (characters). I would like to move the tokens from one td to another, if the td's span is empty.

In the first step when I click on the td with content in it, I highlight the td

In the next step when I click on the td where I want the token to move, I add the token to this td's span's inner HTML and empty the previously clicked td's span's children.

Simple enough. The JSFiddle is what I came up with, I thought, would work, but it does not.

https://jsfiddle.net/abyu3sg9/5/

The code executes, but the innerHTML in the spans don't change.

I don't understand why not.

Upvotes: 0

Views: 180

Answers (3)

Benjamin Ray
Benjamin Ray

Reputation: 1870

The issue is when you try to set the value here:

$($(this).html()).html(lastclickedcontent);

$(this).html() returns a string, which in the case of the second box will be:

<span></span>

Calling $("some html"), which you are doing with the outer $(), creates a new DOM object with the content "some html". Then you are setting the HTML of that new DOM object to x", when you really want to be setting the value of the span inside the TD that was clicked (which is $(this)).

I made a couple of small changes to your fiddle and the sample below works:

var lastclicked = null;
var lastclickedcontent = null;
$(document).ready(function () {
    $(".clickme").click(function (event) {
        var tilecontent = $(this).children('span')[0].innerHTML;
        if (tilecontent.length > 0) {
            $(this).css('background', 'lightgreen');
            lastclicked = $(this);
            lastclickedcontent = tilecontent;
            $('p').html("GREAT! now click on the empty cell!");
        } else {
            if (lastclicked !== null) {
                $(this).children('span')[0].innerHTML = lastclickedcontent;
                //$($(this).html()).html(lastclickedcontent);
                $(lastclicked).children('span')[0].innerHTML = '';
                lastclicked.removeAttr('style');
                $('p').html("Awesome! Your token should have moved!");
            }
        }
    });
});

https://jsfiddle.net/BenjaminRay/Lo9fdL1s/

Upvotes: 1

Wesley Smith
Wesley Smith

Reputation: 19571

I would use localStorage for this, here is a working jsFiddle

BTW, this method preserves your spans and it lets you move the token between multiple tds

localStorage.removeItem("lastclickedIndex");
$(document).ready(function(){
    $(".clickme").click(function(event){
        if(localStorage.getItem("lastclickedIndex") !== null && $(this).find('span').html()==''){
            var last = localStorage.getItem("lastclickedIndex");
            $(this).find('span').html( $(".clickme").eq(last).find('span').html());
            $(".clickme").eq(last).removeClass('lgrn');
            $(".clickme").eq(last).find('span').html('');
            $(this).addClass('lgrn');
            localStorage.removeItem("lastclickedIndex");
        }
        else if($(this).find('span').html()!=''){
            localStorage.setItem( "lastclickedIndex", $(".clickme").index( $(this) ) );
            $('clickme').removeClass('lgrn');
            $(this).addClass('lgrn');
        }
    });
});

Upvotes: 0

Dylan Corriveau
Dylan Corriveau

Reputation: 2557

Since I got more clarification on what you were trying to do, you shouldn't be using html at all. You should be looking for Children elements. Change this:

$($(this).html()).html(lastclickedcontent);

To this:

$(this).children("span")[0].innerHTML=lastclickedcontent;

Upvotes: 0

Related Questions