Define ID of clicked element and pass it through to another function - javascript

I want to pass variable "pageSetUp" from the on click event go through to function x and I keep going in circles.. I'm still a bit of noob when it comes to js. I'd really appreciate your help. Thanks!
$(".link").click(function() {
var pageSetUp = $(this).attr("ID");
});
function x(pageSetUp){
if(pageSetUp == page1){
//do something
}
else if(pageSetUp == page2){
//do something else
}else{
}
});
x();

you need call x with desired parameter.:
$(".link").click(function() {
var pageSetUp = $(this).attr("ID");
x(pageSetUp);
});
function x(pageSetUp){
if(pageSetUp == page1){
//do something
}
else if(pageSetUp == page2){
//do something else
}else{
}
};

Related

How do I catch the swipe type with jQuery?

I have these lines of code in jQuery and I need to catch the name of the swype type in a string.
$('.client-content').on('swipeleft swiperight', function(){
var curActiveClient = $('.clients-belt').find('.active-client'),
position = $('.clients-belt').children().index(curActiveClient),
clientNum = $('.client-unit').length;
if (event === 'swipeleft') {
//do something
} else if (event === 'swiperight') {
//do something else
}
If I'm understanding correctly, what you want is to know whether the swipe is left or right...
$('.client-content').on('swipe', function(){
var curActiveClient = $('.clients-belt').find('.active-client'),
position = $('.clients-belt').children().index(curActiveClient),
clientNum = $('.client-unit').length;
$(this).on("swipeleft", function(){
//some code
})
$(this).on("swiperight", function(){
//some code
})
}

MessageBox shown after function is over

I have a javascript function that calls my javascript function, my func islike this:
function sugParitValidation(){
var isValid = false;
Ext.MessageBox.confirm(' ','Are you sure you want to do this?', function(btn){
if(btn == 'yes'){
isValid = true;
}
});
return isValid ;
}
My problem is - if statement and the return statment is happening, and only after that the confirm window being shown.
That way I can't react to what the user choosed.
how to solve this? tried allready use setTimeOut, no change at all....
i think you are trying to do something like this.
someFunction(){
if(sugParitValidation()){
//todo something
}
else{
//todo another thing
}
}
you can do this easyly with callbacks. This is the example.
someFunction(){
var messageCallback = function(btn){
if(btn === 'yes'){
//todo something
}
else{
//todo another thing
}
}
Ext.MessageBox.confirm(' ','Are you sure you want to do this?',
messageCallback);
}

How to call a table using its Id in a javascript with if-else statements

Am trying to show a table using a value "graph". if graph value is 0 then it should display table1(id of table), if value of graph is 10 , it should display table2(id of table). am trying to show this with java script with if else case. i don't know how to call a table within java script in if else statements
<script>
$(document).ready( function () {
myFunc();
});
function myFunc(){
console.log("input value", document.getElementById("graph").value)
if (document.getElementById('graph').value==00){
}
}</script>
how to write here to call a table in if else statement
Assuming both tables are available on the document when the function is called, it should look something like this....
<script>
$(document).ready( function () {
myFunc();
});
function myFunc(){
console.log("input value", document.getElementById("graph").value);
var val = document.getElementById("graph").value;
document.getElementById('table1').style.display = val== 0 ? '' : 'none';
document.getElementById('table2').style.display = val== 10 ? '' : 'none';
}</script>
if you want to do it in a if else if....
//First hide both tables
document.getElementById('table1').style.display = 'none';
document.getElementById('table2').style.display = 'none';
var val = document.getElementById("graph").value;
//then show the one we want
if(val==0)
document.getElementById('table1').style.display = '';
else if(val == 10)
document.getElementById('table2').style.display = '';
Hope that helps
Try doing with Jquery if possible . Hope it helps !
$(document).ready(function(){
if($('#graph').val()=='00'){
$('#table1').show();
$('#table2').hide();
}else if($('#graph').val()=='10'){
$('#table2').show();
$('#table1').hide();
}
});
Try this one...it has been tested...
jQuery(document).ready( function () {
myFunc();
});
function myFunc()
{
console.log("input value", document.getElementById("test").value);
if (document.getElementById('test').value=="testing"){
alert("got in if");
}
else
{
//this will hit the column of a table now change it according to your requirements
//you may write $ instead of jQuery,I assigned a value to a column you set it as you need...
jQuery("#your_target_id_in_table").val("hello");
alert(jQuery("#your_target_id_in_table").val()); //you may write $ instead of jQuery
}
}

Change image src back and forth after first click

What I want to happen is... when the image 'x' is clicked i want it to change image then when it is clicked again i want it to change back so on and so fourth, however I only want this to happen on the second click.
So X is clicked & nothing happens,
Then when it is clicked again it changes images,
and then back after another click, and then it alternates back and forth after that,
until the page resets, then i want it to reset as well.
this is my code so far:
document.getElementById('x').onclick = function() {
var ClickedOnce = 0;
if (this.src == 'Media/Images/Other/SwitchUP.jpg') {
ClickedOnce + 1
}
if (this.src == 'Media/Images/Other/SwitchUP.jpg' && ClickedOnce > 1) {
this.src = 'Media/Images/Other/SwitchDOWN.jpg';
} else if ('Media/Images/Other/SwitchDOWN.jpg') {
this.src = 'Media/Images/Other/SwitchUP.jpg';
}
}
It looks like the reason this isn't working is because you are declaring the var ClickedOnce inside of a function. This means that it is a local variable inside that function that will be set to 0 every time that function is called. Therefore, the same thing will happen every time it is clicked.
Try declaring some variable outside of the function.
You can try something like this:
var wasClicked = false;
document.getElementById('x').onclick = function() {
if (!wasClicked) {
wasClicked = true;
return;
}
if (this.getAttribute("src") == 'Media/Images/Other/SwitchUP.jpg') {
this.setAttribute("src", 'Media/Images/Other/SwitchDOWN.jpg');
} else {
this.setAttribute("src", 'Media/Images/Other/SwitchUP.jpg');
}
}
Additionally, since you tagged this question with jQuery, here is a jQuery approach to it:
var wasClicked = false;
$(document).ready(function() {
$("#x").click(function() {
if (!wasClicked) {
wasClicked = true;
return;
}
if ($(this).attr("src") == "path/to/some/image") {
$(this).attr("src", "path/to/other/image");
} else {
$(this).attr("src", "path/to/some/image");
}
});
});

Place a variable as a HREF

Basically, is it possible to do something like....
Click me!
<script>
function clicked() {
if(myVar == 1) {
link="http://stackoverflow.com"
}
else if (myVar == 2) {
link="http://google.com"
}
}
</script>
This example is probably impossible due to it firing at the same time...
But is it at all possible to use variables there?
Basically, I need a link that'll bring you to two different places depending on a variable.
I suppose I could have two links, and just hide/show each one respectively depending on the variable, but I was wondering if it's possible another way?
I'm working with HTML, CSS, JavaScript, and JQuery...
Thank you!
You could do...
$('a').click(function(event) {
if (condition) {
event.preventDefault();
window.location = 'http://different-url.com';
}
});
If the condition is met, then it will take you to a different URL.
Otherwise, the link will work as expected.
If you didn't want to use jQuery, that'd be...
var anchors = document.getElementsByTagName('a');
for (var i = 0, anchorsLength; i < anchorsLength; i++) {
anchors[i].onclick = function(event) {
if (condition) {
event.preventDefault();
window.location = 'http://different-url.com';
}
}
}
You could simply use Javascript to do a redirect:
<script>
function clicked() {
if(myVar == 1) {
window.location = "http://url1.com";
}
else if (myVar == 2) {
window.location = "http://url2.com";
}
}
</script>
No it's not possible to do it the way you want.
Why don't you do this instead -
Click me!
<script>
function clicked()
{
if(myVar == 1)
{
window.location.href = "www.stackoverflow.com";
}
else if (myVar == 2)
{
window.location.href = "www.google.com";
}
}
Take a look at Mozilla Developer Center for further references about the window.location object.
you could do this:
<script> function clicked() {
if(myVar == 1) {
window.location="http://stackoverflow.com"
}
else if (myVar == 2) {
window.location="http://google.com"
} }
</script>
Try this out
Click me!
<script>
function clicked() {
if(myVar == 1) {
location.replace("http://stackoverflow.com");
}
else if (myVar == 2) {
location.replace("http://google.com");
}
}
</script>
Cheers. This will take you to the desired place based on the myVar values!
function clicked() {
var dest = "";
if(myVar)
dest = "http://stackoverflow.com";
else
dest = "http://google.com"
window.navigate(dest);
But I see everyone said about the same. Just check which of the methods works on most browsers

Categories

Resources