Fri. Sep 22nd, 2023

[ANSWERED] javascript – How to toggle a ``’s `spellcheck` attribute with a checkbox?</a> </h1> <div class="media mg-info-author-block"> <a class="mg-author-pic" href="https://esgsw.it/author/"> <img alt='' src='https://secure.gravatar.com/avatar/?s=150&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=300&d=mm&r=g 2x' class='avatar avatar-150 photo avatar-default' height='150' width='150' loading='lazy' decoding='async'/> </a> <div class="media-body"> <h4 class="media-heading"><span>By</span><a href="https://esgsw.it/author/"></a></h4> <span class="mg-blog-date"><i class="fas fa-clock"></i> Nov 18, 2022</span> <span class="newsup-tags"><i class="fas fa-tag"></i> <a href="https://esgsw.it/html/answered-javascript-how-to-toggle-a-s-spellcheck-attribute-with-a-checkbox/"><a href="https://esgsw.it/tag/html/" rel="tag">html</a>, <a href="https://esgsw.it/tag/javascript/" rel="tag">javascript</a></a> </span> </div> </div> </div> <article class="small single"> <h1>Solution 1 : </h1> <div class="s-prose js-post-body" itemprop="text"> <p>Your syntax wouldn’t work because you can’t assign to the result of a function.</p> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck" rel="nofollow noreferrer noopener" target="_blank"><code>spellcheck</code></a> attribute has the somewhat weird requirement that its values should match exactly <code>"true"</code> or <code>"false"</code>.<br /> This means it’s an enumerated attribute, but not a boolean attribute.<br /> But the values <em>are</em> boolean literals, as strings.</p> <p>If you encounter any attribute that behaves this way, this is how you can toggle it:</p> <pre class="lang-js prettyprint-override"><code>textArea.setAttribute("spellcheck", !JSON.parse(textArea.getAttribute("spellcheck"))); </code></pre> <p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse" rel="nofollow noreferrer noopener" target="_blank"><code>JSON.parse</code></a> accepts (among other things) a boolean literal as a string, i.e. <code>"true"</code> or <code>"false"</code>, and turns it into an actual boolean.<br /> The string value is retrieved with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute" rel="nofollow noreferrer noopener" target="_blank"><code>getAttribute</code></a>.<br /> The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT" rel="nofollow noreferrer noopener" target="_blank">logical NOT (<code>!</code>)</a> inverts the parsed boolean.<br /> Then, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute" rel="nofollow noreferrer noopener" target="_blank"><code>setAttribute</code></a> sets the result (no need to convert the boolean back into a string: attribute values can only be strings, so <code>setAttribute</code> performs this conversion for you).</p> <p><em>If</em> you had a true boolean attribute such as <code>contenteditable</code>, then this is much easier done with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute" rel="nofollow noreferrer noopener" target="_blank"><code>toggleAttribute</code></a>.</p> <p>Your event listener relies on the <code>click</code> event.<br /> But toggling a checkbox can be achieved many other ways (e.g. keyboard navigation, touch, etc.).<br /> Use the <code>change</code> event instead.</p> <div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("sampleCheckbox").addEventListener("change", () => { const textArea = document.getElementById("sampleTextarea"); textArea.setAttribute("spellcheck", !JSON.parse(textArea.getAttribute("spellcheck"))); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><label>Enable / Disable Spellcheck: <input id="sampleCheckbox" type="checkbox" checked></label> <textarea id="sampleTextarea" spellcheck="true" rows="5" cols="50">sadadadadadsasamkdajdakmkmxzcm</textarea></code></pre> </div> </div> </div> <h1>Solution 2 : </h1> <div class="s-prose js-post-body" itemprop="text"> <p>You can add an event listener to the <code>change</code> event on the checkbox element and then use <code>setAttribute</code> to set the <code>spellcheck</code> to the value of the checkbox.</p> <div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('input').addEventListener('change', (e) => { document.querySelector('textarea').setAttribute('spellcheck', e.currentTarget.checked) })</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea spellcheck="true">This is a spellling mistake.</textarea> <label><input type="checkbox" checked>Spellcheck?</label></code></pre> </div> </div> </div> <h1>Solution 3 : </h1> <div class="s-prose js-post-body" itemprop="text"> <ul> <li>To handle checkbox events use <code>change</code> instead of <code>click</code>.</li> <li>Use an argument inside <code>function(e)</code> to access the event. You can use any argument instead of <code>e</code>.</li> <li>Use <code>e.target.checked</code> which will return <code>true</code> if checked and <code>false</code> if not.</li> <li>Then perform any action</li> </ul> <div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>let checkBox = document.getElementById('sampleCheckbox'); checkBox.addEventListener('change', function(e) { let textArea = document.getElementById('sampleTextarea'); if (e.target.checked) { textArea.setAttribute('spellcheck', 'true') }else{ textArea.setAttribute('spellcheck', 'false') } });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>Enable/Disable Spellcheck <input type="checkbox" id="sampleCheckbox" checked> <br><br> <textarea spellcheck="true" rows="5" cols="50" id="sampleTextarea">sadadadadadsasamkdajdakmkmxzcm</textarea></code></pre> </div> </div> </div> <h1>Problem :</h1> <div class="s-prose js-post-body" itemprop="text"> <p>I’d like to have a checkbox that, when checked, will enable a <code><textarea></code>’s <code>spellcheck</code> attribute and vice-versa.</p> <p>However, I’m not sure if this is possible.</p> <p>This is my code so far:</p> <div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('sampleCheckbox').addEventListener('click', function() { let textArea = document.getElementById('sampleTextarea'); textArea.setAttribute('spellcheck', 'true') = !textArea.setAttribute('spellcheck', 'false') });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>Enable/Disable Spellcheck <input type="checkbox" id="sampleCheckbox" checked> <br> <br> <textarea spellcheck="true" rows="5" cols="50" id="sampleTextarea">sadadadadadsasamkdajdakmkmxzcm</textarea></code></pre> </div> </div> <p>How do I achieve this goal?</p> </div> <script> function pinIt() { var e = document.createElement('script'); e.setAttribute('type','text/javascript'); e.setAttribute('charset','UTF-8'); e.setAttribute('src','https://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999); document.body.appendChild(e); } </script> <div class="post-share"> <div class="post-share-icons cf"> <a href="https://www.facebook.com/sharer.php?u=https://esgsw.it/html/answered-javascript-how-to-toggle-a-s-spellcheck-attribute-with-a-checkbox/" class="link facebook" target="_blank" > <i class="fab fa-facebook"></i></a> <a href="http://twitter.com/share?url=https://esgsw.it/html/answered-javascript-how-to-toggle-a-s-spellcheck-attribute-with-a-checkbox/&text=%5BANSWERED%5D%20javascript%20%E2%80%93%20How%20to%20toggle%20a%20%60%60%E2%80%99s%20%60spellcheck%60%20attribute%20with%20a%20checkbox%3F" class="link twitter" target="_blank"> <i class="fab fa-twitter"></i></a> <a href="mailto:?subject=%5BANSWERED%5D%20javascript%20%26#8211;%20How%20to%20toggle%20a%20’s%20spellcheck%20attribute%20with%20a%20checkbox?&body=https://esgsw.it/html/answered-javascript-how-to-toggle-a-s-spellcheck-attribute-with-a-checkbox/" class="link email" target="_blank" > <i class="fas fa-envelope"></i></a> <a href="https://www.linkedin.com/sharing/share-offsite/?url=https://esgsw.it/html/answered-javascript-how-to-toggle-a-s-spellcheck-attribute-with-a-checkbox/&title=%5BANSWERED%5D%20javascript%20%E2%80%93%20How%20to%20toggle%20a%20%60%60%E2%80%99s%20%60spellcheck%60%20attribute%20with%20a%20checkbox%3F" class="link linkedin" target="_blank" > <i class="fab fa-linkedin"></i></a> <a href="https://telegram.me/share/url?url=https://esgsw.it/html/answered-javascript-how-to-toggle-a-s-spellcheck-attribute-with-a-checkbox/&text&title=%5BANSWERED%5D%20javascript%20%E2%80%93%20How%20to%20toggle%20a%20%60%60%E2%80%99s%20%60spellcheck%60%20attribute%20with%20a%20checkbox%3F" class="link telegram" target="_blank" > <i class="fab fa-telegram"></i></a> <a href="javascript:pinIt();" class="link pinterest"><i class="fab fa-pinterest"></i></a> </div> </div> <div class="clearfix mb-3"></div> <nav class="navigation post-navigation" aria-label="Posts"> <h2 class="screen-reader-text">Post navigation</h2> <div class="nav-links"><div class="nav-previous"><a href="https://esgsw.it/html/answered-python-does-htmlsession-closes-automatically/" rel="prev">[ANSWERED] python – Does HTMLSession closes automatically? <div class="fas fa-angle-double-right"></div><span></span></a></div><div class="nav-next"><a href="https://esgsw.it/html/answered-html-github-pages-folder-file-isnt-accessible-when-going-to-site-on-chrome/" rel="next"><div class="fas fa-angle-double-left"></div><span></span> [ANSWERED] html – Github Pages .folder/file isn’t accessible when going to site on Chrome</a></div></div> </nav> </article> </div> <div class="media mg-info-author-block"> <a class="mg-author-pic" href="https://esgsw.it/author/"><img alt='' src='https://secure.gravatar.com/avatar/?s=150&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/?s=300&d=mm&r=g 2x' class='avatar avatar-150 photo avatar-default' height='150' width='150' loading='lazy' decoding='async'/></a> <div class="media-body"> <h4 class="media-heading">By <a href ="https://esgsw.it/author/"></a></h4> <p></p> </div> </div> <div class="mg-featured-slider p-3 mb-4">  <div class="mg-sec-title">  <h4>Related Post</h4> </div>  <div class="row">   <div class="col-md-4"> <div class="mg-blog-post-3 minh back-img" > <div class="mg-blog-inner"> <div class="mg-blog-category"> <a class="newsup-categories category-color-1" href="https://esgsw.it/category/html/" alt="View all posts in HTML"> HTML </a> </div> <h4 class="title"> <a href="https://esgsw.it/html/answered-html-i-cant-get-my-carousel-buttons-to-respond-bootstrap-4/" title="Permalink to: [ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4"> [ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4</a> </h4> <div class="mg-blog-meta"> <span class="mg-blog-date"><i class="fas fa-clock"></i> Nov 20, 2022</span> <a href="https://esgsw.it/author/"> <i class="fas fa-user-circle"></i> </a> </div> </div> </div> </div>   <div class="col-md-4"> <div class="mg-blog-post-3 minh back-img" > <div class="mg-blog-inner"> <div class="mg-blog-category"> <a class="newsup-categories category-color-1" href="https://esgsw.it/category/html/" alt="View all posts in HTML"> HTML </a> </div> <h4 class="title"> <a href="https://esgsw.it/html/answered-javascript-locomotive-scroll-not-working-with-vue-js-when-having-to-load-images-on-page/" title="Permalink to: [ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page"> [ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page</a> </h4> <div class="mg-blog-meta"> <span class="mg-blog-date"><i class="fas fa-clock"></i> Nov 20, 2022</span> <a href="https://esgsw.it/author/"> <i class="fas fa-user-circle"></i> </a> </div> </div> </div> </div>   <div class="col-md-4"> <div class="mg-blog-post-3 minh back-img" > <div class="mg-blog-inner"> <div class="mg-blog-category"> <a class="newsup-categories category-color-1" href="https://esgsw.it/category/html/" alt="View all posts in HTML"> HTML </a> </div> <h4 class="title"> <a href="https://esgsw.it/html/answered-html-how-to-import-veiw-stl-files-in-a-wordpress-website/" title="Permalink to: [ANSWERED] html – How to import/veiw STL files in a wordpress website?"> [ANSWERED] html – How to import/veiw STL files in a wordpress website?</a> </h4> <div class="mg-blog-meta"> <span class="mg-blog-date"><i class="fas fa-clock"></i> Nov 20, 2022</span> <a href="https://esgsw.it/author/"> <i class="fas fa-user-circle"></i> </a> </div> </div> </div> </div>  </div> </div>  </div>   <aside class="col-md-3"> <aside id="secondary" class="widget-area" role="complementary"> <div id="sidebar-right" class="mg-sidebar"> <div id="block-2" class="mg-widget widget_block widget_search"><form role="search" method="get" action="https://esgsw.it/" class="wp-block-searchbutton-outside wp-block-searchtext-button wp-block-search"><label for="wp-block-searchinput-1" class="wp-block-searchlabel" >Search</label><div class="wp-block-searchinside-wrapper " ><input type="search" id="wp-block-searchinput-1" class="wp-block-searchinput wp-block-searchinput" name="s" value="" placeholder="" required /><button type="submit" class="wp-block-search__button wp-element-button" >Search</button></div></form></div><div id="block-3" class="mg-widget widget_block"><div class="is-layout-flow wp-block-group"><div class="wp-block-groupinner-container"><h2>Recent Posts</h2><ul class="wp-block-latest-postslist wp-block-latest-posts"><li><a class="wp-block-latest-postspost-title" href="https://esgsw.it/html/answered-javascript-text-box-to-display-updated-text-and-save-on-button-click/">[ANSWERED] javascript – Text box to display updated text and save on button click</a></li> <li><a class="wp-block-latest-postspost-title" href="https://esgsw.it/html/answered-javascript-pass-html-tag-to-angularjs-variable-from-controller/">[ANSWERED] javascript – Pass html tag to angularjs variable from controller</a></li> <li><a class="wp-block-latest-postspost-title" href="https://esgsw.it/html/answered-html-bootstrap-mobile-menu-not-scrolling-instead-the-background-is-scrolling/">[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling</a></li> <li><a class="wp-block-latest-postspost-title" href="https://esgsw.it/html/answered-html-how-to-play-live-stream-youtube-videos-using-cef4delphi/">[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://esgsw.it/html/answered-html-how-to-include-a-clickable-image-behind-a-link/">[ANSWERED] html – How to include a clickable image behind a link</a></li> </ul></div></div></div><div id="block-4" class="mg-widget widget_block"><div class="is-layout-flow wp-block-group"><div class="wp-block-group__inner-container"><h2>Recent Comments</h2><div class="no-comments wp-block-latest-comments">No comments to show.</div></div></div></div> </div> </aside> </aside>   </div> </div> </main> <div class="container-fluid mr-bot40 mg-posts-sec-inner"> <div class="missed-inner"> <div class="row"> <div class="col-md-12"> <div class="mg-sec-title">  <h4>You missed</h4> </div> </div>  <div class="col-md-3 col-sm-6 pulse animated"> <div class="mg-blog-post-3 minh back-img" > <a class="link-div" href="https://esgsw.it/html/answered-javascript-text-box-to-display-updated-text-and-save-on-button-click/"></a> <div class="mg-blog-inner"> <div class="mg-blog-category"> <a class="newsup-categories category-color-1" href="https://esgsw.it/category/html/" alt="View all posts in HTML"> HTML </a> </div> <h4 class="title"> <a href="https://esgsw.it/html/answered-javascript-text-box-to-display-updated-text-and-save-on-button-click/" title="Permalink to: [ANSWERED] javascript – Text box to display updated text and save on button click"> [ANSWERED] javascript – Text box to display updated text and save on button click</a> </h4> <div class="mg-blog-meta"> <span class="mg-blog-date"><i class="fas fa-clock"></i> <a href="https://esgsw.it/2022/11/"> Nov 20, 2022</a></span> <a class="auth" href="https://esgsw.it/author/"><i class="fas fa-user-circle"></i> </a> </div> </div> </div> </div>   <div class="col-md-3 col-sm-6 pulse animated"> <div class="mg-blog-post-3 minh back-img" > <a class="link-div" href="https://esgsw.it/html/answered-javascript-pass-html-tag-to-angularjs-variable-from-controller/"></a> <div class="mg-blog-inner"> <div class="mg-blog-category"> <a class="newsup-categories category-color-1" href="https://esgsw.it/category/html/" alt="View all posts in HTML"> HTML </a> </div> <h4 class="title"> <a href="https://esgsw.it/html/answered-javascript-pass-html-tag-to-angularjs-variable-from-controller/" title="Permalink to: [ANSWERED] javascript – Pass html tag to angularjs variable from controller"> [ANSWERED] javascript – Pass html tag to angularjs variable from controller</a> </h4> <div class="mg-blog-meta"> <span class="mg-blog-date"><i class="fas fa-clock"></i> <a href="https://esgsw.it/2022/11/"> Nov 20, 2022</a></span> <a class="auth" href="https://esgsw.it/author/"><i class="fas fa-user-circle"></i> </a> </div> </div> </div> </div>   <div class="col-md-3 col-sm-6 pulse animated"> <div class="mg-blog-post-3 minh back-img" > <a class="link-div" href="https://esgsw.it/html/answered-html-bootstrap-mobile-menu-not-scrolling-instead-the-background-is-scrolling/"></a> <div class="mg-blog-inner"> <div class="mg-blog-category"> <a class="newsup-categories category-color-1" href="https://esgsw.it/category/html/" alt="View all posts in HTML"> HTML </a> </div> <h4 class="title"> <a href="https://esgsw.it/html/answered-html-bootstrap-mobile-menu-not-scrolling-instead-the-background-is-scrolling/" title="Permalink to: [ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling"> [ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling</a> </h4> <div class="mg-blog-meta"> <span class="mg-blog-date"><i class="fas fa-clock"></i> <a href="https://esgsw.it/2022/11/"> Nov 20, 2022</a></span> <a class="auth" href="https://esgsw.it/author/"><i class="fas fa-user-circle"></i> </a> </div> </div> </div> </div>   <div class="col-md-3 col-sm-6 pulse animated"> <div class="mg-blog-post-3 minh back-img" > <a class="link-div" href="https://esgsw.it/html/answered-html-how-to-play-live-stream-youtube-videos-using-cef4delphi/"></a> <div class="mg-blog-inner"> <div class="mg-blog-category"> <a class="newsup-categories category-color-1" href="https://esgsw.it/category/html/" alt="View all posts in HTML"> HTML </a> </div> <h4 class="title"> <a href="https://esgsw.it/html/answered-html-how-to-play-live-stream-youtube-videos-using-cef4delphi/" title="Permalink to: [ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?"> [ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?</a> </h4> <div class="mg-blog-meta"> <span class="mg-blog-date"><i class="fas fa-clock"></i> <a href="https://esgsw.it/2022/11/"> Nov 20, 2022</a></span> <a class="auth" href="https://esgsw.it/author/"><i class="fas fa-user-circle"></i> </a> </div> </div> </div> </div>  </div> </div> </div>  <footer> <div class="overlay" style="background-color: ;">    <div class="mg-footer-bottom-area"> <div class="container-fluid"> <div class="divide-line"></div> <div class="row align-items-center">  <div class="col-md-6"> <div class="site-branding-text"> <h1 class="site-title"> <a href="https://esgsw.it/" rel="home">Bollate</a></h1> <p class="site-description"></p> </div> </div> <div class="col-md-6 text-right text-xs"> <ul class="mg-social"> <a target="_blank" href=""> <a target="_blank" href=""> </ul> </div>  </div>  </div>  </div>  <div class="mg-footer-copyright"> <div class="container-fluid"> <div class="row"> <div class="col-md-6 text-xs"> <p> <a href="https://wordpress.org/"> Proudly powered by WordPress </a> <span class="sep"> | </span> Theme: Newspaperex by <a href="https://themeansar.com/" rel="designer">Themeansar</a>. </p> </div> <div class="col-md-6 text-right text-xs"> <ul class="info-right"><li class="nav-item menu-item "><a class="nav-link " href="https://esgsw.it/" title="Home">Home</a></li></ul> </div> </div> </div> </div> </div>  </footer>  </div>   <a href="#" class="ta_upscr bounceInup animated"><i class="fa fa-angle-up"></i></a>   <script> jQuery('a,input').bind('focus', function() { if(!jQuery(this).closest(".menu-item").length && ( jQuery(window).width() <= 992) ) { jQuery('.navbar-collapse').removeClass('show'); }}) </script> <script type='text/javascript' src='https://esgsw.it/wp-content/themes/newsup/js/custom.js?ver=6.1.1' id='newsup-custom-js'></script> <script type='text/javascript' src='https://esgsw.it/wp-content/themes/newsup/js/custom-time.js?ver=6.1.1' id='newsup-custom-time-js'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html>