Home > Blockchain >  jQuery text changing only after second click
jQuery text changing only after second click

Time：10-28

I'm new to javascript and jQuery, and I'm having trouble finding what's wrong with my code. I've written a very simple script that's supposed to change the text of a span on click, but I have to do two clicks to make it work. I have a slider, and the slider works perfectly on click, so I know that it's working on the first click, yet the text takes two clicks to change, and the two events are supposed to happen together. This is the code:

$(document).ready(function() {

  $(".slider").click(function() {

    $(".btn").toggleClass("movement");

    var newPrice1 = "59.99";
    if ($(".price1-span").text() == "19.99") {
      $(".price1-span").text(newPrice1)
    } else {
      $(".price1-span").text("19.99");
    }
  });
});
/* GENERAL */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Josefin Sans', sans-serif;
  background-image: url(/bbbackground.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

hr {
  width: 50%;
  margin: 0px auto;
}


/* H1 */

h1 {
  text-align: center;
  margin: 4vh auto 30px auto;
  color: #0B3142;
}


/* DECISION */

.decision {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  color: #0B3142;
}


/* SLIDER & SLIDER BTN */

.slider {
  height: 20px;
  width: 40px;
  margin: auto 20px;
  background-color: #0F5257;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}

.btn {
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: white;
  border-radius: 50%;
  transform: scale(0.8);
}

.movement {
  left: 20px;
}


/* PLAN CONTAINER */

#container {
  display: flex;
  justify-content: center;
}

#container div {
  border: 2px solid black;
  border-radius: 10px;
}


/* BASIC, PROFESSIONAL, DIAMOND */

.basic {
  padding: 50px 40px;
  background-color: rgb(238, 238, 238, 80%);
  text-align: center;
  line-height: 40px;
  transition: .5s;
}

.basic:hover {
  transform: scale(1.05);
  background-color: #114b66;
  color: white;
}

.basic:hover h3 {
  color: white;
}

.basic:hover button {
  color: black;
  box-shadow: 0px 5px 5px black;
}


/* BASIC H3 */

.basic h3 {
  color: #114b66;
  margin-top: -50px;
}

.basic h2 {
  font-size: 45px;
  margin-bottom: 20px;
}

.red {
  color: red;
}


/* SPAN DOLLAR SIGN */

.price {
  margin-top: 15px;
  font-size: 20px !important;
}

.price1-span {
  font-size: 45px !important;
}


/* LEARN MORE BUTTON */

