","siId":"2809991014937052418","hDmn":false,"hAds":true,"eSsl":true,"lnDr":"ltr","ttl":"Blogger Coding Tips","cnU":"https://bloggercodingtips.blogspot.com/2024/02/how-to-create-clear-value-box-with.html","cnHmU":"https://bloggercodingtips.blogspot.com/","des":null,"mDes":"How to create a simple Clear value box with JAVASCRIPT and HTML blogger coding tips script JS Tutorials","anAc":"G-6PFKBR17YE","adAt":true,"adCi":"ca-pub-4675757521648373","adHi":"ca-host-pub-1556223355139109","adlC":false,"vw":"","hmU":"https://bloggercodingtips.blogspot.com/?hl\u003den","pgNm":" How to create a Clear value box with JAVASCRIPT","pgTtl":"Blogger Coding Tips: How to create a Clear value box with JAVASCRIPT","pgTyp":"item","url":"https://bloggercodingtips.blogspot.com/2024/02/how-to-create-clear-value-box-with.html?hl\u003den","srU":"https://bloggercodingtips.blogspot.com/search","enc":"UTF-8","lc":"en","lcLn":"en","lcCn":null,"lcUn":"en","lcUnDl":"en"}, "vw":{"iHm":false,"iSi":true,"iPs":true,"iPg":false,"iPv":false,"iAr":false,"iEr":false,"iSr":false,"iSrL":false,"iMi":false,"iMb":false,"sr":null,"psId":"2809991014937052418","typ":"item","des":"How to create a simple Clear value box with JAVASCRIPT and HTML blogger coding tips script JS Tutorials","ttl":" How to create a Clear value box with JAVASCRIPT","url":"https://bloggercodingtips.blogspot.com/2024/02/how-to-create-clear-value-box-with.html?hl\u003den"}, "ms":{"home":"Home","edit":"Edit","postAComment":"Post a Comment","share":"Share","newerPosts":"Newer Posts","olderPosts":"Older Posts","shareToOtherApps":"Share to other apps","home":"Home","subscribeTo":"Subscribe to:","emailPost":"Email Post","comments":"Comments","postAComment":"Post a Comment","newer":"Newer","newest":"Newest","older":"Older","oldest":"Oldest","deleteComment":"Delete Comment","linkCopiedToClipboard":"Link copied to clipboard!","ok":"Ok","postLink":"Post Link","jumpLink":"Read more","showLess":"Show less","showMore":"Show more","showAll":"Show all","youMayLikeThesePosts":"You may like these posts","moreEllipsis":"More\u0026hellip;","viewAll":"View all","poweredByBlogger":"Powered by Blogger","posts":"Posts","labels":"Labels","archive":"Archive","search":"Search","searchThisBlog":"Search this blog","latestPosts":"Latest Posts","blogArchive":"Blog Archive","image":"Image","copyToClipboard":"Copy to clipboard","joinTheConversation":"Join the conversation","loadMorePosts":"Load more posts","loading":"Loading\u0026hellip;","noResultsFound":"No results found","postedBy":"Posted by","theresNothingHere":"There's nothing here!","viewMyCompleteProfile":"View my complete profile","adsGoHere":"Ads go here","visitProfile":"Visit profile","emailAddress":"Email Address","keepReading":"Keep reading"}, "ml":{"labels":"in","location":"Location:"}, "mc":{"new":"New!","free":"Free!","open":"Open","close":"Close","hideAll":"Hide all","showAll":"Show all","previous":"Previous","next":"Next","copy":"Copy","copied":"Copied","published":"Published","updated":"Updated","save":"Save","saved":"Saved","appearance":"Appearance","mode":"Mode","theme":"Theme","light":"Light","dark":"Dark","system":"System","reply":"Reply","delete":"Delete","aboutTheAuthor":"About the author","welcome":"Welcome!","goodMorning":"Good morning!","goodAfternoon":"Good afternoon!","goodEvening":"Good evening!","goodNight":"Good night!","timeToSleep":"Time to sleep!","haveSweetDreams":"Have sweet dreams!","estimatedReadTime":"Estimated read time","continueReading":"Continue reading...","commentMessage":"Comment message","mediaPlus":"Media +","commentMediaParserMessage":"Enter Code Snippet / Quote / Image URL / Name Tag, then click on parse button according to what you have entered. Copy the parsed result and paste it into the comment field.","commentMediaInputPlaceholder":"Code / Quote / Image URL / Username Tag","codeBlock":"Code block","inlineCode":"Inline code","quote":"Quote","imageUrl":"Image URL","tag":"Tag","link":"Link","clear":"Clear","copyCode":"Copy code","copiedCode":"Copied code!","notAValidURL":"Not a valid URL!","failedToLoad":"Failed to load...","orCopyLink":"or copy link","youAreOffline":"You are offline","youAreOnline":"You are online","image":"Image","noImage":"No image","relatedPosts":"Related Posts","relatedProducts":"Related Products","addedToBookmarks":"Added to bookmarks","removedFromBookmarks":"Removed from bookmarks"}, "pl":{ "ad":{"ok":true,"typ":1,"cId":"ca-pub-4675757521648373","hId":"ca-host-pub-1556223355139109","hOk":false,"src":"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client\u003dca-pub-4675757521648373","ampAa":true,"uaF":false}, "an":{"ok":true,"typ":1,"trId":"G-6PFKBR17YE","src":"https://www.googletagmanager.com/gtag/js?id\u003dG-6PFKBR17YE"}, "cl":{"ok":false,"typ":3,"trId":null,"src":null}, "lb":{"ok":true,"cap":true}, "sy":{"ok":true,"cp":true,"ln":true,"hl":true}, "cm":{"blgOk":true,"disOk":false,"fbOk":false,"pop":true,"ifSt":2,"exRp":true,"or":1,"par":true,"lnk":false,"im":true,"disSn":null}, "mt":{"wsOk":true,"arTyp":3,"dpt":"BlogPosting","uJs":false,"orgLg":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLYXKas2Slg6XQSDnVv2sZp3WrBMgpRTTNdEEmBCO54XHW3kmftJKJMU-CrNBEwOn0CU1J-KwAeGuS-ETuCpXhZob0AYrl789Lrwu_T_CDJYJ2k1hOQ-ur_Ek-iEAIm5-0C-nMjY8DtWtfyZfRaOXJC8mdBvdunVCbObp9ra6rMrcSg7jGCf298UE13as/w512-h512-p-k-no-nu/organization-logo.png","defTh":"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvC6vD6OtRfm9LfBlmnU43YBdoPU22C5TbYwdvBh-tcs70b-uyK7D_iri6WRtUUrtvSrhJrp5vo3IQTo-ta0t_J1VrozfN3ZdCapfbhEKcqMgphQeM3clXm8goom0uOKITSosfDKij6h9AUyYyZ7-nliDKV5EOiE9YyzFA_yW1vtud1lIt_mgTxGpBHUA/w1280-h720-p-k-no-nu/metadata-default-thumbnail.png"}, "amp":{"ok":false,"typ":3,"strOk":false,"strTyp":1}, "vw":{"ok":false,"av":true,"wm":true}, "rp":{"ok":true,"mr":6,"sb":"published","ld":2}, "pg":{"bgTyp":4,"ifTyp":1,"psOk":true,"psLd":2}, "ls":{"ok":true,"mr":50}, "pl":{"ok":false}, "qe":{"ok":true,"eps":true,"sc":true,"dlC":true}, "pb":{"ok":false}, "sb":{"ok":true}, "op":{"exLz":true,"imgLd":3,"fntLd":2}, "pwa":{"wbm":null} }, "st":{ "ui": {"thOk":true,"thm":["#482dff","#f44336","#45a557","#0062d1","#ff990a","#e91e63","#ff5722","#607d8b","#5d4037","#0c9784","#3949ab","#5c3083","#2c5d3f","#3d6fa9","#882c70","#bf5154"],"dfm":"light","dft":0}, "fnt":{"css":"@font-face{font-family:'Google Sans Text';font-style:normal;font-weight:400;font-display:swap;src:local('Google Sans Text'),local('Google-Sans-Text'),url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUu9-KzpRiLCAt4Unrc-xIKmCU5qEp2iw.woff2) format('woff2')} @font-face{font-family:'Google Sans Text';font-style:normal;font-weight:700;font-display:swap;src:local('Google Sans Text'),local('Google-Sans-Text'),url(https://fonts.gstatic.com/s/googlesanstext/v16/5aUp9-KzpRiLCAt4Unrc-xIKmCU5oPFTnmhjtg.woff2) format('woff2')} @font-face{font-family:'Google Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:local('Google Sans Mono'),local('Google-Sans-Mono'),url(https://fonts.gstatic.com/s/googlesansmono/v4/P5sUzYWFYtnZ_Cg-t0Uq_rfivrdYH4RE8-pZ5gQ1abT53wVQGrk.woff2) format('woff2')}","lnk":[]} }, "cf":{"con":{},"bst":{},"gtr":{},"blk":{"ip":[],"ctry":[],"tzn":[]}}, "fb":{"v":"10.12.4","cf":{}}, "lb":{}, "ps":{}, "pg":{"new":null,"old":null} }

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

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:

About the author

Post a Comment