CODEWITHSUNDEEP
javascriptjqueryhtmlclickappend
Allenph
Allenph

Reputation: 2015

Appending text to text area on click?

JavaScript (jQuery):

$("#content-styling-bar td").click(function() {
  if ($(this).text() == "Bold ") {
    $("#description").append("<b></b>");
  }
});

HTML:

<table id="content-styling-bar">
          <tr>
            <td>
              Bold
            </td>
            <td>
              Italic
            </td>
            <td>
              Underline
            </td>
            <td>
              Main Heading
            </td>
            <td>
              Sub Heading
            </td>
            <td>
              Link
            </td>
            <td>
              Image
            </td>
          </tr>
        </table>

I have this code. This code is for a site's blog administration. The idea is that when I click on the bold table cell, jQuery gets the text contained in that table cell, and then the script determines which tag-set to append to the textarea.

I prefer the method of comparing the text within the cells to adding unique functions to the onclick parameter of each cell because I'd like to keep my code DRY, and that would involve creating a bunch of functions to do basically the same thing, or adding a lot of onclick attributes that aren't needed.

I have verified with an elert that I'm indeed getting the text "Bold" when I call $(this).text(), but it doesn't seem to satisfy the if statement.

What is the issue with my JavaScript?

Upvotes: 0

Views: 158

Answers (2)

Shirin Abdolahi
Shirin Abdolahi

Reputation: 1067

$(this).text() may contain spaces that will ruin your if condition.so I think the problem is that. use $(this).text().trim() so it would clear spaces. PLUNCKER

 $("#content-styling-bar td").click(function() {
  if ($(this).text().trim() == "Bold") {
  $("#description").append("<b>shirin</b>");
 }

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074038

I have verified with an elert that I'm indeed getting the text "Bold" when I call $(this).text(), but it doesn't seem to satisfy the if statement.

What is the issue with my JavaScript?

Most likely spaces, such as the one you have at the end of the string you're checking ("Bold ").

I wouldn't do it that way at all, it's fragile and repetitive, you'll have a huge if/else and changing presentation text in one place can blow up your code elsewhere. Instead, I'd use a data-* attribute:

HTML:

<table id="content-styling-bar">
  <tr>
    <td data-tag="b">
      Bold
    </td>
    <td data-tag="i">
      Italic
    </td>
    <!-- ... -->
  </tr>
</table>

Then:

$("#content-styling-bar td").click(function() {
    $("#description").append(document.createElement($(this).attr("data-tag")));
});

If you have more complex cases, it still gives you something that isn't presentation text to switch on, and it automates the common case:

$("#content-styling-bar td").click(function() {
    var tag = $(this).attr("data-tag");
    switch (tag) {
        case "img":
            handleImage();
            break;
        case "a":
            handleLink();
            break;
        default: // "b", "i", "u", "h1", "h2", ...
            $("#description").append(document.createElement(tag));
            break;
    }
});

Upvotes: 1

Related Questions