CODEWITHSUNDEEP
javascripthtml
Omima
Omima

Reputation: 1

HTML functions don't return value when click on button

I wrote the code provided. But on clicking the button, nothing appears.

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>

Upvotes: 0

Views: 746

Answers (3)

King11
King11

Reputation: 1229

In your inital code, your onclick="calculate" was missing () after calculate. I've added that as well as a script tag within your html with your JavaScript function without changing much of your original code's text.

Working Jsfiddle: https://jsfiddle.net/yuL58da1/

For presentation/educational purposes, I solved the problem using JQuery as well to show you what the solution would look like using JQuery.

Working JsFiddle: https://jsfiddle.net/4g9ayoqb/

Using the JQuery method, I've updated your html button to include a id attribute and removed onclick:

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

and added a JQuery click selector for that button's id:

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

Upvotes: 0

Ahmed Msaouri
Ahmed Msaouri

Reputation: 316

I have added the HTML, which wasn't provided in the shared code and it works. It is permissible for input fields to not have an ID attribute.

Client Side:

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>

Upvotes: 0

zmag
zmag

Reputation: 8251

  1. You didn't call calculate() function. It should be onclick="calculate()" not onclick="calculate".
  2. There's no value property in an element. Use innerText property of an element.

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>

Upvotes: 1

Related Questions