How to change the text with JS

Question

I am trying to modify this code, so after I create the column, and let's say I want to change the title of it, so I have the edit button, once I click that one, I want to be able to type and change the title of the column.

For the whole code click here.

  function Column(name) {
    if (name.length > 0) {
      var self = this; // useful for nested functions

      this.id = randomString();
      this.name = name;
      this.$element = createColumn();

      function createColumn() {
        var $column = $("<div>").addClass("column");
        var $columnTitle = $("<h3>")
          .addClass("column-title")
          .text(self.name);
        var $columnTitleEdit = $("<button>")
          .addClass("btn-edit")
          .text("Edit");
        var $columnCardList = $("<ul>").addClass("column-card-list");
        var $columnDelete = $("<button>")
          .addClass("btn-delete")
          .text("x");
        var $columnAddCard = $("<button>")
          .addClass("add-card")
          .text("Add a card");

        $columnDelete.click(function() {
          self.removeColumn();
        });
        $columnAddCard.click(function(event) {
          self.addCard(new Card(prompt("Enter the name of the card")));
        });
        $columnTitleEdit.click(function(event) {      //How to edit this code here so i can rename the title of the Column?
          self.editTitle();
        });

        $column
          .append($columnTitle)
          .append($columnDelete)
          .append($columnAddCard)
          .append($columnCardList)
          .append($columnTitleEdit);

        return $column;
      }
    } else if (name.length == 0) {
      alert("please type something");
      $(".create-column").click();
    } else {
      return;
    }
  }

  Column.prototype = {
    addCard: function(card) {
      this.$element.children("ul").append(card.$element);
    },
    removeColumn: function() {
      this.$element.remove();
    },
    editTitle: function() {
      if (this.$element == "true") {
        this.$element.contentEditable = "false";      //How to edit this code here so i can rename the title of the Column?
      } else {
        this.$element == "true";
      }
    }
  };

Answer 1

All you have to do is to add an event listener to the edit button. The handler should either replace the title with a textarea, or add the contenteditable attribute to the title element. Here's an example:

// ...
var $columnTitleEdit = $("<button>")
    .addClass("btn-edit")
    .text("Edit")
    .on("click", function(){ //The event listener
        if ($(this).hasClass("btn-save")){ //If we're currently editing the title
            $columnTitle.attr("contenteditable", false);
            $(this).text("Edit").removeClass("btn-save");
        } else { //If we're not editing the title
            $columnTitle.attr("contenteditable", true).focus();
            $(this).text("Save").addClass("btn-save");
        }
    });