HTML functions don't return value when click on button

Question

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>

Hello! Please read Question Check list and how to create a Minimal, Complete and Verifiable Example. You can also take the tour. — freeek
– freeek, Commented Oct 10, 2019 at 16:31
Can you please update the question with complete html you have wrote, the current code doesn't have ids co, dil, in — chans
– chans, Commented Oct 10, 2019 at 16:33

zmag · Accepted Answer · 2019-10-11 00:45:33Z

1

You didn't call calculate() function. It should be onclick="calculate()" not onclick="calculate".
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>

edited Oct 11, 2019 at 0:45

answered Oct 11, 2019 at 0:27

zmag

8,27112 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Angry Coder · Accepted Answer · 2019-10-11 02:43:42Z

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>

King11 · Accepted Answer · 2019-10-11 04:28:17Z

0

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()

edited Oct 11, 2019 at 4:28

answered Oct 10, 2019 at 17:06

King11

1,2293 gold badges9 silver badges18 bronze badges

2 Comments

j08691 Over a year ago

The question contains no jQuery nor the jQuery tag

King11 Over a year ago

I've updated my answer showing both the Javascript way and the Jquery way to solve the problem. Just to show an example that JQuery could be used as well for educational purposes.

Collectives™ on Stack Overflow

HTML functions don't return value when click on button

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related