如何使用 javascript/jquery 使文本显示为所需的 innerHTML

Question

有一个按钮和一个 h2 标签。 h2 标签的 visibilty=hidden.

当按钮被点击时，我想调用一个函数来计算成本并相应地改变 h2 的内部HTML，然后改变它的 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: [=11=]</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

尝试 x.text(display) 而不是设置 value。这会更改元素的 innerText。如果您想设置其 HTML 内容，请使用 x.html(display).

value 访问器用于普通 HTML 元素对象，不适用于 jQuery 包装对象。

除此之外，您永远不应仅通过标签名称访问标签。始终给它某种 class 名称或 ID。你已经给了它 changeCost class，所以你可以做 $("h2.changeCost") 而不是 $("h2").

Answer 2

为避免获得 NaN，请执行以下操作： Javascript 区分大小写，因此替换行

var c = $("#inputchildren").val();

与

var c = $("#inputChildren").val();

我还会考虑在 if 和 else 范围内声明房间变量，以便在计算时可以访问它：请参阅下面的完整功能：

function calculateCost(){
  var a = $("#inputAdult").val();
  var c = $("#inputChildren").val();
  var rooms = 0;
  
   if (((a+c)%3==0)||((a+c)%3==1)) {
      rooms = (a+c)/3;
    }
   else {
      rooms = ((a+c)/3)+1;
    }
  var cost = rooms*300;
  return cost;
}

如何使用 javascript/jquery 使文本显示为所需的 innerHTML

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

html

javascript

forms

jquery

innerhtml