jQuery not adding class to element properly

Question

I've been working on a new feature for my little project which takes a command from the input (write into input: make a box called somename) and if it detects that the command is "make a box called somename", it will create a div with the class of somename. But, when I try to add styling to the div element, nothing happens. The problem lies in the line above the switch statement's break;

// checks if word is in string s
function wordInString(s, word){
  return new RegExp( '\\b' + word + '\\b', 'i').test(s);
}

$('input').keypress(function(e) {
  if (e.which == 13) {
    let input = $(this).val();
    console.log("Initial Input: " + input);


    const Commands = ['call it', 'name it', 'make a box called'];

    split_input = input.split(" ");

    var arrayLength = Commands.length;
    for (var i = 0; i < arrayLength; i++) {
        command = Commands[i];
        console.log(command);
        let wordFound = wordInString(input, command);
        if (wordFound) {
          console.log("Command found: " + command)
          switch (command) {
            case "make a box called":
              let name = split_input[4];
              console.log("Box name: " + name)
              $('.Dragon').append($('<div>', {class: name}));

              // this is the problem line, I do not quite get why it won't w ork
              $('.'.concat(name)).addClass({'background-color': 'green', 'height': '50px', 'width': '50px'});

              break;
            default:

          }
        }
    }

    $(this).val('');
  }
});

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Dependencies -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" charset="utf-8"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" charset="utf-8"></script>
    <script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js" charset="utf-8"></script>
    <title>CodeDragon</title>
    <link rel="stylesheet" href="/master.css">
  </head>
  <body>
    <div class="Dragon"></div>


    <input type="text" name="_input" value="">
    <script src="script.js" charset="utf-8"></script>
  </body>
</html>

Mohammed Ilyass NASR · Accepted Answer · 2018-07-29 14:35:51Z

1

You should use jquery's css() method instead of addClass there, use the same syntax, as in :

$('.'.concat(name)).css({'background-color': 'green', 'height': '50px', 'width': '50px'});

answered Jul 29, 2018 at 14:35

Mohammed Ilyass NASR

2712 silver badges7 bronze badges

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

4 Comments

Holiday Over a year ago

O my, my brain thought I had written css instead of addClass, must have unconcoussly written it. Another pair of eyes do miracles, thank you so much Mohammaed!!

ghybs Over a year ago

@Holiday the SO way to thank people is also to accept the answer that helped you solve your issue the best way. It also means to others that your issue is fixed. Once you get enough reputation, you will be able to upvote.

Holiday Over a year ago

@ghybs Until I am able to upvote, I will thank the people who helped me, which is a common decency.

ghybs Over a year ago

@Holiday make sure you read carefully: I never said not to thank. But to also "accept" one of the answers. You should have the accept button on top left of answers. See What should I do when someone answers my question?

Pavel Bondarev · Accepted Answer · 2018-07-29 14:36:37Z

1

Seems like you trying to use wrong method. Try css instead of addClass

.addClass({'background-color': 'green', 'height': '50px', 'width': '50px'});

It has to be

.css({'background-color': 'green', 'height': '50px', 'width': '50px'});

answered Jul 29, 2018 at 14:36

Pavel Bondarev

694 bronze badges

Comments

Rick Root · Accepted Answer · 2018-07-29 15:08:30Z

1

For additional clarity, the reason you can't use the .addClas() method is because "background-color" is not a class, it's a css property. Thus, you have to use the .css() method to set it.

.css({'background-color': 'green', 'height': '50px', 'width': '50px'});

answered Jul 29, 2018 at 15:08

Rick Root

313 bronze badges

Collectives™ on Stack Overflow

jQuery not adding class to element properly

3 Answers 3

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related