Enable and Disabling a JavaScript code - javascript

I have a JavaScript code and what I would like to do with it is to enable and disable the JavaScript code with a button.
So when I press the button the JavaScript code is enable, then press it again and it is disabled.
I don't want to Enable / Disable JavaScript itself. But just the code inbetween <script></script>
It would be controlled by a bool so, true / false.
I hope you can understand what I am trying to say. :P

You can do toggle the value of a hidden variable onClick of the button
and in the <script>, you can check the value of the hidden variable
For eg:
<input type='hidden' name='js_enabled' value='1' />
<button name='toggle_js' onClick='toggle()'>Toggle</button>
<script>
function toggle() {
if (document.getElementByName('js_enabled').val == 1) {
document.getElementByName('js_enabled').val = 0
} else {
document.getElementByName('js_enabled').val = 1
}
}
if (document.getElementByName('js_enabled').val == 1) {
//your functions here
}
</script>

Just set a global variable and check its value inside every function.
<script type="text/javascript">
window.runScripts = true;
function enableScripts() { window.runScripts = true; }
function disableScripts() { window.runScripts = false; }
function func_1() {
if (window.runScripts) { /* run your code */ }
}
function func_2() {
if (window.runScripts) { /* code for function 2 */ }
}
// ....
</script>

Related

How to enable buttons when a the value of a variable changes in Html/Javascript/Jquery

I have two simple buttons, disabled by deafault:
<button type="button" id="validate" style="position: absolute; left:1250px; top:500px; height:20px;"> Validate </button>
<button type="button" id="review" style="position: absolute; left:1250px; top:530px; height:20px;"> Review</button>
and a boolean variable that changes from false to true when it reaches the value of the number of a pdf pages. This code is written in another html file:
const showNextPage = () => {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
if (pageNum == pdfDoc.numPages) {
end = true;
}
};
in the main page:
//code
if (end) {
document.getElementById("validate").disabled = false;
document.getElementById("review").disabled = false;
}
so the question is simple: when the variable becomes true the buttons don't change, so what can i do? Are there any options to trigger a function/some code when the value of the variable changes?
I don't know about the function or if it's correctly validating that you are in the last page but you should change the disabled state to true in order to disable the button.
document.getElementById("validate").disabled = true;

How to disable a text box and clear value with pure javascript when a checkbox is checked

I am having one checkbox and one input text in a row .I want when a user checks the checkbox to diable the text and clear its value.
I tried this one but nothing:
What is wrong?
HTML:
<span style="width: 200px;font-size: 80%;"><input id="chkSendSummary" type="checkbox" name="ctl03$ctl00$ctl00$chkSendSummary" onclick="checkSendSummaryLetter();"></span>
<input name="ctl03$ctl00$ctl00$txtSendSummary" type="text" id="txtSendSummary" class="NormalTextBox" style="width: 170px;">
var chkSendSummaryLetter=document.getElementById('chkSendSummary');
var txtSendSummaryLetter=document.getElementById('txtSendSummary');
if (chkSendSummaryLetter.checked) {
txtSendSummaryLetter.enabled = true;
} else {
txtSendSummaryLetter.value = "";
txtSendSummaryLetter.enabled = false;
}
You've created a custom property enabled, which has no effect on the DOM. Use disabled instead:
if (chkSendSummaryLetter.checked) {
txtSendSummaryLetter.disabled = false;
} else {
txtSendSummaryLetter.value = "";
txtSendSummaryLetter.disabled = true;
}
<script type="text/javascript">
var chkSendSummaryLetter=document.getElementById('chkSendSummary');
var txtSendSummaryLetter=document.getElementById('txtSendSummary');
if (chkSendSummaryLetter.checked) {
txtSendSummaryLetter.value = "";
hide();
}
if
function hide() {
document.getElementById('txtSendSummary').style.display = 'block';
}
</script>
This post already exists: (found in 2 seconds via google)
javascript hide/show element
you could add a parameter within the function to make it have multiple purposes

Calling a function using onclick, and within that function calling another function using onclick

I am trying to call a function using onclick, but this function is already inside another function that is called via onclick.
I actually want to go on doing this for about 6-7 times.
The code might help in reducing the confusion:
The HTML+JS:
{
<body>
<script type="text/javascript">
function abc()
{
document.getElementById("first").className='disc';
document.getElementById("first").onClick="def();";
}
function def()
{
document.getElementById("first").className='disco';
}
</script>
<input type="button" value="Change Color of this text" id="first" class="" onclick="abc();">
</body>
}
The CSS:
.disc
{
color: red;
}
.disco
{
color: yellow;
}
I want to change the color of the text in the button every time the user clicks on it. So what is the problem? It just changes to red, but not to yellow when I click over it once more.
I think this should work for you according to your requirement in comment:-
Javascript
function abc(){
if(document.getElementById("first").className == "" || document.getElementById("first").className == "disco"){
document.getElementById("first").className = "disc";
}
else if(document.getElementById("first").className=="disc"){
document.getElementById("first").className="disco";
}
}
You need not to change anything in HTML & css.
Instead of changing the function from abc() to def(), which I'm not sure you can do something like that.. Why don't you just use 1 function and check the current className, like below code:
function abc()
{
if(document.getElementById("first").className == "disco" || document.getElementById("first").className == "") //change from red to yellow
document.getElementById("first").className="disc";
else //change from yellow to red
document.getElementById("first").className="disco";
}
var first = document.getElementById("first"), counter = 0;
first.addEventListener('click', function () {
first.className = (counter % 2) ? 'disc' : 'disco';
counter +=1;
});
http://jsfiddle.net/fNW23/
fixed code and more reliable solution.