button {
  margin-top: 100px;
  width: 160px;
  height: 40px;
  background-color: #1d8e96;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  border-radius: 10px;
  border-style: none;
  box-shadow: 0px 5px 5px rgb(151, 151, 151);
  color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Pricing Component </title>

  <link rel="stylesheet" href="style.css">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Josefin Sans&display=swap" rel="stylesheet">

</head>

<body>
  <h1> Limited Time Offer! </h1>
  <div class="decision">
    <p> Monthly </p>
    <div class="slider">
      <div class="btn"></div>
    </div>
    <p> Anually </p>
  </div>

  <div id="container">
    <div class="basic">
      <h3> Master Plan </h3>
      <h2 class="price"> $ <span class="price1-span"> 19.99 </span></h2>
      <hr>
      <p> 1 TB Storage </p>
      <hr>
      <p> 5 Sites Allowed </p>
      <hr>
      <p> Free email account </p>
      <hr>
      <p> Full Account Access </p>
      <hr>
      <button> learn more </button>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

The initial text of the span has spaces around the price, but you don't have that in the string you're comparing with.

You can use .trim() to remove surrounding whitespace.

$(document).ready(function() {

  $(".slider").click(function() {

    $(".btn").toggleClass("movement");

    var newPrice1 = "59.99";
    if ($(".price1-span").text().trim() == "19.99") {
      $(".price1-span").text(newPrice1)
    } else {
      $(".price1-span").text("19.99");
    }
  });
});
/* GENERAL */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Josefin Sans', sans-serif;
  background-image: url(/bbbackground.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

hr {
  width: 50%;
  margin: 0px auto;
}


/* H1 */

h1 {
  text-align: center;
  margin: 4vh auto 30px auto;
  color: #0B3142;
}


/* DECISION */

.decision {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  color: #0B3142;
}


/* SLIDER & SLIDER BTN */

.slider {
  height: 20px;
  width: 40px;
  margin: auto 20px;
  background-color: #0F5257;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}

.btn {
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: white;
  border-radius: 50%;
  transform: scale(0.8);
}

.movement {
  left: 20px;
}


/* PLAN CONTAINER */

#container {
  display: flex;
  justify-content: center;
}

#container div {
  border: 2px solid black;
  border-radius: 10px;
}


/* BASIC, PROFESSIONAL, DIAMOND */

.basic {
  padding: 50px 40px;
  background-color: rgb(238, 238, 238, 80%);
  text-align: center;
  line-height: 40px;
  transition: .5s;
}

.basic:hover {
  transform: scale(1.05);
  background-color: #114b66;
  color: white;
}

.basic:hover h3 {
  color: white;
}

.basic:hover button {
  color: black;
  box-shadow: 0px 5px 5px black;
}


/* BASIC H3 */

.basic h3 {
  color: #114b66;
  margin-top: -50px;
}

.basic h2 {
  font-size: 45px;
  margin-bottom: 20px;
}

.red {
  color: red;
}


/* SPAN DOLLAR SIGN */

.price {
  margin-top: 15px;
  font-size: 20px !important;
}

.price1-span {
  font-size: 45px !important;
}


/* LEARN MORE BUTTON */

button {
  margin-top: 100px;
  width: 160px;
  height: 40px;
  background-color: #1d8e96;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  border-radius: 10px;
  border-style: none;
  box-shadow: 0px 5px 5px rgb(151, 151, 151);
  color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Pricing Component </title>

  <link rel="stylesheet" href="style.css">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Josefin Sans&display=swap" rel="stylesheet">

</head>

<body>
  <h1> Limited Time Offer! </h1>
  <div class="decision">
    <p> Monthly </p>
    <div class="slider">
      <div class="btn"></div>
    </div>
    <p> Anually </p>
  </div>

  <div id="container">
    <div class="basic">
      <h3> Master Plan </h3>
      <h2 class="price"> $ <span class="price1-span"> 19.99 </span></h2>
      <hr>
      <p> 1 TB Storage </p>
      <hr>
      <p> 5 Sites Allowed </p>
      <hr>
      <p> Free email account </p>
      <hr>
      <p> Full Account Access </p>
      <hr>
      <button> learn more </button>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  <script src="script.js"></script>
</body>

</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Cause

The reason is that initially your price elements text() is " 19.99 ", not "19.99".

" 19.99 " == "19.99" // returns false

What's going on?

So when your click handler arrives here on your first click, it goes into your else branch, setting it to "19.99". Since doesn't change anything visually, you get the impression that "nothing happens on first click".

2nd click it does find "19.99", thus your comparison returns true, so this time your if-branch is executed.

Simplest way to fix it

To fix the issue, simply remove the leading and trailing space character from your

<span class="price1-span"> 19.99 </span>

so you end up with

<span class="price1-span">19.99</span>


$(document).ready(function() {

  $(".slider").click(function() {

    $(".btn").toggleClass("movement");

    var newPrice1 = "59.99";
    if ($(".price1-span").text() == "19.99") {
      $(".price1-span").text(newPrice1)
    } else {
      $(".price1-span").text("19.99");
    }
  });
});
/* GENERAL */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Josefin Sans', sans-serif;
  background-image: url(/bbbackground.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

hr {
  width: 50%;
  margin: 0px auto;
}


/* H1 */

h1 {
  text-align: center;
  margin: 4vh auto 30px auto;
  color: #0B3142;
}


/* DECISION */

.decision {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  color: #0B3142;
}


/* SLIDER & SLIDER BTN */

.slider {
  height: 20px;
  width: 40px;
  margin: auto 20px;
  background-color: #0F5257;
  border-radius: 10px;
  position: relative;
  cursor: pointer;
}

.btn {
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: white;
  border-radius: 50%;
  transform: scale(0.8);
}

.movement {
  left: 20px;
}


/* PLAN CONTAINER */

#container {
  display: flex;
  justify-content: center;
}

#container div {
  border: 2px solid black;
  border-radius: 10px;
}


/* BASIC, PROFESSIONAL, DIAMOND */

.basic {
  padding: 50px 40px;
  background-color: rgb(238, 238, 238, 80%);
  text-align: center;
  line-height: 40px;
  transition: .5s;
}

.basic:hover {
  transform: scale(1.05);
  background-color: #114b66;
  color: white;
}

.basic:hover h3 {
  color: white;
}

.basic:hover button {
  color: black;
  box-shadow: 0px 5px 5px black;
}


/* BASIC H3 */

.basic h3 {
  color: #114b66;
  margin-top: -50px;
}

.basic h2 {
  font-size: 45px;
  margin-bottom: 20px;
}

.red {
  color: red;
}


/* SPAN DOLLAR SIGN */

.price {
  margin-top: 15px;
  font-size: 20px !important;
}

.price1-span {
  font-size: 45px !important;
}


/* LEARN MORE BUTTON */

button {
  margin-top: 100px;
  width: 160px;
  height: 40px;
  background-color: #1d8e96;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 3px;
  border-radius: 10px;
  border-style: none;
  box-shadow: 0px 5px 5px rgb(151, 151, 151);
  color: white;
}
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin Sans&display=swap" rel="stylesheet">
<h1> Limited Time Offer! </h1>
<div class="decision">
  <p> Monthly </p>
  <div class="slider">
    <div class="btn"></div>
  </div>
  <p> Anually </p>
</div>

<div id="container">
  <div class="basic">
    <h3> Master Plan </h3>
    <h2 class="price"> $ <span class="price1-span">19.99</span></h2>
    <hr>
    <p> 1 TB Storage </p>
    <hr>
    <p> 5 Sites Allowed </p>
    <hr>
    <p> Free email account </p>
    <hr>
    <p> Full Account Access </p>
    <hr>
    <button> learn more </button>
  </div>
</div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/Blockchain/169921.html

Prev:How to clean button click source code written in javascript and jquery?
Next:Unexpected results using Element.querySelector
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding