Question

我写了提供的代码。但是单击按钮后，什么也没有显示。

function calculate() {
  var colony = document.getElementById("co").value;
  var dilution = document.getElementById("dil").value;
  var inoculum = document.getElementById("in").value;
  var b = parseFloat(dilution) * parseFloat(inoculum);
  var c = parseFloat(colony) / b;
  if (!isNaN(c)) {
    document.getElementById("multiplication").innerHTML = "the conentration is " + c;
  }
}

<button type="button" onclick="calculate">Calculate</button>
<p id="multiplication"></p>

Answer 1

您没有调用calculate()函数。应该是onclick="calculate()"而不是onclick="calculate"。
元素中没有value属性。使用元素的innerText属性。

function calculate() {
  var colony = document.getElementById("co").innerText;
  var dilution = document.getElementById("dil").innerText;
  var inoculum = document.getElementById("in").innerText;
  var b = parseFloat(dilution) * parseFloat(inoculum);
  var c = parseFloat(colony) / b;
  if (!isNaN(c)) {
    document.getElementById("multiplication").innerHTML = "the conentration is " + c;
  }
}

<button type="button" onclick="calculate()">Calculate</button>
<p id="multiplication"></p>
<div id="co">1</div>
<div id="dil">2</div>
<div id="in">4</div>

Answer 2

我添加了HTML，但共享代码中未提供而且有效。允许输入字段不具有ID属性。

客户端：

function calculate() {
    var colony = document.getElementById("co").value;
    var dilution = document.getElementById("dil").value;
    var inoculum = document.getElementById("in").value;
    var b = parseFloat(dilution) * parseFloat(inoculum);
    var c = parseFloat(colony) / b;
    if (!isNaN(c)) {
        document.getElementById("multiplication").innerHTML =
            "the conentration is " + c;
    }
}

HTML：

    co: <input type="text" id="co"><br>
    dil: <input type="text" id="dil"><br>
    in: <input type="text" id="in"><br>
    <button type="button" onclick="calculate()">Calculate</button>
    <div id="multiplication">fff</div>

Answer 3

在您的初始代码中，您的onclick="calculate"在计算后丢失了()。我已经在您的html中使用JavaScript函数添加了该标记以及script标签，而无需更改原始代码的大部分文本。

工作中的Jsfiddle：https://jsfiddle.net/yuL58da1/

出于演示/教学目的，我还使用JQuery解决了该问题，向您展示了使用JQuery的解决方案。

工作中的JsFiddle：https://jsfiddle.net/4g9ayoqb/

使用JQuery方法，我更新了您的html button，使其包含id属性，并删除了onclick：

<button id="calculate" type="button">Calculate</button>

并为该按钮的ID添加了一个JQuery单击选择器：

$(document).on('click','#calculate',function()

单击按钮时，HTML函数不返回值

3 个答案: