JavaScript Toggle On and Off (WebExtension) от tlintspr
JavaScript Toggle On and Off add-on brings a bulletproof method to disable JavaScript execution in both standard and private modes. Note that after installation JavaScript execution is enabled, you need to click the toolbar button to disable the execution.
This is the WebExtension version of my JavaScript Toggle On and Off add-on. This version supports white-listing domains, but it is a bit less powerful but still reliable.
Default hotkey (shortcut) to toggle JS engine on and off is «Alt + Shift + L.» Still, there is no UI to edit this default shortcut. This should be offered by Firefox.
To check your browser’s JavaScript support (inline, data URI, external, iframe, document.write, . ) use:
https://webbrowsertools.com/javascript/
What types are supported:
1. Inline JavaScript on top and frame elements
2. Data URI JavaScript on top and frame elements
3. External JavaScript on top and frame elements
4. Inline events
5. «javascript:» URIs
6. setTimeout evaluation
7. document.write execution
Сообщить о нарушении правил этим дополнением
Если вы считаете, что это дополнение нарушает политики Mozilla в отношении дополнений, или имеет проблемы с безопасностью или приватностью, сообщите об этих проблемах в Mozilla, используя эту форму.
Не используйте эту форму, чтобы сообщать об ошибках или запрашивать новые функции в дополнении; это сообщение будет отправлено в Mozilla, а не разработчику дополнения.
Разработчик этого расширения просит вас помочь поддержать его дальнейшее развитие, внеся небольшое пожертвование.
How to toggle on / off? (Javascript)
I’m trying out JS without jQuery. But so far it’s much harder.
I’m trying to make a toggle on & off function.
This is the function:
I call the function here:
3 Answers 3
You’re not being consistent about using the style object, you’re checking and sometimes setting display directly on dropdown .
You’re also using = instead of == for comparison. = is for assignment, not comparison.
So the minimal change is:
However, I wouldn’t use style at all. I’d use a class that hides the element, which you add and remove:
You can also make your function more generic by accepting a selector for the element to show/hide:
I used querySelector rather than getElementById so you could use other forms of identifying the element, but of course use getElementById if ou prefer.
Javascript toggle on and off что это
If you have questions about the extension, or ideas on how to improve it, please post them on the support site. Don’t forget to search through the bug reports first as most likely your question/bug report has already been reported or there is a workaround posted for it.
Editorial Review
One of the most used and widespread sources of creating interactive web pages is JavaScript. Most website operators use JavaScript to add the functionality, they need to make their websites intriguing. In the past, not more than a few years ago, most people used HTML to create their websites. However, JavaScript was introduced with the purpose to make websites even more compelling. This provided an edge to the digital businessmen to gain an edge over most of their competitors. As we know, that having a website is one of the most important things for a business these days. Hence, the use of JavaScript has become even more popular in recent years. As a versatile and simple client-site scripting language, this coding method helps most web programmers to make their websites more interactive. However, most people must have come across a pop-up about JavaScript, when they are surfing the INTERNET. This is very frustrating for people who like to surf on different pages at a time. In such cases, JavaScript Toggle On and Off comes to play.
JavaScript Toggle On and Off is an easy-to-use and interactive add-on, which helps users to enable or disable JavaScript, whenever needed. This extension allows to user to easily access their JavaScript status, and turn it on or off, according to the demand of the users. JavaScript Toggle On and Off is easily accessible, from the toolbar of your browser, and can be turned on or off, with the click of a button. On top of that, this extension works on both, normal as well as incognito mode. This extension does not hurdle the functionality of another add-on, of the same type. Above all, the JavaScript Toggle On and Off is very lightweight and does not take much space.
I would recommend this add-on to everyone, especially people who are looking for an easier way to have control over websites.
How to Toggle a Button in JavaScript
How to Toggle a Button in JavaScript?
A conditional statement is a basic requirement for toggling a button in JavaScript. To achieve this, you need to get the element and then some custom function is applied to apply some specific operation on that element. The function is associated with the onclick event of the button. So that, whenever the button is clicked, that function will be executed. Let’s practice some examples to toggle a button in JavaScript.
Example 1: Modifying Text Messages by Toggling a Button
An example is considered to modify a message by toggling a button in JavaScript. The example comprises HTML and JavaScript code, which are explained below:
HTML code
< h2 > Example to toggle a button < / h2 >
In HTML code, the description is as follows:
- A <div> tag is created with an “id=js”.
- After that, a button is created associated with a “btntog()” method. By pressing “Button”, the method “btntog()” is triggered.
- In the end, the JavaScript file “test.js” is passed as src within <script> tags.
The code for the JavaScript file “test.js” is provided here:
JavaScript code
- getElementById is utilized to extract the HTML element “js” and the value is stored in a variable “t”.
- After that, the innerHTML property is employed in the if condition to check the text “Welcome to Linuxhint”.
- If the condition is true, the content “Welcome to Linuxhint” is replaced with “JavaScript World“.
- If the condition is false, the text “Welcome to Linuxhint” is assigned as HTML content to the div tag.
Output
The output shows that toggling a button returns two messages as “Welcome to Linuxhint” and “JavaScript World” alternatively.
Example 2: Toggling ON/OFF Button in JavaScript
An example is followed to change the inline text of the button. In this example, the “ON/OFF” text will alternatively change the value by pressing the button. The HTML and JavaScript codes are provided here:
HTML code
< h2 > Example to toggle a button </ h2 >
The above code is described as:
- A clickable button having an id of “myBtn” is created and its value is set to “OFF”.
- By pressing the button, the tgl() method will be triggered.
- In the end, “test.js” is attached to the source path within <script> tag.
JavaScript code
- A tgl() method is utilized to toggle a button in JavaScript.
- In this method, you extract the HTML element by employing the getElementById property, and then the if else-if statement is added to it.
- If the “value==ON”, toggle the value to “OFF”. If the value is OFF, then the value will be toggled to “ON”.
Output
The output shows that the button has been toggled from OFF to ON.
That is all! You have learned to toggle a button in JavaScript.
Conclusion
In JavaScript, a button can be used to toggle between various states of its own values, or any function can be associated with the toggle operation. The onclick() event of the button is associated with the function. This article explains an overview of toggling a button along with two practical examples. The first example extracts the text by the innerHTML property and modifies it through a toggle button. In the second example, the value of the button itself is changed using a custom function.
About the author
Syed Minhal Abbas
I hold a master’s degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.