text area form

by trentHarlem

HTML

<!-- <form id='myForm' action="/action_page.php">-->
 <form id='myForm'>
<label for="myTextArea">my text area:</label>
<button id='bold'>BOLD</button>
<!-- <textarea id="myTextArea" form="myForm" name="myTextArea" rows="4" cols="50">
  At w3schools.com you will learn how to make a website. They offer free tutorials in all web development technologies.
  </textarea> -->
  
  <div id="myTextArea" form="myForm" name="myTextArea" contenteditable='true'>

  </div>
  
  <br><br>
  
  <!--
  <input type="submit" value="Submit">
  -->
  <button id='button'>
  check me
  </button>
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "action_page.php".</p>




<!-- 
text area name is what gets stored
form_handler.php to send to DB-->

CSS

#myTextArea {
height: 5rem;
  width: 50%;
  overflow: auto;
  resize: both;
  border: 1px solid black;
}

JavaScript

const myTextArea = document.querySelector('#myTextArea')
const button = document.querySelector('#button')
const bold = document.querySelector('#bold')
let textArray = [];

function addBold() {
 // e.preventDefault;
let boldSpan = document.createElement('strong');
  
  //myTextArea.appendChild(boldSpan)
  myTextArea.appendChild(boldSpan)
}

function textCheck() {
  //e.preventDefault;
textArray.push(myTextArea.innerHTML)
console.log(textArray)
}

bold.addEventListener('click', addBold)
button.addEventListener('click', textCheck)