function call not executing

s_avinash_s · November 9, 2018

Hi

Function call is not happening.

i have 7 tabs in my code based on following example https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs

Before the tabs are created i have a common section in my web page where it is accessible from any tab.I mean after this section, tabs code comes.

So before tabs code is called am calling a function

function openCity(evt, cityName)

which uses script of tabs code

but that script is not being called.

My code where function call is not executing is

function def()
{
	if(temp1 == 1)
	{
		openCity(event, 'temperature');
	}
	else if(temp2 == 1)
	{
			openCity(event, 'temperature');
	}
	else if(temp3 == 1)
	{
		openCity(event, 'temperature');
	}
	else if(temp4 == 1)
	{
		openCity(event, 'temperature');
	}
	else
	{
			func();
	}
}

In above code, temperature is a tab name which should open that tab only when the above conditions satisfy but it does not work.

Any thing wrong with my call

Ingolme · November 9, 2018

You have a variable called "event" which is not defined anywhere. What is it for?

Unrelated to the issue, your code has four if statements doing the exact same thing, you should put them together with an OR operation like this:

if(temp1 == 1 || temp2 == 1 || temp3 == 1 || temp4 == 1) {
  openCity(event, 'temperature');
} else {
  func();
}

These variables "temp1", "temp2", "temp3" and "temp4" don't seem to be defined anywhere either. You need to define all of your variables and all of your functions.

s_avinash_s · November 10, 2018

Hi

4 statements i have modified as mentioned.

event is used in tabs script

<script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

But i dont understand why this function call is not execuitng

dsonesuk · November 10, 2018

I'm guessing here, as you never ever produce relevant code. That you don't have a element with a id reference that matches the function call argument.

s_avinash_s · November 12, 2018

Hi

Below is my source code.Is there any mismatch between the calling function and function definition.

Please suggest

<form class ="language_home" action="/passwordcheck.txt" method="post">
         

                       Login: <select name='userchoice'  >
                          <option value="1">User</option>
                          <option value="2">Supervisor</option>
                          <option value="3">Admin</option>
                          <option value="4">Service</option>
                        </select>
                    Password:
                     <input type="password" name="pwd" >
                     <button  id="log">Login</button><br/><br/><br/>
                    </form>
  <script>
      var user_login;
	  var supervisor_login;
	  var admin_login;
	  var service_login;
	  var a;
	  var b;
	  var c;
	  var d;
	  var tablinks = document.getElementsByClassName("tablinks");
      var tabcontent = document.getElementsByClassName("tabcontent");
      if (localStorage.activeLI) {
                    tablinks[localStorage.activeLI].className += " active";
                   tabcontent[localStorage.activeLI].style.display = "block";
                }


function openCity(evt, cityName) {
        var i;

        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active",
"");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";

         for (i = 0; i < tablinks.length; i++) {

              if (tablinks[i].className.indexOf("active") !== -1) {
                    localStorage.activeLI = i;
              }
        }


    }
function func()
{
	document.getElementById('id01').style.display='block';
}
function flva()
{   
   if(a == 1 || b == 1 || c == 1 || d == 1) {
   openCity(event, 'temp1');
} 
else 
{
  func();
}
}

function stgt()
{
	if(a == 1 || b == 1 || c == 1 || d == 1) {
   openCity(event, 'temp2');
} 
else 
{
  func();
}
}
function prvar()
{   
    	if(a == 1 || b == 1 || c == 1 || d == 1) {
        openCity(event, 'temp3');
} 
else 
{
  func();
}
    
    
}
function tot()
{

	if(a == 1 || b == 1 || c == 1 || d == 1) {
        openCity(event, 'temp4');
} 
else 
{
  func();
}
}
function inot()
{

		if(a == 1 || b == 1 || c == 1 || d == 1) {
        openCity(event, 'temp5');
} 
else 
{
  func();
}
}
function comsg()
{
		if(a == 1 || b == 1 || c == 1 || d == 1) {
        openCity(event, 'temp6');
} 
else 
{
  func();
}

}
function caltn()
{
    
    if(a == 1 || b == 1 || c == 1 || d == 1) {
        openCity(event, 'temp7');
} 
else 
{
  func();
}
}


