title: Uncaught TypeError: Cannot read property 'execCommand' of undefined at execCmd at HTMLButtonElement.onclick
body: <p>I am not able to convert selected text in text area to bold on clicking bold button.Please help.This is my code. It shows the error: Uncaught TypeError: Cannot read property 'execCommand' of undefined  at execCmd at HTMLButtonElement.onclick </p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  
    &lt;title&gt;Editor&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
   &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
    &lt;style&gt;
    .navbar {
        font-family: Montserrat, sans-serif;
        margin-bottom: 0;
        background-color:     #A9A9A9;
  
        border: 0;
        font-size: 9px !important;
        letter-spacing: 4px;
        opacity: 0.9;
    }
  
    /* text color*/
    .navbar li a, .navbar .navbar-brand { 
        color: black!important;
       font-weight: bold;
    }
  
    .nav-pills&gt;li&gt;a:hover {
      background-color: #6495ED;
  }
    .nav&gt;li&gt;a {
      padding-top: 8px;
      padding-bottom: 8px;
  }
  
   #body { padding-top: 90px; }
  
    #myText{
  
  width: 95%;
  height: 700px;
  }
  
  #editor{
  text-align:center;
  }
  
    &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body id="body" &gt;
  
  
  &lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation" &gt;
  
  &lt;div class="container-fluid"&gt;
      &lt;div class="navbar-header"&gt;
   &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;                        
        &lt;/button&gt;
    &lt;ul class="nav nav-pills " id="pill1"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;button type="button" class="btn btn-default btn-xs" onclick="execCmd()" &gt;&lt;i class="fa fa-bold" aria-hidden="true"&gt;&lt;/i&gt; &lt;/button&gt;&lt;/li&gt;
              &lt;li&gt;&lt;button type="button" class="btn btn-default btn-xs"&gt;&lt;i class="fa fa-italic" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/li&gt;
              &lt;li&gt;&lt;button type="button" class="btn btn-default btn-xs"&gt;&lt;i class="fa fa-underline" aria-hidden="true"&gt;&lt;/i&gt; &lt;/button&gt;&lt;/li&gt;
              &lt;li&gt;&lt;button type="button" class="btn btn-default btn-xs"&gt;&lt;i class="fa fa-strikethrough" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/li&gt;
               &lt;/ul&gt;
  
  &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div id="editor"&gt;
          &lt;textarea id="myText" name="myText" placeholder="Start typing here...."&gt;&lt;/textarea&gt;
      &lt;/div&gt;
  
  &lt;script&gt;
  
  function execCmd(command)
      {
      myText.document.execcommand(command, false,null);
      }
  
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>