CODEWITHSUNDEEP
javascriptjquery
Bidhan Majhi
Bidhan Majhi

Reputation: 1370

Escape the <b> tag on second click

I'm creating a form with textfield by using content editable div. Idea is to add bold tag when I press button bold and on second click on that button, it should leave the bold tag and text should be normal.

Here is my code,

      $('.btn-bold').click(function(){
            $('.btn-bold').css({'background-color':'white'});
            $('.container-main').append('<b>Text</b>');
      });
      
.container{
            width: 400px;
            height: 200px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            border: 1px solid #dddddd;
            box-shadow: 0 0 2px 2px #00000010;
            border-radius: 5px;
      }
      
      .container-top{
            float: left;
            width: 100%;
            height: auto;
      }
      
      .container-main{
            float: left;
            width: 96%;
            height: 100px;
            background-color: aliceblue;
            font-family: sans-serif;
            font-size: 15px;
            outline: none;
            padding: 10px 2% 10px 2%;
      }
      
      .btn{
            float: left;
            width: auto;
            height: 40px;
            border: none;
            outline: none;
            margin: 2px;
            padding: 10px;
            background-color: antiquewhite;
            font-size: 20px;
      }
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title> Demo
    </title>
</head>

<div class="container">
      <div class="container-top">
            <button class="btn btn-bold material-icons"> format_bold </button>
      </div>
      
      <div class="container-main" contenteditable="true"></div>
</div>

What things I should change in the script to achieve this correctly?

Note - If this question is available in stack overflow before, please let me know. I have added this because I could not find the correct answer.

Upvotes: 0

Views: 86

Answers (2)

F. Doe
F. Doe

Reputation: 82

      $('.btn-bold').click(function () {
        $('.btn-bold').css({'background-color': 'white'});
        if (!$('.container-main').hasClass('bold')) {
            $('.container-main').addClass('bold');
        } else {
            $('.container-main').removeClass('bold');
        }
    });
      
.bold {
           font-weight: bold;
 }
.container{
            width: 400px;
            height: 200px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            border: 1px solid #dddddd;
            box-shadow: 0 0 2px 2px #00000010;
            border-radius: 5px;
      }
      
      .container-top{
            float: left;
            width: 100%;
            height: auto;
      }
      
      .container-main{
            float: left;
            width: 96%;
            height: 100px;
            background-color: aliceblue;
            font-family: sans-serif;
            font-size: 15px;
            outline: none;
            padding: 10px 2% 10px 2%;
      }
      
      .btn{
            float: left;
            width: auto;
            height: 40px;
            border: none;
            outline: none;
            margin: 2px;
            padding: 10px;
            background-color: antiquewhite;
            font-size: 20px;
      }
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title> Demo
    </title>
</head>

<div class="container">
      <div class="container-top">
            <button class="btn btn-bold material-icons"> format_bold </button>
      </div>
      
      <div class="container-main" contenteditable="true"></div>
</div>

Upvotes: 0

Deckerz
Deckerz

Reputation: 2604

I changed it so the white is a css class that is toggled and depending on if the class is enabled or not change what is added to the div

$('.btn-bold').click(function(){
  $(this).toggleClass('white');
  if($(this).hasClass('white')){
    $('.container-main').append('<b>Test</b>');
  }else{
    $('.container-main').append('Test');
  }
});
.container{
            width: 400px;
            height: 200px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            border: 1px solid #dddddd;
            box-shadow: 0 0 2px 2px #00000010;
            border-radius: 5px;
      }
      
      .container-top{
            float: left;
            width: 100%;
            height: auto;
      }
      
      .container-main{
            float: left;
            width: 96%;
            height: 100px;
            background-color: aliceblue;
            font-family: sans-serif;
            font-size: 15px;
            outline: none;
            padding: 10px 2% 10px 2%;
      }
      
      .btn{
            float: left;
            width: auto;
            height: 40px;
            border: none;
            outline: none;
            margin: 2px;
            padding: 10px;
            background-color: antiquewhite;
            font-size: 20px;
      }
      .white {
        background-color: white;
      }
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title> Demo
    </title>
</head>

<div class="container">
      <div class="container-top">
            <button class="btn btn-bold material-icons"> format_bold </button>
      </div>
      
      <div class="container-main" contenteditable="true"></div>
</div>

Upvotes: 1

Related Questions