function dgst()
{

	    if(a == 1 || b == 1 || c == 1 || d == 1) {
        openCity(event, 'temp8');
} 
else 
{
  func();
}
}
    function user_option() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) 
		{
            user_login=parseInt(this.responseText);
			if(user_login==1)
			{
				a=1;
			}
			else
			{
				a=0;
			}
        }
      };
    xhttp.open("GET", "user_login.txt", true);
    xhttp.send();
    }

    setInterval(user_option, 1000);



          
    function supervisor_option() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) 
		{
            supervisor_login=parseInt(this.responseText);
			if(supervisor_login==1)
			{
				b=1;
			}
			else
			{
				b=0;
			}
			
        }
      };
    xhttp.open("GET", "supervisor_login.txt", true);
    xhttp.send();
    }

    setInterval(supervisor_option, 1000);


              
    function admin_option() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) 
		{
            admin_login=parseInt(this.responseText);
			if(admin_login==1)
			{
				c=1;
			}
			else
			{
				c=0;
			}
        }
      };
    xhttp.open("GET", "admin_login.txt", true);
    xhttp.send();
    }

    setInterval(admin_option, 1000);



  
    function service_option() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) 
		{
            service_login=parseInt(this.responseText);
			if(service_login==1)
			{
				d=1;
			}
			else
			{
				d=0;
			}
        }
      };
    xhttp.open("GET", "service_login.txt", true);
    xhttp.send();
    }

    setInterval(service_option, 1000);

  </script>

Edited November 12, 2018 by s_avinash_s

Ingolme · November 12, 2018

The variable event is not defined. What is event for? If you don't know what it is for, that's an indication that you have been copying code without understanding it.

s_avinash_s · November 12, 2018

Hi

I dont have much idea about event, i have just used a direct code from w3schools for tab creation.

Can you please help me, how to use event and how to define in mycode so that it calss the function correctly./

Ingolme · November 12, 2018

Here's a tutorial describing how to use events properly: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects

dsonesuk · November 12, 2018

The event was initially used for inline onclick event of button element to show specific element with matching Id to cityname argument (see link in first post), but now used in a missmash of functions instead, hoping it will still work.

s_avinash_s · November 12, 2018

Hi

i did not get what exactly is causing the mismatch for functions.

Its not working .

How to use event , still not getting

dsonesuk · November 12, 2018

Well its best to learn the basics as JavaScript runs on events, and the arguments/parameter of functions, these are not there for show! They have a purpose of transferring info to the function which is used to carry out specific action within that function, so YOU need to understand there purpose, else people will get tired of doing the work for you, if you are not prepared to learn it yourself!

You will comply! Spoon feeding with copy and paste code, is not! a option.

s_avinash_s · November 14, 2018

Hi

I tried with following example

var btn = document.querySelector('button'); function bgChange() { var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundColor = rndCol; } btn.addEventListener('click', bgChange);

but still its same.

If i give user_login=1 in html file it works fine.

Please help am not exactly getting what is the issue

dsonesuk · November 14, 2018

random(255)? where is this function?

if you mean JavaScript random() method, and if you actually looked up this method you would find it does not work like that!

https://www.w3schools.com/jsref/jsref_random.asp

s_avinash_s · November 14, 2018

Hi

Actually i tried from https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects

there that function is defined .

similar way i tried with

