0

I added some jQuery code for my assignments, the topic professor wanted is: "Define a 'Click to Fade Results' button on the form. Use jQuery to define a ready handler that defines a click event handler for the button, such that clicking the button fades the results in the textarea or div where you put the results." Here is my link

When I try to fade, it reset all file. I'm new at Javascript and jQuery...

$(document).ready(function() {
  $("#fade").click(function() {
    $("#results").fadeTo("slow", 0.15);
    alert("here")
  });
});
.main {
  display: block;
  border: solid 3px grey;
  text-align: center;
  margin-bottom: 2em;
  margin-top: 2em;
  font-size: 1.3em;
  background-color: rgb(52, 54, 59);
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  Cersoy-CNIT133-Assignments 2 -Part2
</header>
<div class="main">
  <div>
    <p>First Number</p>
    <input type="text" name="first_number" id="first_num" required>
  </div>
  <div>
    <p> Second Number</p>
    <input type="text" name="second_number" id="second_num" required>
  </div>
  <div>
    <p>Third number</p>
    <input type="text" name="third_number" id="third_num" required>
  </div>

  <button class="Calculate" onclick="calculate()">Calculate </button>

  <div>
    <p> Results</p>
    <textarea name="results" id="results" cols="30" rows="10" readonly></textarea>
  </div>

  <form action="">
    <button class="reset" onclick="res() "> reset </button>
  </form>
  <form action="">
    <button class="Fade_results" id="fade"> Click to Fade Results </button>
  </form>

</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Latecoder
  • 79
  • 5
  • 1
    Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` snippet editor. – mplungjan Sep 08 '20 at 09:05
  • 1
    Make it a type="button" or remove the wrapping form tags - you are submitting a form now – mplungjan Sep 08 '20 at 09:07
  • What is the intention for "fade results in the textarea"? – Reporter Sep 08 '20 at 09:10
  • "fade results in the textarea" I think It defines the text, not textarea itself – Latecoder Sep 08 '20 at 09:14
  • 1
    Take a look in function reset() and keep an eye to second comment from @mplungjan – Reporter Sep 08 '20 at 09:24

0 Answers0