How can I figure out what button was clicked on last?

How can I figure out what button was clicked on last? For example I have:
<input type="button" name= "zoomer" value="State View" id= 'States View' onclick="zoomout()"/>
<input type="button" name= "zoomer" value="County View" id= 'Counties View' onclick="countyView()"/>
But whenever I change a RADIO button, I want it to take into account which button was clicked last (County View or State View). Is it possible to do this?
You could keep a global JavaScript variable var last_clicked which is updated in the functions zoomout() and countyView(), and then check the value of last_clicked when you change the radio button. Alternatively, you can terminate the calls to the functions within the onclick event with a semicolon, then assign the value to last_clicked inside the onclick event string (although I wouldn't recommend it as it can make your code messy).
var lastClicked = "none";
function zoomout()
{
// your code
lastClicked = "states";
}
function countyView()
{
//your code
lastClicked = "county";
}
if(lastClicked == "county")
{
}
else if(lastClicked == "states")
{
}
it's possible by using an external variable such as
var clickedLast = "";
function zoomout() {
clickedLast = "stateview";
... your code ...
}
function countyView() {
clickedLast = "countyview";
... your code ...
}

How to disable a Javascript Function when a different one is Enabled?

I have this function:
$(document).ready(function(){
function Fos(buttonSel, inputSel, someValue, cssProperty) {
$(buttonSel).click(function(){
var value = $(inputSel).attr("value");
$("div.editable").click(function (e) {
e.stopPropagation();
showUser(value, someValue, this.id)
var css_obj={};
css_obj[cssProperty]=value;
$(this).css(css_obj);
});
});
}
Here are three places where function is written:
Fos('#border_button', '#border-radius', 2, '-webkit-border-radius');
Fos('#background_color_button', '#background-color', 1, 'background-color');
Fos('#opacity_button', '#opacity', 3, 'opacity');
<input type="text" id="border-radius" value="20px">
<div id="border_button">BORDER RADIUS</div>
<input type="text" id="background-color" value="red">
<div id="background_color_button">Background</div>
<input type="text" id="opacity" value=".5">
<div id="opacity_button">Opacity</div>
<div id="2" class="defaultclass editable" style="<?php getStyle('2') ?>">
something
</div>
When you click the DIV with the ID= "border_button", or "background_color_button", or "opacity_button"
it waits for you to click any DIV with class="editable", ...$("div.editable").click(function (e) {... it executes the function with those parameters.
I just need a fix that will only allow ONE function with the parameters to be enabled at one time.
Currently, when you click on all three divs with ID = "border_button", or "background_color_button", or "opacity_button" AND THEN on a div with class="editable", it executes the function with ALL THREE sets of parameters.
This is bad. I can't figure it out.
You can't "disable" a function, but you can set a variable that will force it to exit right away:
var stopMe = true
function myFunction() {
if(stopMe) {
return;
}
...
}
You seem to be binding and rebinding the same functions over and over, which is probably why you have that e.stopEventPropagation in there. Try assigning the events once and then managing the current state (which button is active) and going from there:
var $currentInput = null;
$("#border_button,#background_color_button,#opacity_button").click(function() {
if ($currentInput == null) {
$currentInput = $(this).prev();
}
});
$("div.editable").click(function(e) {
if ($currentInput == null)
return;
$(this).css(GetCssProperties());
showUser($currentInput.val(), /* where does someValue come from? */, this.id)
$currentInput = null;
});
function GetCssProperties() {
if ($currentInput == null) return null;
var value = $currentInput.val();
if ($currentInput.attr("id") == "border-radius") return {
"-webkit-border-radius": value
}
if ($currentInput.attr("id") == "background-color") return {
"background-color": value
}
if ($currentInput.attr("id") == "opacity") return {
"opacity": value
}
}
working example here: http://jsfiddle.net/HUJ5A/
Run the function for tag with a specific class. And a the end of the function remove this class from the tag.
jQuery(".myclass").click(function(){
/* do something */
jQuery(this).removeClass('myclass');
});
Can't tell everything from your question. But this part $("div.editable").click(function (e) { will bind multiple click events to div.editable each time the user clicks Foo arugments[0] or buttonSel.
This could be a pssible solution:
Have a global variable (or HTML hidden input) say, lastDivClicked, to store the id of the recently clicked div
Update lastDivClicked everytime one of those three divs are clicked upon
Change your function to this:
function Fos(inputSel, someValue, cssProperty) {
var buttonSel = $('#lastDivClicked').val();
$(buttonSel).click(function(){ ... }
}

Categories