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";
      }
    }
  };

Have you tried to implement this feature yourself yet? Have there been any more specific problems when doing this? — Run_Script
– Run_Script, Commented Nov 27, 2019 at 16:31
@Run_Script yeah i tried, (not sure if you mean separately in another file, i did in this file.[as a test file {code}]), and when i click it, it doesn't function, i tried with onclick too, but this time it doesn't add the column at all. — umer selmani
– umer selmani, Commented Nov 27, 2019 at 16:38

Tomasz Kasperczyk · Accepted Answer · 2019-11-27 16:39:09Z

2

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");
        }
    });

answered Nov 27, 2019 at 16:39

Tomasz Kasperczyk

2,0933 gold badges24 silver badges44 bronze badges

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

1 Comment

umer selmani Over a year ago

Thank You dude, helped me soooo much, i did try also for the card description and it worked perfectly. May God Bless you. :)

Collectives™ on Stack Overflow

How to change the text with JS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related