Two buttons problems

Question

I'm writing a code for a class that should convert a number into Celsius or Fahrenheit (a really primitive code). I built the basics, and it seems to work. However, when I try to click on the lower button it won't produce an output unless the first one is clicked. Would love some help on how to fix that.

Thank you again!

function temperatureF() {
  let x = document.getElementById('value').value;
  let result = (9 / 5 * x) + 32;
  return result;
}

function temperatureC() {
  let y = document.getElementById('value').value;
  let result = (y - 32) * 5 / 9;
  return result;
}


$("#theButton1").click(function() {
  let theNumber = temperatureF;
  $('#output1').html(theNumber);
  $("output1").addClass("alert alert-success");

  $("#theButton2").click(function() {
    let theNumber = temperatureC;
    $('#output2').html(theNumber);
    $("output2").addClass("alert alert-success");
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      &nbsp;
    </div>

  </div>
  <div class="row">
    <div class="col-md-4">
      &nbsp;
    </div>

    <div class="col-md-4 border border-primary">
      <h1>Conversions</h1>
      <form>
        <label for="value">Enter your value:      </label>
        <input type="number" id="value" name="input">
      </form>
      <br>
      <form>
        <input type="button" class="btn btn-primary" id="theButton1" value="Press for Farenheit">
      </form>
      <br>
      <div id="output1" style="font-size:2em;">
      </div>
      <form>
        <input type="button" class="btn btn-primary" id="theButton2" value="Press for Celsius">
      </form>
      <br>
      <div id="output2" style="font-size:2em;">
      </div>
    </div>
    <div class="col-md-4">
      &nbsp;
    </div>

  </div>
  <div class="row">
    <div class="col-md-12">
      &nbsp;
    </div>

  </div>
</div>

Answer 1

The problem is that you accidentally placed the code setting up the event listener for the second button inside the event listener for the first button. Here it is below fixed:

function temperatureF() {
  let x = document.getElementById('value').value;
  let result = (9 / 5 * x) + 32;
  return result;
}

function temperatureC() {
  let y = document.getElementById('value').value;
  let result = (y - 32) * 5 / 9;
  return result;
}


$("#theButton1").click(function() {
  let theNumber = temperatureF;
  $('#output1').html(theNumber);
  $("output1").addClass("alert alert-success");
});

$("#theButton2").click(function() {
  let theNumber = temperatureC;
  $('#output2').html(theNumber);
  $("output2").addClass("alert alert-success");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      &nbsp;
    </div>

  </div>
  <div class="row">
    <div class="col-md-4">
      &nbsp;
    </div>

    <div class="col-md-4 border border-primary">
      <h1>Conversions</h1>
      <form>
        <label for="value">Enter your value:      </label>
        <input type="number" id="value" name="input">
      </form>
      <br>
      <form>
        <input type="button" class="btn btn-primary" id="theButton1" value="Press for Farenheit">
      </form>
      <br>
      <div id="output1" style="font-size:2em;">
      </div>
      <form>
        <input type="button" class="btn btn-primary" id="theButton2" value="Press for Celsius">
      </form>
      <br>
      <div id="output2" style="font-size:2em;">
      </div>
    </div>
    <div class="col-md-4">
      &nbsp;
    </div>

  </div>
  <div class="row">
    <div class="col-md-12">
      &nbsp;
    </div>

  </div>
</div>

Also, as user Raptor noted in the comments, you can sometimes run into issues when mixing vanilla JS and jQuery; you'll have an easier time debugging if you run all your DOM querying through jQuery.