How to create a Clear value box with JAVASCRIPT

How to create a simple Clear value box with JAVASCRIPT and HTML blogger coding tips script JS Tutorials


In this post, we learn how to create an HTML, javascript script with a clear button with an input value field  textarea box When the input field gets clicked, replace its current value with an empty string

How to create a simple Clear value box with JAVASCRIPT and HTML blogger coding tips script JS Tutorials In this post, we learn how to create an HTML, javascript script with a clear button with an input value field textarea box When the input field gets clicked, replace its current value with an empty string How to create a Clear value box with JAVASCRIPT : HTML; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <textarea id="message" name="message" rows="5" cols="33"></textarea> <button id="btn">Clear value</button> <script src="index.js"></script> </body> </html> JAVASCRIPT <script> const textarea = document.getElementById('message'); // Clear textarea value textarea.value = ''; // Clear textarea value on click const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick() { // log value before clearing it console.log(textarea.value); // clear textarea value textarea.value = ''; }); </script> Try to insert any text or script inside the box to implement clear button order in below Output:
 How to create a Clear value box with JAVASCRIPT


 :
HTML;


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
 
    <textarea id="message" name="message" rows="5" cols="33"></textarea>

    <button id="btn">Clear value</button>

    <script src="index.js"></script>
  </body>
</html>



JAVASCRIPT


<script>
  const textarea = document.getElementById('message');

//  Clear textarea value
textarea.value = '';

//  Clear textarea value on click
const btn = document.getElementById('btn');

btn.addEventListener('click', function handleClick() {
  //  log value before clearing it
  console.log(textarea.value);

  //  clear textarea value
  textarea.value = '';
});

</script>

Try to insert any text or script inside the box to implement clear button order in below


Output:

Comments :

Post a Comment