I am looking to make a checkbox that when unchecked, will turn off a certain function in a .js file. Can someone help me?
popup.html
HTML Check box:
content.js
Turn off this function:
var tweet = new Array();
var tweetName = new Array();
function linkSnipe() {
for (var i = 0; i < 5; i++) {
tweetName[i] = document.getElementsByClassName("fullname js-action-profile-name show-popup-with-id")[0].innerHTML;
tweet[i] = document.getElementsByClassName("js-tweet-text")[i].innerHTML;
}
if (tweet[0].match(shoeName) == shoeName && tweet[0].match(filterer) != filterer && tweet[0].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[0].click();
update();
}
}
else if (tweet[1].match(shoeName) == shoeName && tweet[1].match(filterer) != filterer && tweet[1].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[1].click();
update();
}
}
else if (tweet[2].match(shoeName) == shoeName && tweet[2].match(filterer) != filterer && tweet[2].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[2].click();
update();
}
}
else if (tweet[3].match(shoeName) == shoeName && tweet[3].match(filterer) != filterer && tweet[3].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[3].click();
update();
}
}
else if (tweet[4].match(shoeName) == shoeName && tweet[4].match(filterer) != filterer && tweet[4].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[4].click();
update();
}
}
else if(checkon == "Tweets") {
location.reload();
}
}
setTimeout("linkSnipe()", 250);
}
When the checkbox is checked, redefine the function as:
<input type=checkbox ..... onchange="doit()">
function doit() {
window.linkSnipe=function() {}
}
I've used this too:
function doit() {
window['linkSnipe']=function() {}
}
If you want to turn the function on and off by the checkbox:
<input type=checkbox ..... onchange="doit(this)">
var linkSnipeSave = linkSnipe;
function doit(ck) {
if (ck.checked)
window['linkSnipe']=linkSnipeSave
else {
linkSnipeSave = linkSnipe; //not sure if this line is needed...pls test
window['linkSnipe']=function() {}
}
}
You could simply have a Boolean variable that changes with the state of your check box. You could then put an if statement around the function call that will only trigger if the checkbox is checked.
http://jsfiddle.net/W5P8X/
//initialize some variables.
bike_checked = false;
car_checked = false;
//get elements by their ID from html
bike = document.getElementById("bike");
car = document.getElementById("car");
//add event listeners to the html elements we found above
bike.addEventListener("click", toggle_bike, false);
car.addEventListener("click", toggle_car, false);
//toggle bike_checked variable on click
function toggle_bike(){
if(bike_checked == true)
bike_checked = false;
else
bike_checked=true;
current_state();
}
//toggle car_checked variable on click
function toggle_car(){
if(car_checked == true)
car_checked = false;
else
car_checked=true;
current_state();
}
//output current state.
function current_state(){
if(car_checked == true)
alert('Car checked');
if(bike_checked == true)
alert('Bike checked');
}
I answered with only javascript and no jQuery, but you could probably make it a bit more concise with jQuery.
I hope this helps.
Related
I am designing a website such that a question appears on each page and users can go through the questions by clicking on the "Next" button at the bottom of every page and proceed to the next page. I want to add a back button as well so that they can go the previous pages and change their answers whenever needed.
This is the HTML code for the "Next" button:
<button ng-disabled="question.answer === undefined || question.answer == '' || question.answer == {}" ng-click="RC.nextQuestion()" type="button" class="btn btn-default" style="float:right ; margin-top:20px">Next</button>
This is the JavaScript code for the "Next" button:
this.next = function(){
if(self.state == "workerIdSlide"){
if(self.questionId == null && self.partId == null){
self.load(function(){
self.state = self.allStates[++self.slideIndex];
});
return;
}
}
if(self.slideIndex + 1 < self.allStates.length){
self.state = self.allStates[++self.slideIndex];
}else{
self.submitResults(self.resultsSubmitted, self.handleError);
}
};
This is what I tried as for the JavaScript code:
this.previous = function(){
if(self.state == "workerIdSlide"){
if(self.questionId == null && self.partId == null){
self.load(function(){
self.state = self.allStates[--self.slideIndex];
});
return;
}
}
};
this.previousQuestion = function(){
if(self.questionIndex == 0{
++self.questionIndex;
else{
self.previous();
}
};
But, it did not work. Can someone tell me how I can add a "Back" button?
Add:
this.previousQuestion = function(){
if(self.questionIndex != 0){
--self.questionIndex;
}else{
if(self.questionIndex + 1 >= self.questions.length){
self.next();
}
}
};
Remove:
this.previous = function(){
if(self.state == "workerIdSlide"){
if(self.questionId == null && self.partId == null){
self.load(function(){
self.state = self.allStates[--self.slideIndex];
});
return;
}
}
};
The complete code:
this.next = function(){
if(self.state == "workerIdSlide"){
if(self.questionId == null && self.partId == null){
self.load(function(){
self.state = self.allStates[++self.slideIndex];
});
return;
}
}
if(self.slideIndex + 1 < self.allStates.length){
self.state = self.allStates[++self.slideIndex];
}else{
self.submitResults(self.resultsSubmitted, self.handleError);
}
};
this.nextQuestion = function(){
if(self.questionIndex + 1 < self.questions.length){
++self.questionIndex;
}else{
self.next();
}
};
this.previousQuestion = function(){
if(self.questionIndex != 0){
--self.questionIndex;
}else{
if(self.questionIndex + 1 >= self.questions.length){
self.next();
}
}
};
I have made a solar system simulation and have some 'settings' which the user can change. I have made it so the settings only update when the save button is pressed. This works and the bodies are hidden if a box is checked but say for example, i checked mercury and saved the changes then wanted to check Venus as well when i save the changes Venus is hidden but Mercury is shown again. how can i make it so that Mercury stays hidden until the box in uncheked.
(note the check boxes decide whether a planet should be hidden or not so hideMer for example when true would stop drawing mercury onto the canvas)
code which i think the issue applies to:
function animate() {
//clears canvas each new loop
if (showPath==false){
c.clearRect(-innerWidth/2,-innerHeight/2,innerWidth,innerHeight);
}
hideBodies = [hideMer, hideVen, hideEar, hideMar, hideJup, hideSat, hideUra, hideNep];
drawSun();
for (var i=0; i< xPosList.length; i++){
leapfrog(i);
if (hideBodies[i]==false){
drawBody(i);
}
}
}
function saveChanges() {
showPath=(document.getElementById("showPath").value=="True");
//Mercury
if (document.getElementById("mer").checked && hideMer == false){
hideMer = true;
} else if (document.getElementById("mer").checked && hideMer == true){
hideMer = false;
}
//Venus
if (document.getElementById("ven").checked && hideVen == false){
hideVen = true;
} else if (document.getElementById("ven").checked && hideVen == true){
hideVen = false;
}
//Earth
if (document.getElementById("ear").checked && hideEar == false){
hideEar = true;
} else if (document.getElementById("ear").checked && hideEar == true){
hideEar = false;
}
//Mars
if (document.getElementById("mar").checked && hideMar == false){
hideMar = true;
} else if (document.getElementById("mar").checked && hideMar == true){
hideMar = false;
}
//Jupiter
if (document.getElementById("jup").checked && hideJup == false){
hideJup = true;
} else if (document.getElementById("jup").checked && hideJup == true){
hideJup = false;
}
//Saturn
if (document.getElementById("sat").checked && hideSat == false){
hideSat = true;
} else if (document.getElementById("sat").checked && hideSat == true){
hideSat = false;
}
//Uranus
if (document.getElementById("ura").checked && hideUra == false){
hideUra = true;
} else if (document.getElementById("ura").checked && hideUra == true){
hideUra = false;
}
//Neptune
if (document.getElementById("nep").checked && hideNep == false){
hideNep = true;
} else if (document.getElementById("nep").checked && hideNep == true){
hideNep = false;
}
console.log(hideMer);
alert(hideMer);
}
whole code: https://jsfiddle.net/nczpod06/6/
In the function save changes for each planet I'm only changing the boolean value when it is checked and not when it is unchecked. To fix this (for example for mercury) I needed to add the not boolean logical operator and then it works... for example:
//Mercury
if (document.getElementById("mer").checked && hideMer == false){
hideMer = true;
} else if (!(document.getElementById("mer").checked) && hideMer == true){
hideMer = false;
}
I have some problem when I check the function validation, I need when checking all the cassis is true hide the parent div * errors message *
var error_pass = false;
$('#pass').focusout(function(){
check_pass();
error_pass = false;
if(error_pass !== true){
console.log('its showing!');
}else{
$('.test').fadeOut('522');
}
});
function check_pass() {
var fpass= $('#pass').val();
switch(error_pass = true){
case(fpass.length < 6 ? $('#pass-error-message3').css('color','red'):$('#pass-error-message3').css('color','green') ):
$('#pass-error-message3').show();
case(fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1 ? $('#pass-error-message4').css('color','red') : $('#pass-error-message4').css('color','green')):
$('#pass-error-message4').show();
case(fpass.search(/\d/) == -1 ? $('#pass-error-message2').css('color','red'):$('#pass-error-message2').css('color','green')):
$('#pass-error-message2').show();
default:break;
}
}
Use if else statements like this
function validation() {
var error = false;
if (fpass.length < 6) {
error = true;
$('#pass-error-message3').css('color', 'red').show();
} else {
$('#pass-error-message3').css('color', 'green');
}
if (fpass.search(/(?=.[a-z])(?=.*[A-Z])/) == -1) {
error = true;
$('#pass-error-message4').css('color', 'red').show();
} else {
$('#pass-error-message4').css('color', 'green')
}
if(fpass.search(/\d/) == -1){
error = true;
$('#pass-error-message2').css('color','red').show();
}else{
$('#pass-error-message2').css('color','green');
}
if(error === false){
hideParentDiv(); // Here hide the div
}
}
Much cleaner approach
I'm trying to teach myself how to code a simple text game. I found a YouTube tutorial and am working my way through Der Kerker. A problem I have is that his final code doesn't match what he did in the videos, so I'm stuck.
Here's my problem:
When you load the game, the commands "take sword" and "help" both work as designed. However, if you put in jibberish or an unrecognized command, the game is supposed to say, "I don't understand ... "
Right now, it only clears the input box but doesn't actually run the command.
Here's my fiddle of the game:
https://jsfiddle.net/megler/hv7hqp1e/
If I remove the (check == false) portion - then the "I don't understand" part will work. However, if you type "help" - it will run the help segment AND say "I don't understand help."
The goal is for it to only say "I don't understand" if the player types in an unrecognized command.
Here's the JS:
//Check To See If True Function
var check = false;
// Been To Room Variables
var beenToCorridor = true;
//
//Inventory
var sword = false;
//
//Current Room
var currentRoom = "nCorridor";
$(document).ready(function() {
$("form").submit(function() {
var input = $("#commandLine").val();
function check() {
check = true;
}
if (input == "help") {
$("#messageHelp")
.clone()
.insertBefore("#placeholder")
.fadeIn(1000);
check();
}
if (input == "take sword" && currentRoom == "nCorridor") {
$("<p>You picked up a sword.</p>")
.hide()
.insertBefore("#placeholder")
.fadeIn(1000);
check();
}
else if (input == "take sword" && currentRoom != "nCorridor") {
$("<p>The sword is not here.</p>")
.hide()
.insertBefore("#placeholder")
.fadeIn(1000);
check();
}
else if (check == false) {
$("<p>I don't understand " + input + ".</p>")
.hide()
.insertBefore("#placeholder")
.fadeIn(1000);
}
$("#commandLine").val("");
});
});
Hope that makes sense.
I think this is what you want:
Code Replaced:
else if (input != "take sword" && input != "help") {
$("<p>I don't understand " + input + ".</p>").hide().insertBefore("#placeholder").fadeIn(1000);
}
Snippet:
//Check To See If True Function
var check = false;
// Been To Room Variables
var beenToCorridor = true;
//
//Inventory
var sword = false;
//
//Current Room
var currentRoom = "nCorridor";
$(document).ready(function() {
$("form").submit(function() {
var input = $("#commandLine").val();
function check() {
check = true;
}
if (input == "help") {
$("#messageHelp").clone().insertBefore("#placeholder").fadeIn(1000);
check();
}
if (input == "take sword" && currentRoom == "nCorridor") {
$("<p>You picked up a sword.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
check();
}
else if (input == "take sword" && currentRoom != "nCorridor") {
$("<p>The sword is not here.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
check();
}
else if (input != "take sword" && input != "help") {
$("<p>I don't understand " + input + ".</p>").hide().insertBefore("#placeholder").fadeIn(1000);
}
else
{
return false;
}
$("#commandLine").val("");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="console">
<p id="message_startGame">Welcome to my game!</p>
<p id="area_northCorridor">You are in the North Corridor. There is a sword on the ground.</p>
<p id="messageHelp" style = "display: none;">Here is a list of commands</p>
<!-- PLACEHOLDER: THIS IS WHERE EVERYTHING WILL BE INSERTED BEFORE
--->
<div id="placeholder"></div>
<form onsubmit="return false;">
<input type = "text" size ="50" autofocus="autofocus" id="commandLine">
</form>
</div>
</body>
Use different name for check variable. You should also separate last else if.
//Check To See If True Function
var _check = false;
// Been To Room Variables
var beenToCorridor = true;
//
//Inventory
var sword = false;
//
//Current Room
var currentRoom = "nCorridor";
$(document).ready(function() {
$("form").submit(function() {
var input = $("#commandLine").val();
function check() {
_check = true;
}
if (input == "help") {
$("#messageHelp")
.clone()
.insertBefore("#placeholder")
.fadeIn(1000);
check();
}
if (input == "take sword" && currentRoom == "nCorridor") {
$("<p>You picked up a sword.</p>")
.hide()
.insertBefore("#placeholder")
.fadeIn(1000);
check();
}
else if (input == "take sword" && currentRoom != "nCorridor") {
$("<p>The sword is not here.</p>")
.hide()
.insertBefore("#placeholder")
.fadeIn(1000);
check();
}
if (_check == false) {
$("<p>I don't understand " + input + ".</p>")
.hide()
.insertBefore("#placeholder")
.fadeIn(1000);
}
$("#commandLine").val("");
});
});
You should
first initialize var check = false; somewhere, otherwise the if condition never passes
add an else to your list of if ... else if ... checks.
Here's is the corrected code:
$(document).ready(function () {
$("form").submit(function () {
var input = $("#commandLine").val();
// INITIALIZE CHECK VARIABLE HERE
var check = false;
function check() {
check = true;
}
if (input == "help") {
$("#messageHelp").clone().insertBefore("#placeholder").fadeIn(1000);
check();
}
// NEEDS AN ADDITIONAL ELSE HERE TO PREVENT DOUBLE MESSAGE AFTER HELP
else if (input == "take sword" && currentRoom == "nCorridor") {
$("<p>You picked up a sword.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
check();
} else if (input == "take sword" && currentRoom != "nCorridor") {
$("<p>The sword is not here.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
check();
} else if (check == false) {
$("<p>I don't understand " + input + ".</p>").hide().insertBefore("#placeholder").fadeIn(1000);
}
$("#commandLine").val("");
});
});
Reset the check variable back to false every time the form is submitted, so you s=tart from a clean slate each time it is called. Also rename your function 'check' to 'setChecked' to not cause confusion between the global variable and the local function name.
$("form").submit(function() {
check = false;
function setChecked() {
check = true;
}
if (input == "help") {
setChecked();
}
//etc...
}
It's because you redefine 'check' as a function, so it's not equal to false anymore.
The solution is to use another name for your boolean, for example 'ischeck', like this:
//Check To See If True Function
var ischeck = false;
// Been To Room Variables
var beenToCorridor = true;
//
//Inventory
var sword = false;
//
//Current Room
var currentRoom = "nCorridor";
$(document).ready(function() {
$("form").submit(function() {
var input = $("#commandLine").val();
function check() {
ischeck = true;
}
if (input == "help") {
$("#messageHelp").clone().insertBefore ("#placeholder").fadeIn(1000);
check();
}
if (input == "take sword" && currentRoom == "nCorridor") {
$("<p>You picked up a sword.</p>").hide().insertBefore ("#placeholder").fadeIn(1000);
check();
}
else if (input == "take sword" && currentRoom != "nCorridor") {
$("<p>The sword is not here.</p>").hide().insertBefore("#placeholder").fadeIn(1000);
check();
}
else if (ischeck == false) {
$("<p>I don't understand " + input + ".</p>").hide().insertBefore("#placeholder").fadeIn(1000);
}
$("#commandLine").val("");
});
});
I have drop-down and text-box in a gridview and I am trying to check if the selected value of a drop-down is set to "No" and no comments is entered in the text-box then i want to show message. The requirement should be as long as the selected value of the drop down is set to No then comments must be entered in the text-box. My issue is that i am getting the message even if the drop-down is set to Yes or comments is provided when the drop down is set to No. Here is the code:
function validate() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var ddl = gridView.rows[i].getElementsByTagName('Select');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (ddl != null && ddl.length > 1 && ddl[0] != null && areas != null && areas.length > 1 && areas[0] != null) {
if (areas[0].type == "textarea" && ddl[0].type == "select-one") {
var txtval = areas[0].value;
var txtddl = ddl[0].value;
if (txtddl.value == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true
}
}
}
}
if (!flag) {
alert('Please note that comments is required if drop down is set to No. Thanks');
areas[i].focus();
}
return flag;
}
</script>
You can do like this:
<script>
function validate() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var selects = gridView.rows[i].getElementsByTagName('select');
//var inputs = gridView.rows[i].getElementsByTagName('input');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (selects != null && areas != null) {
if (areas[0].type == "textarea") {
var txtval = areas[0].value;
var selectval = selects[0].value;
if (selectval == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true;
}
}
}
}
if (!flag) {
alert('Please enter comments. Thanks');
}
return flag;
}
</script>
Try this:
$('#select').on('change', function () {
var text = $(this).find(":selected").text();
var textBox = $(this).parent().filter('input [name="InputName"]');
if(text == "no" && textBox.val() =="")
{
\\display your message
}
});