Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery Text Function Only Works Twice

I’m trying to run this script many times but it only works twice.

What it’s supposed to do is ..Type a city name in the text box and then submit it and a function occurs. but it only works twice

$("#b").click(function() {
  var password = "toronto";
  if ($("#pass").val() == password) {
    $(".tim1").css({
      "display": "block"
    });
    return true;
  }

});
$("#b").click(function() {
  var password = "ottawa";
  if ($("#pass").val() == password) {
    $(".tim2").css({
      "display": "block"
    });
    return true;
  }

});
body {
  background-color: #6A6A6A;
}

.tim1 {
  background-color: #000000;
  position: absolute;
  top: 40px;
  left: 10px;
  width: 100px;
  height: 100px;
  display: none;
}

.tim2 {
  background-color: #525119;
  position: absolute;
  top: 40px;
  left: 10px;
  width: 100px;
  height: 100px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" id="pass"> <input type="button" id="b" value="Guess">
<div class="tim1"></div>
<div class="tim2"></div>
Tags:

2

Answers


  1. 0

    You’ve assigned two click handlers to #b, this maybe a source of your frustrations. You can combine them with a simple else-if:

    $("#b").click(function () {
    var password = $("#pass").val();
    if (password == "toronto") {
        $(".tim1").css({ "display": "block" });
    } else if (password == "ottawa") {
        $(".tim2").css({ "display": "block" });
    }
});
    Login or Signup to reply.
  2. 0

    The code "works", but you’ve styled two elements to occupy the exact same space at the same time. You probably want to hide them when performing the operation again.

    You can also simplify the operation. There’s no need to attach multiple click handlers here. All you need is a click handler which:

    • Hides the elements
    • Checks the input against known good values
    • Conditionally shows the relevant element

    For example:

    $("#b").click(function() {
  // initially hide the elements
  $(".tim1, .tim2").hide();

  // read the user input
  const password = $("#pass").val();

  // conditionally show the relevant element
  if (password === "toronto") {
    $(".tim1").show();
  } else if (password === "ottawa") {
    $(".tim2").show();
  }
});
    body {
  background-color: #6A6A6A;
}

.tim1 {
  background-color: #000000;
  position: absolute;
  top: 40px;
  left: 10px;
  width: 100px;
  height: 100px;
  display: none;
}

.tim2 {
  background-color: #525119;
  position: absolute;
  top: 40px;
  left: 10px;
  width: 100px;
  height: 100px;
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input type="text" id="pass"> <input type="button" id="b" value="Guess">
<div class="tim1"></div>
<div class="tim2"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search