why is my input not triggering my function

Question

I made input buttons, and for some reason they are not triggering my functions ... can some one shine a light on this?

<div id="windowBar">
  <h3>If you were Chuck Norris...</h3>
  <input id="WindowClose" type="button" onclick="close();"></input>
  <input id="windowSmall" type="button" onclick="min();"></input>
</div>

and my jQuery:

function close() {
  $("#inputWindow").hide(300);
}

function min() {
  if (minimize === false) {
    $("#inputWindow").hide();
    $('#windowBar2').css('display','block');
    $('#windowBar2 h3').css('display','block');
    minimize = true;
  } else {
    $("#inputWindow").show();
    $('#windowBar2').css('display','none');
    $('#windowBar2 h3').css('display','none');
    minimize = false;
  }
}

@guradio, the functions are called using onclick. So, both functions and the DOM element are defined in DOM tree wen executing the code. If he puts the functions in document.ready, then they won't be defined in the global scope. The best practice is to define functions out of $() scope. — Adam Azad
– Adam Azad, Commented Dec 21, 2015 at 10:23
it is declared on top of file.. here is a pen: codepen.io/shiva112/pen/dGMrWB — Shiva Traanman
– Shiva Traanman, Commented Dec 21, 2015 at 10:24

Yogesh Sharma · Accepted Answer · 2015-12-21 10:45:13Z

3

Try changing the close function name to something else like closeTag because it may be confusing it with the window.close() function. And after changing the function name it's working now please check -

function closeTag() {
  $("#inputWindow").hide();
}

function minTag() {
  if (minimize === false) {
    $("#inputWindow").hide();
    $('#windowBar2').css('display','block');
    $('#windowBar2 h3').css('display','block');
    minimize = true;
  } else {
    $("#inputWindow").show();
    $('#windowBar2').css('display','none');
    $('#windowBar2 h3').css('display','none');
    minimize = false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="windowBar">
  <h3>If you were Chuck Norris...</h3>
  <input id="WindowClose" type="button" value="Close" onclick="closeTag()"/>
  <input id="windowSmall" type="button" value="Min" onclick="minTag()"/>
  
  <div id="inputWindow">
  hide text on Close button click
  </div>
</div>

edited Dec 21, 2015 at 10:45

answered Dec 21, 2015 at 10:39

Yogesh Sharma

2,0271 gold badge15 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jagadeesh Over a year ago

Can you check my answer

Yogesh Sharma Over a year ago

@Jagadeesh in your case if I want to call any function from input then I can't because you fixed the function with ID that I think user don't want.

Jagadeesh Over a year ago

@ShivaTraanman adding minimize = true; to close function will work for you

Clay · Accepted Answer · 2015-12-21 10:34:39Z

2

Your JavaScript functions need to be defined above your HTML fragment. Like this:

<script>
function close() {
  $("#inputWindow").hide(300);
}

function min() {
  if (minimize === false) {
    $("#inputWindow").hide();
    $('#windowBar2').css('display','block');
    $('#windowBar2 h3').css('display','block');
    minimize = true;
  } else {
    $("#inputWindow").show();
    $('#windowBar2').css('display','none');
    $('#windowBar2 h3').css('display','none');
    minimize = false;
  }
}
</script>
<div id="windowBar">
  <h3>If you were Chuck Norris...</h3>
  <input id="WindowClose" type="button" onclick="close();"></input>
  <input id="windowSmall" type="button" onclick="min();"></input>
</div>

Or you can do it the jQuery way:

<script>
document.ready(function() {

    $('#WindowClose').click( function() {
      $("#inputWindow").hide(300);
    });

    $('#windowSmall').click( function() {
      if (minimize === false) {
        $("#inputWindow").hide();
        $('#windowBar2').css('display','block');
        $('#windowBar2 h3').css('display','block');
        minimize = true;
      } else {
        $("#inputWindow").show();
        $('#windowBar2').css('display','none');
        $('#windowBar2 h3').css('display','none');
        minimize = false;
      }
    });
});
</script>
<div id="windowBar">
  <h3>If you were Chuck Norris...</h3>
  <input id="WindowClose" type="button"></input>
  <input id="windowSmall" type="button"></input>
</div>

answered Dec 21, 2015 at 10:34

Clay

4,7683 gold badges37 silver badges49 bronze badges

5 Comments

Shiva Traanman Over a year ago

can you fork my pen, i cant seem to get this working either... codepen.io/shiva112/pen/dGMrWB

Jagadeesh Over a year ago

I have given working snippet. can you check is it your requirement? if yes mark it as answer

Jagadeesh Over a year ago

I guess your requirement is when click on close it should hide input. and if click on open it should open the input window and again if we click on open it should hide. am i correct?

Shiva Traanman Over a year ago

@Jagadeesh i dont get you, the requirements are right there in the code. the functions work just fine, i just dont get them to function when i press the button..

Jagadeesh Over a year ago

@ShivaTraanman make sure add minimize = true; in close function

Manoj S Ramaswamy · Accepted Answer · 2015-12-21 10:45:18Z

1

Add javascript:close() in on click instead of directly calling that function close() use like this

onClick="javascript:close()", onClick="javascript:min()".

answered Dec 21, 2015 at 10:45

Manoj S Ramaswamy

3311 bronze badges

1 Comment

Manoj S Ramaswamy Over a year ago

are you writing javascript in same page itself or seperate if it is seperate please link that file to your code

Vixed · Accepted Answer · 2015-12-21 10:47:01Z

1

Consider to use return false or event.preventDefault() in your functions.

var minimize;
function close() {
  $("#inputWindow").hide(300);
  return false;
}

function min() {
  if (minimize === false) {
    $("#inputWindow").hide();
    $('#windowBar2').css('display','block');
    $('#windowBar2 h3').css('display','block');
    minimize = true;
  } else {
    $("#inputWindow").show();
    $('#windowBar2').css('display','none');
    $('#windowBar2 h3').css('display','none');
    minimize = false;
  }
  return false;
}

answered Dec 21, 2015 at 10:47

Vixed

3,4996 gold badges40 silver badges69 bronze badges

Comments

Jagadeesh · Accepted Answer · 2015-12-21 10:47:42Z

$(function(){

  var minimize = false
  function close() {
    $("#inputWindow").hide(300);
    minimize = true
  }

function toggleInputWindow() {
  if (minimize === false) {
    $("#inputWindow").hide();
    $('#windowBar2').css('display','block');
    $('#windowBar2 h3').css('display','block');
    minimize = true;
  } else {
    $("#inputWindow").show();
    $('#windowBar2').css('display','none');
    $('#windowBar2 h3').css('display','none');
    minimize = false;
  }
}
  $('#WindowClose').on('click',function(){
      close();
  })
  
  $('#windowSmall').on('click',function(){
      toggleInputWindow();
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="windowBar">
  <h3>If you were Chuck Norris...</h3>
  <input id="WindowClose" type="button" value="close"/>
  <input id="windowSmall" type="button" value="open"/>
</div>
<div id="inputWindow">input window</div>

Collectives™ on Stack Overflow

why is my input not triggering my function

5 Answers 5

3 Comments

5 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related