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;
  }
}

Answer 1

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>

Answer 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>