How to make a text appear with a desired innerHTML using javascript/jquery

Question

There is a button and a h2 tag. the h2 tag has its visibilty=hidden.

When the button is clicked, I want to call a function that calculates the cost and changes the innerHTML of h2 accordingly and then changes its visibility=visible.

HTML:

<main class="form-signin">
    <form>
      <div class="card">
             <label for="inputAdult">Enter number of adults</label><input type="number" id="inputAdult" class="form-control" placeholder="No. of adults" required>
            <label for="inputChildren">Enter number of children (4-12yo)</label><input type="number" id="inputChildren" class="form-control" placeholder="No. of children" required>
           <button type="button" onclick="showCost()" id="btn3">Calculate my cost</button>
           <h2 class="changeCost">Your total cost: $0</h2>
        </div>
    </form>
  </main>

JavaScript / jQuery :

 $("h2").css("visibility","hidden");

function calculateCost(){
  var a = $("#inputAdult").val();
  var c = $("#inputchildren").val();

   if (((a+c)%3==0)||((a+c)%3==1)) {
    var rooms = (a+c)/3;
    }
   else {
    var rooms = ((a+c)/3)+1;
    }
  var cost = rooms*300;
  return cost;
}

function showCost() {
  var display = "Your total cost is: $" + calculateCost();
  var x = $("h2");
  x.value = display;
   $("h2").css("visibility","visible");
}

Answer 1

Try x.text(display) instead of setting value. That changes the innerText of the element. If you'd like to set its HTML content, use x.html(display).

The value accessor is used for plain HTMLElement objects, not for jQuery-wrapped objects.

Apart from this, you should never access a tag solely by its tag name. Always give it some kind of class name or ID. You already gave it the changeCost class, so you could do $("h2.changeCost") rather than $("h2").