i will get the value on select with change function in jquery. I used a global variable to get the value, but the console.log don't works outside my function:
jQuery(function($) {
var formule;
$('#group_14').on('change', function() {
formule = this.value;
});
console.log(formule);
});
The console log just works with this code:
jQuery(function($){
var formule;
$('#group_14').on('change', function() {
formule = this.value;
console.log(formule);
});
});
I want to recover my formule variable to use it after in other functions, how can return my variable in all my script?
Think about whats going on with the event as the page loads:
In the below snippet, console.log is outside of the change event so will output to console on page load i.e. before the event has fired, formule is not initialised as anything at that point
jQuery(function($){
var formule;
$('#group_14').on('change', function() {
formule = this.value;
});
//outside of the change event, formule is null or undefined
//until the event is fired and formule is intialised
console.log(formule);
});
The following snippet will output the value for formule after formule has been initialised by the change event
jQuery(function($){
var formule;
$('#group_14').on('change', function() {
formule = this.value;
//formule has been initialised within the scope of the change event
//so is no longer null or undefined and can be used elsewhere
console.log(formule);
});
});
Ok, so how i can solve the problem? i will create a function after with this variable inside to addition it with other variables
Related
I've been working on this code for a while. I have a HTML, JS and a Code.js page.
On changing of the value in a Dropdown list on my HTML form, the item in the Dropdown is passed to the Code.js to have the result returned, however, I keep having NULL as my result. -arr is the result.
Another issue, is that I can see in the script logs that getRowData() is being executed twice, not sure why, but this may be overwriting our array.
HTML
JS
//$('#searchDropdown').one('change', function(){
//$("#searchDropdown").change(function(){
//$('#searchDropdown').on('keyup propertychange change', function(){
//$('#searchDropdown').on('input', function(){
//$('#searchDropdown').one('submit', function(){
$('#searchDropdown').one('change', function(){
var selatr = $('#input1').val();
google.script.run.withSuccessHandler(poperr).getRowData(selatr);
});
function poperr(arr){
alert(arr +" ! ");
}
Code.GS
function getRowData(selatr){
//Vlookup a GoogleSheet and return the resulting row
sheet_data.getRange(2,16).setValue(selatr); //set for vlookup
var x = sheet_data.getRange(3,16).getValues();
var arr= [];
arr.push({
id : selatr
name : sheet_data.getRange(x,2).getValues()
})
return arr;
}
It might be because you have multiple event handlers in your code and your getRowData function is being called twice.
Try e.stopImmediatePropagation(); This stops the rest of the event handlers from being executed.
$('#searchDropdown').one('change', function(e){
e.stopImmediatePropagation();
var selatr = $('#input1').val();
google.script.run.withSuccessHandler(poperr).getRowData(selatr);
});
I would like to disable a certain function from running as an onclick event.
Here, I would like to disable myfunc1, not myfunc2. Actually I want to disable myfunc1 from the whole page, but anyway this is the only thing that I need.
I have no control over the page and I am using userscript or other script injection tools to achieve this.
What I've tried:
Redefining the function after the page has loaded: I've tried adding an event listener to an event DOMContentLoaded with function(){ myfunc1 = function(){}; }
This seems to be working, but in a fast computer with fast internet connection, sometimes it runs before the myfunc1 is defined (in an external js file that is synchronously loaded). Is there any way that I can guarantee that the function will be executed after myfunc1 is defined?
Is there any way that I can 'hijack' the onclick event to remove myfunc1 by its name?
You should use event listeners, and then you would be able to remove one with removeEventListener. If you can't alter the HTML source you will need something dirty like
function myfunc1() {
console.log('myfunc1');
}
function myfunc2() {
console.log('myfunc2');
}
var a = document.querySelector('a[onclick="myfunc1();myfunc2();"]');
a.setAttribute('onclick', 'myfunc2();');
Click me
Or maybe you prefer hijacking the function instead of the event handler:
function myfunc1() {
console.log('myfunc1');
}
function myfunc2() {
console.log('myfunc2');
}
var a = document.querySelector('a[onclick="myfunc1();myfunc2();"]');
var myfunc1_;
a.parentNode.addEventListener('click', function(e) { // Hijack
if(a.contains(e.target)) {
myfunc1_ = window.myfunc1;
window.myfunc1 = function(){};
}
}, true);
a.addEventListener('click', function(e) { // Restore
window.myfunc1 = myfunc1_;
myfunc1_ = undefined;
});
Click me
Another way this could be done is using Jquery and setting the onlick propery on the anchor tag to null. Then you could attach a click function with just myfunc2() attached.
$(document).ready(function () {
$("a").prop("onclick", null);
$("a").click(function(){
myfunc2();
});
});
function myfunc1() {
console.log('1');
}
function myfunc2() {
console.log('2');
}
<a class="test" href="#" onclick="myfunc1();myfunc2();">Example</a>
You can see the codepen here - http://codepen.io/anon/pen/BLBYpO
Perhaps you are into jQuery.
$(document).ready(function(){
var $btn = $('button[onclick*="funcOne()"]');
$btn.each(function(){
var newBtnClickAttr;
var $this = $(this);
var btnClickAttr = $this.attr("onclick");
newBtnClickAttr = btnClickAttr.replace(/funcOne\(\)\;/g, "");
$this.attr("onclick", newBtnClickAttr);
});
});
Where in the variable $btn gets all the button element with an onclick attribute that contains funcOne().
In your case, this would be the function you would like to remove on the attribute e.g., myfunc1();.
Now that you have selected all of the elements with that onclick function.
Loop them and get there current attribute value and remove the function name by replacing it with an empty string.
Now that you have the value which does not contain the function name that you have replace, you can now update the onclick attribute value with the value of newBtnClickAttr.
Check this Sample Fiddle
Need help with converting JQuery to Javascipt.
Im trying to is, by clicking the ‘Change Size’ button result in a call to the new sizeObject.changeSize function and a change to both the Size object’s isSize
variable and the size of the light div in the browser
I dont want to change the HTML. Need help with converting the .click function
var sizeObject;
function createSize(){
//Size object initialisation
sizeObject = new Size();
// size-related event handlers
$('#change').click(function(){
Size.changeSize();
});
}
Instead of :
$('#change').click(function(){
Size.changeSize();
});
Use :
var elem = document.getElementById("change");
elem.addEventListener("click", function() {
Size.changeSize();
});
The regular Javascript function for binding event handlers is addEventListener.
document.getElementById("change").addEventListener("click", function() {
sizeObject.changeSize();
});
jQuery quick question about event handling.
Here's simple code
<div id="txt">change me!</div>
$('#txt').click(function () {
console.log(this);
$(this).text('changed!');
});
this outputs
<div id="txt">changed!</div>
in console. Though console.log(this) is executed before text() method, I get result of text() method is fired. Why is that?
This happens because you are running in 'this' context. As a result what ever you changing in $(this) will get hoisted to top of the function. A simple example:
$('#txt').click(function () {
console.log(this);
var a = 10;
var b = 20;
var c = a+b;
console.log(c);
$(this).text('changed!');
$(this).attr('test','test');
});
will hoist at the top
$(this).text('changed!');
$(this).attr('test','test');
and the result will be
<div id="txt" test="test">changed!</div>
30
JSFiddle
Console.log fires late in Chrome. If you wanted to log an element at the time of the click, you could create a clone of the element and then log the clone per this SO post.
Also, this should be inside the $(document).ready function
$(document).ready(function () {
$('#txt').click(function () {
var foo = $(this).text();
console.log(this); // Will have changed! because it's firing after everything else
$(this).text('changed!');
console.log(foo);
});
});
Console Output
<div id="txt">changed!</div>
change me!
See Updated JsFiddle
I have a block of code like so:
function doSomething() {
someVar.on("event_name", function() {
$('#elementId').click(function(e) {
doSomething();
});
});
}
// and on document ready
$(function () {
$('#anotherElemId').click(function () {
doSomething();
});
});
The problem that I'm encountering is that when I call doSomething() from anotherElemId click event(that is binded on document ready) it works as expected, but calling it recursively from elementId click doesn't work.
Any ideas? Thinking is something trivial that I'm missing.
Is someVar an actual jQuery reference to a dom element? (e.g. $('#someitem'))
The second problem is you cant put a .click event inside a function that you would like to instantiate later on. If you are trying to only allow #elementId to have a click event AFTER some previous event, try testing if a tester variable is true:
var activated = false;
$(function () {
$('#anotherElemId').click(function () {
activated = true;
});
$('#secondElemId').on("event_name", function() {
if (activated) {
// code that happens only after #anotherElemId was clicked.
}
});
});