Jquery global variable assignment and using in javascript function - javascript

I have a global variable listId(refer the below code) declared with a default value and then I am assigning it inside the jq("#nav1 li a").click(function() But once any of the other javascript function call takes place after this one, the listId does not reflect the changed value, instead its just the default value assigned during declaration. How can I make it reflect the changed values?
thanks
listId = 'x';
var jq=jQuery.noConflict();// for avoiding conflict
jq("#nav1").click(function(){
alert(this.id);
listId = this.id; //this.id is displayed in alert message
});
function pageSwitch(){
alert('on change id : '+listId);
//when called after the click function, this does not reflect changed values
}

The code you supplied worked for me. The listId variable was successfully changed to "nav1". I've written up a little test script, which changes listId to the div's id onClick, and then uses a function to change it back to "x". It works every time. Click here to test it.

Thanks guyz for the help..actually the function was invoked on click of an h:commandLink..so each time the page got reloaded and so did the js functions...I just used the a4j:commandLink and it worked fine...I should have presented the full picture..Sorry for that..will take care next time.

Related

Onclick function changes value

I want an easy way to set a variable value equal to n when function(n) runs.
Hovedkort
Prosessor
Arbeidsminne
I have this piece of HTML code. And I want the loadProdType function to change the value of a variable prodCat according to loadProdType's value. I tried the code under with and witout localstorage.setItem(loadCat, j). The js document is linked and there are no linking errors cause other pieces of code runs as it should.
var loadCat = 0
function loadProdType(j){
loadCat = j}
How can I set loadCat's value equal to loadProdType's value/parameter.
Thanks in Advance.
Edit:
Unsure how to set local storage for this but what I want the code to do is the following:
Change the value of variable prodCat according to the value of the onclick function.
Redirect to: products.html
When in products.html I run a piece of code that uses the prodCat value to choose a spesific index in an array.
All in all I just need to be able to change prodCat on one page(to the value of a funcion or with a onclick) and have it saved on the next.
Last edit
I'll create different functions for each onclick and try that with local storage.
You need either ? in the URL or local storage.
?
In main document:
location.href = "products.html?prodType=" + loadCat;
In products.html:
var loadCat = new URL(document.URL).searchParams.get("prodType");
localstorage
In main document:
window.localStorage.setItem("prodType", loadCat);
In products.html:
var loadCat = window.localStorage.getItem("prodType");

Button to increment value won't show the value?

I am trying to create a very basic JavaScript function that will increment a variable by 1 whenever it is clicked, and the variable will be displayed on the same page and show any updated value. I can't seem to get the variable to write to the HTML document, what am I doing wrong?
I assume the button works fine, but I don't think it is calling the function correctly:
function cookieClick(number) {
cookies = cookies + number;
document.getElementById("incrementValue").innerHTML = cookies;
}
Here's the Fiddle: https://jsfiddle.net/6aj2zxb6/
Change the JavaScript setting Load type to No Wrap - in head in jsfiddle
This is working fine
https://jsfiddle.net/6aj2zxb6/3/
You problem was solved by fiddle settings, but if you are interested, try this:
You can assign counter value into cookieClick property
function cookieClick(number) {
if(cookieClick.counter)cookieClick.counter=0;
cookieClick.counter += number;
document.getElementById("incrementValue").innerHTML = cookieClick.counter;
}
If you have var counter in the global (window) scope, it is more easy to overwrite it by another similar code. This is more safe solution. You can use it as a cache in future;-)

Javascript Debugging in Chrome Console

I have below piece of code.
<div id="start_3333" onclick="doCalc(3333, this)"></div>
function doCalc(this)
{
var id = $(this).attr(id);
Console.log(id);
}
This div gets inserted for every row in data tables. I would like to test this function doCalc in console window of Chrome by typing doCalc(3333) but getting undefined error. how do I pass "this" object in Chrome's console window so that I can debug and check what value is getting transferred to "id" variable within the function.
I would suggest a different implementation:
<div id="start_3333"></div>
$("#start_3333").click(function(event) {
console.log($(event.target).attr("id"));
});
Get a reference to your div:
var $myRef = $('start_3333');
Run your function:
doCalc($myRef);
and of course as I commented above, make the 'c' in 'console' lowercase because JavaScript is case sensitive.
To answer the general question.
Go into the Elements tab of the debugger, and find the element you want to use. If you click on it, it will display == $0 next to the element. This means that you can use the variable $0 in the console to refer to that element. Also, the previous item that you clicked on becomes $1, the one before that is $2, and so on. So you can then type
doCalc(3333, $0)
in the console to run your function with that element as the argument.
This won't work for your function, since it's not declared to take two arguments. Your function should be something like:
function doCalc(num, element) {
var id = element.id;
console.log(id);
}

jQuery accessing updated values from variables on different events

I have a function which copies the values of a group of inputs to another group of inputs if the user clicks a button.
The function works fine but I'm having trouble with the vars I'm using to get the information. I want to use global variables because I want to use the same variables later on but it only works when I wrap those vars inside the function.
I've posted the two scenarios where it's working and not working below. Can anyone explain why I cannot access the correct value at that given time using a global variable?
EDITS: The 3 elements #admin-name, #admin-email and #admin-number are all present in the DOM when the script is called, as I am doing everything with document ready. I understand that when the script first runs these values will be blank because they haven't been filled out by the user yet. What I don't understand is why can't jQuery get the value once it has been filled out and I call the variable on the click function.
Not Working
var contactName = $('#contact-name').val();
var contactEmail = $('#contact-email').val();
var contactNumber = $('#contact-number').val();
$(".step-two .copy-details").on('click', function(){
$('#admin-name').val(contactName);
$('#admin-email').val(contactEmail);
$('#admin-number').val(contactNumber);
});
Working
$(".step-two .copy-details").on('click', function(){
var contactName = $('#contact-name').val();
var contactEmail = $('#contact-email').val();
var contactNumber = $('#contact-number').val();
$('#admin-name').val(contactName);
$('#admin-email').val(contactEmail);
$('#admin-number').val(contactNumber);
});
Man I struggled with this one, this post helped flesh it out for me, jQuery Global Variable. The problem is the variable called in the click function was still getting the original value of 0. To make the variable update when a new value is added you need to declare it and then wrap it in a change function like so:
JS
// declare the variable
var contactName;
// wrap it in a change function so the value updates
$('#contact-name').on('change', function(){
contactName = $('#contact-name').val();
});
// use the variable inside the function and it will show the updated value
$('.step-two').on('click', 'button', function(){
$('#admin-name').val(contactName);
console.log('contactName = ' + contactName);
});

Array of HTML buttons with on click event to return an attribute

I am trying to create an array of buttons with an onclick event alerting an attribute.
the buttons are created with no problem and every time I create a problem I set up an alert of the attribute. this works perfect.
Every time you press a button, the right function is called, and it works great, but for some reason I get the second alert to say "undefined"
Just look at the code, it explains it self better then I can.
var i = 0
var insertframe = function () {
savebutton[i].index = i
//this works!
alert(savebutton[i].index)
savebutton[i].click(function (event) {
//this returns "undefined"
alert(savebutton[i].index)
})
i++
}
Solution:
instead of naming the object, I had to use "this" instead so, instead of:
savebutton[i].index
use:
this.index

Categories

Resources