btn.onclick = function() {

But login related part works if i directly assign a value to variable in html code but does not work when i get a value from server and click the particular tab

dsonesuk · November 14, 2018

So you thought us being so magnificent, we would magically know that! This is what i mean about giving only partial code! You being a copy and paste person, we naturally thought, you copied part but not all of the code from somewhere. GIVE ALL CODE RELEVANT to the problem, JAVASCRIPT and HTML.

s_avinash_s · November 16, 2018

Hi

My current code which i tried with document.querySelector is below.

The contents in temp1 to temp8 should be visible only when correct user is logged in.

Each user has its own priority and some tabs are disabled for some users.

<form class ="language_home" action="/passwordcheck.txt" method="post">
         

                       Login: <select name='userchoice'  >
                          <option value="1">User</option>
                          <option value="2">Supervisor</option>
                          <option value="3">Admin</option>
                          <option value="4">Service</option>
                        </select>
                    Password:
                     <input type="password" name="pwd" >
                     <button  id="log">Login</button><br/><br/><br/>
                    </form>
  <script>
      var user_login;
	  var supervisor_login;
	  var admin_login;
	  var service_login;

function newfun(){  
	var btn=document.querySelector('#temp1a');
  btn.onclick=flva;
  
  var btn1=document.querySelector('#temp2a');
  btn1.onclick=stgt;
  
  var btn2=document.querySelector('#temp3a');
  btn2.onclick=prvar;
  
  var btn3=document.querySelector('#temp4a');
  btn3.onclick=tot;
  
  var btn4=document.querySelector('#temp5a');
  btn4.onclick=inot;
  
  var btn5=document.querySelector('#temp6a');
  btn5.onclick=comsg;
  
  var btn6=document.querySelector('#temp7a');
  btn6.onclick=caltn;
  
  var btn7=document.querySelector('#temp8a');
  btn7.onclick=dgst;
 }
	  
function func()
{
	document.getElementById('id01').style.display='block';
}
function flva()
{
	if((user_login == 1)||(supervisor_login==1)||(admin_login==1)||(service_login==1))
	{
		aler("success");
		openCity(event, 'temp1');
	}
	else
	{
			func();
	}
}

function stgt()
{
	if((user_login == 1)||(supervisor_login==1)||(service_login==1))
	{
		openCity(event, 'temp2');
	}
	else
	{
			func();
	}
}
function prvar()
{
	if((user_login == 1)||(supervisor_login==1)||(service_login==1))
	{
		openCity(event, 'temp3');
	}
	else
	{
			func();
	}
}
function tot()
{
	if((user_login == 1)||(supervisor_login==1)||(service_login==1))
	{
		openCity(event, 'temp4');
	}
	else
	{
			func();
	}
}
function inot()
{
	if((user_login == 1)||(supervisor_login==1)||(service_login==1))
	{
		openCity(event, 'temp5');
	}
	else
	{
			func();
	}
}
function comsg()
{
	if((user_login == 1)||(admin_login==1)||(service_login==1))
	{
		openCity(event, 'temp6');
	}
	else
	{
			func();
	}
}
function caltn()
{
	if((user_login == 1)||(admin_login==1)||(service_login==1))
	{
		openCity(event, 'temp7');
	}
	else
	{
			func();
	}
}
function dgst()
{
	if((user_login == 1)||(admin_login==1)||(service_login==1))
	{
		openCity(event, 'temp8');
	}
	else
	{
			func();
	}
}
    function user_option() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) 
		{
            user_login=parseInt(this.responseText);
        }
      };
    xhttp.open("GET", "user_login.txt", true);
    xhttp.send();
    }

    setInterval(user_option, 1000);



          
    function supervisor_option() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) 
		{
            supervisor_login=parseInt(this.responseText);
        }
      };
    xhttp.open("GET", "supervisor_login.txt", true);
    xhttp.send();
    }

    setInterval(supervisor_option, 1000);


              
    function admin_option() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) 
		{
            admin_login=parseInt(this.responseText);
        }
      };
    xhttp.open("GET", "admin_login.txt", true);
    xhttp.send();
    }

    setInterval(admin_option, 1000);



  
    function service_option() {

      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) 
		{
            service_login=parseInt(this.responseText);
        }
      };
    xhttp.open("GET", "service_login.txt", true);
    xhttp.send();
    }

    setInterval(service_option, 1000);

  </script>




    <style>
     {
    font-family: Arial;
    overflow:auto;
    }

    /* Style the tab */
    .tab {
        overflow: hidden;
        border: 1px solid #fff;
        background-color: #f1f1f1;
    }

    /* Style the buttons inside the tab */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 55px;
        transition: 0.3s;
        font-size: 20px;
    }

    /* Change background color of buttons on hover */
    .tab button:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    .tab button.active {
        background-color: #888;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 0px solid #fff;
        border-top: none;
    }
    </style>


  <!--  <body bgcolor="#5DADE2  ">-->

    <div class="tab">
      <button class="tablinks" id="temp1a" onclick="newfun()">temp1</button>
      <button class="tablinks" id="temp2a" onclick="newfun()">temp2</button>
      <button class="tablinks" id="temp3a" onclick="newfun()">temp3</button>
      <button class="tablinks" id="temp4a" onclick="newfun()">temp4</button>
      <button class="tablinks" id="temp5a" onclick="newfun()">temp5</button>
      <button class="tablinks" id="temp6a" onclick="newfun">temp6</button>
      <button class="tablinks" id="temp7a" onclick="newfun">temp7</button>
      <button class="tablinks" id="temp8a" onclick="newfun">temp8</button>
    </div>

    <div id="temp1" class="tabcontent">
    <select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
    </div>
    
   <div id="temp2" class="tabcontent">
    <form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other  
</form> 
   </div>
    
    
   <div id="temp3" class="tabcontent">
    <form action="/temp3.txt" method="get" id="nameform">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>

<button type="submit" form="nameform" value="Submit">Submit</button>

    </div>
    
    
    <div id="temp4" class="tabcontent">
    <textarea rows="4" cols="50">
    This is text area
    </textarea>
    </div>
    
    <div id="temp5" class="tabcontent">
    <b> examples1 </b>
    </div>
    
    
    <div id="temp6" class="tabcontent">
    <b> examples </b>
    </div>
    
    
    <div id="temp7" class="tabcontent">
        <form action="/temp7.txt" method="get" id="nameform">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>

<button type="submit" form="nameform" value="Submit">Submit</button>
    </div>
    
    <div id="temp8" class="tabcontent">
        <textarea rows="4" cols="50">
    This is text area
    </textarea>
    </div>
    
        <script>

var tablinks = document.getElementsByClassName("tablinks");
      var tabcontent = document.getElementsByClassName("tabcontent");
      if (localStorage.activeLI) {
                    tablinks[localStorage.activeLI].className += " active";
                   tabcontent[localStorage.activeLI].style.display = "block";
                }


function openCity(evt, cityName) {
        var i;

        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active",
"");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";

         for (i = 0; i < tablinks.length; i++) {

              if (tablinks[i].className.indexOf("active") !== -1) {
                    localStorage.activeLI = i;
              }
        }


    }
          </script>

Edited November 16, 2018 by s_avinash_s

Ingolme · November 16, 2018

You're in way over your head, you still have to learn the basics of Javascript and get familiar with them. You need a solid understanding of event listeners and event handlers before you can move on to big projects such as this one.

You should try small exercises for now so that you can learn Javascript properly. A good simple starting project would be to create one event handler that highlights the element that fired the event.

s_avinash_s · November 16, 2018

Hi

i tried with


btn.onclick=flva;

with 

btn.addEventListener('click', flva);

still same issue

Edited November 16, 2018 by s_avinash_s

s_avinash_s · November 17, 2018

Hi

Event was not getting. whether it was a onclcik or ondclick or other event.

That was the problem.

after passing the event as argument to function.it works

Thanks for the help

function call not executing

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in